{% load static %}
<link rel="stylesheet" href="{% static 'dist/css/profile.css' %}">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-dark 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" style="padding-right: 5%;">
 
    {% if request.user.is_authenticated %}
    
         <ul class="ul float-sm-right">
          <a class="fa fa-wrenc nav-icon" data-id="{{request.user.id}}" id="Staffpageupdate_profile" style="color:black;" title="Update Profile"> <i style="color: white;" class="fa fa-key" aria-hidden="true"></i></a>
          </a>

          <li class="li">
              <div>
                <i class="fa fa-cogs" style="color: white;"></i>

               <!-- <img src="{{ media_url }}{{request.user.user_profile}}" style="height: 5%; width: 5%; padding: 0px; margin-right: 10%;" class="img-circle elevation-2 float-right" alt="User Image"> -->
          </div>
              <ul class="ul">
                  <li class="sub-item">
                    <div class="card-body">
                      <div class="row mt-3">
                        <div class="col-md-12 image" style="background-color: #E2E2E2;">
                          <div class="text-center">
                            <img class="profile-user-img img-fluid img-circle"
                      src="{{ media_url }}{{request.user.user_profile}}"
                           alt="profile picture">
                          </div>
                          <!-- <img src="{% static 'dist/img/userP.jpg' %}" style="height: 30%; width: 20%; margin-left: 15%;" class="img-circle elevation-0" alt="User Image"> -->
                          <p style="font-size: large; text-align: center;">{{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-12">
                          <a href="{% url 'logout' %}" class="btn btn-sm nav-link">
                            <button class="fa fa-sign-out-alt nav-icon btn btn-sm btn-danger btn-block" style="color:white;" title="Logout">Logout</button>
                          </a>
                         </div>
                       <br>
                      </div>
                    </div>
                  </li>
                
              </ul>
          </li>
      </ul>
       <!-- </ul>
     </li>   -->
    
    {% endif %} 
  </ul>  
</nav>
<!-- /.navbar -->
<div class="modal fade" id="staffpageupdate_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="SoMCMEupdate_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="staffpage_update_own_user" class="btn btn-success btn-sm">Update</span>
      </p>
      
       </div>  
   </div>
</div>
</div>
</div>