<li class="nav-item dropdown align-self-end" id="user">
{% if user.is_authenticated %}
    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Hi {{ user.first_name }}
    </a>
    <ul class="dropdown-menu clearfix" id="userdropdown">
        <li class="media">
            <a href="{% url 'profile_detail' %}">
                <img src="{{ request.user.profile_picture }}" class="media-object float-left pr-2"/>
                <div class="media-body">
                        <b>{{ request.user.first_name }} {{ request.user.last_name }}</b>
                        <p class="text-muted">{{ request.user.email }}</p>
                </div>
            </a>
        </li>
        <div class="dropdown-divider"></div>
        <li class="float-right"><a href="{% url 'logout' %}" class="btn btn-primary"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
    </ul>
{% else %}
<a class="nav-link" href="{% url 'login' %}">
    Login
</a>
{% endif %}
</li>
