{% load static %}
<link rel="stylesheet" href="{% static 'dist/css/profile.css' %}">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white 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: black;" title="Collapse"></i></a>
    </li>
    
  </ul>

  <!-- Right navbar links -->
  <ul class="navbar-nav ml-auto">
 
    {% if request.user.is_authenticated %}
    
         <ul class="ul float-sm-right">
          
          <li class="li">
              <div>
               <img src="{% static 'dist/img/userP.jpg' %}" style="height: 12%; width: 12%; padding: 0px; margin-right: 5%;" class="img-circle elevation-2 float-right" 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" style="background-color: #E2E2E2;">
                          <div class="text-center">
                            <img class="profile-user-img img-fluid img-circle"
                      src="{% static 'dist/img/userP.jpg'%}"
                           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-6">
                        <a href="{% url 'logout' %}" class="btn btn-sm nav-link">
                          <button class="fa fa-wrench nav-icon btn btn-sm btn-warning" style="color:black" title="Update Profile">Profile</button>
                        </a>
                       </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 -->