{% load static %}
<div class="navbar-custom topnav-navbar topnav-navbar-dark shadow-lg">
    <div class="container-fluid">

        <!-- LOGO -->
        <a href="{% url 'home' %}" class="topnav-logo">
            <span class="topnav-logo-lg">
                <img src="{% static 'images/simmate-logo-dark.svg' %}" alt="" height="36">
            </span>
            <span class="topnav-logo-sm">
                <img src="{% static 'images/simmate-icon.svg' %}" alt="" height="36">
            </span>
        </a>

        <ul class="list-unstyled topbar-menu float-end mb-0">

            <li class="dropdown notification-list d-none d-sm-inline-block">
                <a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button"
                    aria-haspopup="false" aria-expanded="false">
                    <i class="dripicons-view-apps noti-icon"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated dropdown-lg p-0">

                    <div class="p-2">
                        <div class="row g-0">
                            <div class="col">
                                <a class="dropdown-icon-item" href="https://github.com/jacksund/simmate" target="_blank">
                                    <img src="{% static 'images/github-icon.svg' %}" alt="github" style="height:36px">
                                    <span><b>GitHub</b></span>
                                </a>
                            </div>
                            <div class="col">
                                <a class="dropdown-icon-item" href="https://jacksund.github.io/simmate/simmate.html" target="_blank">
                                    <img src="{% static 'images/simmate-icon.svg' %}" alt="apidocs" style="height:36px"> 
                                    <span><b>API Docs</b></span>
                                </a>
                            </div>
                            <div class="col">
                                <a class="dropdown-icon-item" href="https://docs.djangoproject.com/en/4.0/" target="_blank">
                                    <img src="{% static 'images/django-icon.svg' %}" alt="django" style="height:36px">
                                    <span><b>Django</b></span>
                                </a>
                            </div>
                        </div>

                        <div class="row g-0">
                            <div class="col">
                                <a class="dropdown-icon-item" href="https://cloud.prefect.io/" target="_blank">
                                    <img src="{% static 'images/prefect-icon.svg' %}" alt="prefect" style="height:36px">
                                    <span><b>Prefect</b></span>
                                </a>
                            </div>
                            <div class="col">
                                <a class="dropdown-icon-item" href="https://docs.dask.org/en/stable/futures.html" target="_blank">
                                    <img src="{% static 'images/dask-icon.svg' %}" alt="dask" style="height:40px">
                                    <span><b>Dask</b></span>
                                </a>
                            </div>
                            <div class="col">
                                <a class="dropdown-icon-item" href="https://cloud.digitalocean.com/" target="_blank">
                                    <img src="{% static 'images/digitalocean-icon.svg' %}" alt="digitalocean" style="height:36px">
                                    <span><b>DigitalOcean</b></span>
                                </a>
                            </div>

                        </div>
                    </div>

                </div>
            </li>

            <!-- start Account Login -->
            {% if user.is_authenticated %}
            <li class="dropdown notification-list">
                <a class="nav-link dropdown-toggle nav-user arrow-none me-0" data-bs-toggle="dropdown"
                    id="topbar-userdrop" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    <span class="account-user-avatar">
                        <img src="/static/images/simmate-icon.svg" alt="user-image" class="rounded-circle">
                    </span>

                    <span>
                        <span class="account-user-name">{{ user.username }}</span>
                        <span class="account-position">{{ user.email }}</span>
                    </span>
                </a>
                <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated topbar-dropdown-menu profile-dropdown"
                    aria-labelledby="topbar-userdrop">

                    <!-- item-->
                    <a href="{% url 'profile' %}" class="dropdown-item notify-item">
                        <i class="mdi mdi-account-circle me-1"></i>
                        <span>My Account</span>
                    </a>

                    <!-- item
                    <a href="#" class="dropdown-item notify-item">
                        <i class="mdi mdi-account-edit me-1"></i>
                        <span>Settings</span>
                    </a>
                    -->

                    <!-- item-->
                    <a href="{% url 'contact' %}" class="dropdown-item notify-item">
                        <i class="mdi mdi-email me-1"></i>
                        <span>Contact Us</span>
                    </a>

                    <!-- item-->
                    <a href="{% url 'account_logout' %}" class="dropdown-item notify-item">
                        <i class="mdi mdi-logout me-1"></i>
                        <span>Logout</span>
                    </a>

                </div>
            </li>
            {% else %}
            <li class="dropdown notification-list">
                <a class="nav-link dropdown-toggle nav-user arrow-none me-0" data-bs-toggle="dropdown"
                    id="topbar-userdrop" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    <span class="account-user-avatar">
                        <img src="{% static 'images/simmate-icon.svg' %}" alt="user-image" class="rounded-circle">
                    </span>

                    <span>
                        <span class="account-user-name">Anonymous</span>
                        <span class="account-position">exploring w/o an account</span>
                    </span>
                </a>
                <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated topbar-dropdown-menu profile-dropdown"
                    aria-labelledby="topbar-userdrop">

                    <!-- item-->
                    <a href="{% url 'account_login' %}" class="dropdown-item notify-item">
                        <i class="mdi mdi-account-circle me-1"></i>
                        <span>Sign In</span>
                    </a>

                    <!-- item-->
                    <a href="{% url 'account_signup' %}" class="dropdown-item notify-item">
                        <i class="mdi mdi-account-plus me-1"></i>
                        <span>Create Account</span>
                    </a>

                    <!-- item-->
                    <a href="{% url 'contact' %}" class="dropdown-item notify-item">
                        <i class="mdi mdi-email me-1"></i>
                        <span>Contact Us</span>
                    </a>

                </div>
            </li>
            {% endif %}
            <!-- end Account Login -->

        </ul>
        <a class="button-menu-mobile disable-btn">
            <div class="lines">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </a>
    </div>
</div>