{% load static %}
<link rel="stylesheet" href="{% static 'dist/css/profile.css' %}">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-cyan navbar-light text-sm">
  <!-- Left navbar links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars" style="color: white;" title="Collapse"></i></a>
    </li>
    
  </ul>

  <!-- Right navbar links -->
  <ul class="navbar-nav ml-auto">
 
    {% if request.user.is_authenticated %}
    
         <ul class="ul">
          <li class="li" style="padding: 0px; margin-left: 20%;">
              <div>
               <img src="{% static 'dist/img/userP.png' %}" style="height: 15%; width: 15%; padding: 0px;" class="img-circle elevation-2" alt="User Image">
            <span style="color: white;">{{request.user.first_name}} {{request.user.last_name}}</span>
          </div>
              <ul class="ul">
                  <li class="sub-item">
                    <div class="card-body">
                      <div class="row mt-3">
                        <div class="col-md-12 image">
                          <div class="text-center">
                            <img class="profile-user-img img-fluid img-circle"
                      src="{% static 'dist/img/userP.png'%}"
                           alt="profile picture">
                          </div>
                          <!-- <img src="{% static 'dist/img/userP.png' %}" style="height: 30%; width: 20%; margin-left: 15%;" class="img-circle elevation-0" alt="User Image"> -->
                          <p style="font-size: large; margin-left: 25%;">{{request.user.email}}</p><p style="margin-left: 25%;">{{request.user.first_name}} {{request.user.last_name}}</p> 
                        </div>
                        <div class="col-md-12">
                          <hr style="color: black; font-weight: bolder;">
                        </div>
                       
                       <div class="col-md-6">
                        <button class="fa fa-wrenc nav-icon btn btn-sm btn-warning" data-id="{{request.user.id}}" id="SoHSSupdate_profile" style="color:black" title="Update Profile"> Update Profile</button>

                       </div>
                       <div class="col-md-6">
                        <a href="{% url 'logout' %}" class="btn btn-sm nav-link">
                          <button class="fa fa-sign-out-alt nav-icon btn btn-sm btn-danger" style="color:black;" title="Logout">Logout</button>
                        </a>
                       </div>
                       <br>
                      </div>
                    </div>
                  </li>
                
              </ul>
          </li>
      </ul>
       <!-- </ul>
     </li>   -->
    
    {% endif %} 
  </ul>  
</nav>

<!-- /.navbar -->
<div class="modal fade" id="SoHSSupdate_own_user_profile" tabindex="-1" role="dialog" aria-labelledby="confirm_title"
aria-hidden="true">
<div class="modal-dialog modal-lg">
   <div class="modal-content">
       <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
           </button>
       </div>
       <div class="modal-body" id="SoHSSupdate_profile">
        <div class="card-body text-sm">
          <strong><i class="fas fa-book mr-1"></i> First Name</strong>
  
          <p class="text-muted">
              <input type="text" value="{{ request.user.first_name }}" class="form-control form-control-border" id="first_name" placeholder="First Name">
          </p>
  
         
          <strong><i class="fas fa-book mr-1"></i> Last Name</strong>
  
          <p class="text-muted">
              <input type="text" value="{{ request.user.last_name }}" class="form-control form-control-border" id="last_name" placeholder="Last Name">
          </p>
  
         
          <strong><i class="fa fa-envelope mr-1"></i> Email</strong>
  
          <p class="text-muted">
              <input type="email" value="{{ request.user.email }}" class="form-control form-control-border" id="email" placeholder="Email">
          </p>
         
          <strong><i class="fa fa-user mr-1"></i> Password <span style="color: red; font-size: large;">*</span></strong>
  
          <p class="text-muted">
              <input type="password" class="form-control form-control-border" id="password" placeholder="Password">
          </p>
                  
        <p class="btn-group offset-5">
          <span  data-id="{{ request.user.id }}" id="SoHSS_update_own_user" class="btn btn-success btn-sm">Update</span>
      </p>
      
       </div>  
   </div>
</div>
</div>
</div>