<li class="nav-item dropdown" 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 p-3 clearfix" id="userdropdown">
        <li class="media">
            <a href="{% url 'profile_detail' %}">
                <img src="{{ request.user.profile_picture }}" class="media-object"/>
                <div class="media-body">
                    <b>{{ request.user.first_name }} {{ request.user.last_name }}</b>
                    <p class="muted">{{ request.user.email }}</p>
                </div>
            </a>
        </li>
        <li class="mb-2">
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="darkSwitch" />
                <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
            </div>
        </li>
        <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>
