{% load static %}
<div class="sticky-top shadow">
    {% simmate_setting "website.show_finances" as SHOW_FINANCES %}
    <div class="bg-warning text-dark text-center py-1 small fw-bold">
        <i class="bi bi-cone-striped"></i>
        This site is under early construction. Data is reset periodically,
        {% if SHOW_FINANCES %}pricing is disabled,{% endif %}
        and limited compute is available.
        <i class="bi bi-cone-striped"></i>
    </div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary py-1">
        <div class="container">
            {# Simmate Logo / Home button #}
            <a href="{% url 'home' %}" class="navbar-brand">
                <span class="d-none d-md-block bg-light px-3 rounded-pill">
                    <img src="{% static 'images/simmate-logo-dark.svg' %}" height="35">
                </span>
                <span class="d-md-none">
                    <img src="{% static 'images/simmate-icon.svg' %}" height="36">
                </span>
            </a>
            <button class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        {# todo: add 'active' class to whichever section is active + highlighted #}
                        <a class="nav-link" href="{% url 'apps' %}"><i class="bi bi-speedometer2"></i> Apps</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'data_explorer:home' %}"><i class="bi bi-bar-chart"></i> Data</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'workflow_explorer:home' %}"><i class="bi bi-diagram-3"></i> Workflows</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-three-dots"></i> Extras
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <h6 class="dropdown-header">General</h6>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{% url 'about' %}"><i class="bi bi-info-circle"></i> About</a>
                            </li>
                            <li>
                                <a class="dropdown-item"
                                   href="https://github.com/jacksund/simmate/"
                                   target="_blank"><i class="bi bi-github"></i> Github</a>
                            </li>
                            {% if SHOW_FINANCES %}
                                <li>
                                    <a class="dropdown-item" href="{% url 'pricing' %}"><i class="bi bi-currency-dollar"></i> Pricing</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#"><i class="bi bi-piggy-bank"></i> Finances</a>
                                </li>
                            {% endif %}
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li>
                                <h6 class="dropdown-header">Guides</h6>
                            </li>
                            <li>
                                <a class="dropdown-item"
                                   href="https://jacksund.github.io/simmate/home/"
                                   target="_blank"><i class="bi bi-book"></i> All Docs</a>
                            </li>
                            <li>
                                <a class="dropdown-item"
                                   href="https://jacksund.github.io/simmate/full_guides/website/rest_api/"
                                   target="_blank"><i class="bi bi-braces"></i> REST API</a>
                            </li>
                            <li>
                                <a class="dropdown-item"
                                   href="https://jacksund.github.io/simmate/full_guides/toolkit/molecules/overview/"
                                   target="_blank"><i class="bi bi-tools"></i> Toolkit</a>
                            </li>
                            {% if SHOW_FINANCES %}
                                <li>
                                    <a class="dropdown-item" href="#"><i class="bi bi-cpu"></i> Contribue & Earn</a>
                                </li>
                            {% endif %}
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li>
                                <h6 class="dropdown-header">Help</h6>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{% url 'contact' %}"><i class="bi bi-envelope"></i> Contact</a>
                            </li>
                            <li>
                                <a class="dropdown-item"
                                   href="https://github.com/jacksund/simmate/issues/new/"
                                   target="_blank"><i class="bi bi-bug"></i> Report a Bug</a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{% url 'faqs' %}"><i class="bi bi-question-circle"></i> FAQs</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="d-flex">
                {% if user.is_authenticated %}
                    {% if SHOW_FINANCES %}
                        {# USDC button #}
                        <button type="button"
                                class="btn btn-light rounded-4 py-0 px-2 me-2"
                                data-bs-toggle="modal"
                                data-bs-target="#usdcModal">
                            <img src="{% static 'images/usdc-icon.svg' %}" alt="" height="24">
                            <b>{{ user.wallet.usdc_balance|floatformat:2|intcomma }}</b>
                        </button>
                        {# Simmate Token button #}
                        <button type="button"
                                class="btn btn-light rounded-4 py-0 px-2 me-2"
                                data-bs-toggle="modal"
                                data-bs-target="#simmateModal">
                            <img src="{% static 'images/simmate-token-icon.svg' %}" alt="" height="24">
                            <b>{{ user.wallet.token_balance|floatformat:0|intcomma }}</b>
                        </button>
                    {% endif %}
                    {# user name + profile button #}
                    <a class="btn btn-outline-light me-2 position-relative"
                       href="{% url 'profile' %}">
                        <i class="bi bi-person-circle"></i>&nbsp;&nbsp;
                        {% if user.first_name %}
                            {{ user.first_name }} {{ user.last_name }}
                        {% else %}
                            {{ user.username }}
                        {% endif %}
                        {% unread_notifications_count user as unread_count %}
                        {% if unread_count > 0 %}
                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                {{ unread_count }}
                                {% if unread_count > 99 %}+{% endif %}
                                <span class="visually-hidden">unread notifications</span>
                            </span>
                        {% endif %}
                    </a>
                    {# logout button #}
                    <a class="btn btn-outline-light me-2"
                       data-bs-toggle="modal"
                       data-bs-target="#logoutModal">
                        <i class="bi bi-door-open"></i>
                    </a>
                {% else %}
                    <a class="btn btn-outline-light me-2" href="{% url 'account_login' %}"><i class="bi bi-key-fill"></i> Login</a>
                    {% simmate_setting "website.require_login_internal" as REQUIRE_LOGIN_INTERNAL %}
                    {% if not REQUIRE_LOGIN_INTERNAL %}
                        <a class="btn btn-outline-light me-2" href="{% url 'account_signup' %}"><i class="bi bi-person-plus"></i> Sign Up</a>
                    {% endif %}
                {% endif %}
                {# light/dark mode button. Disabled for now #}
                {% comment %}
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary border-0" type="button" data-bs-toggle="dropdown">
                            <i class="bi bi-circle-half"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <button class="dropdown-item" data-bs-theme-value="light">
                                    <i class="bi bi-brightness-high"></i> Light
                                </button>
                            </li>
                            <li>
                                <button class="dropdown-item" data-bs-theme-value="dark">
                                    <i class="bi bi-moon-stars"></i> Dark
                                </button>
                            </li>
                        </ul>
                    </div>
                {% endcomment %}
            </div>
        </div>
    </nav>
</div>
<div>
    {# the popout models need to be kept in this separate div bc they don't behave well inside the navbar when sticky-top is active #}
    {% if user.is_authenticated %}
        {% if SHOW_FINANCES %}
            {# USDC modal #}
            <div class="modal fade" id="usdcModal" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content text-center">
                        <div class="modal-header">
                            <h5 class="modal-title">Fund USDC Balance</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="alert alert-success">
                                <a href="{% url 'pricing' %}" class="alert-link">Please read our Pricing page before sending <i class="bi bi-box-arrow-up-right"></i></a>
                            </div>
                            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/QR_code_for_mobile_English_Wikipedia.svg/444px-QR_code_for_mobile_English_Wikipedia.svg.png"
                                 alt="USDC QR Code"
                                 class="img-fluid mb-3"
                                 style="max-width:400px">
                            <h3>simmate.eth</h3>
                            <div class="input-group mb-3">
                                <input type="text"
                                       class="form-control text-center text-secondary"
                                       id="walletAddress"
                                       value="0x1234...ABCD"
                                       readonly>
                                <button class="btn btn-outline-secondary"
                                        type="button"
                                        onclick="navigator.clipboard.writeText('SimmatewalletAddress12345')">
                                    <i class="bi bi-clipboard"></i> Copy
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {# Simmate Token modal #}
            <div class="modal fade" id="simmateModal" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Adjust Token Balance</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        {% htmx_component "token-balance-form" %}
                    </div>
                </div>
            </div>
        {% endif %}
        {# logout confirmation modal #}
        <div class="modal fade" id="logoutModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Confirm Logout</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">Are you sure you want to log out?</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <form method="post" action="{% url 'account_logout' %}">
                            {% csrf_token %}
                            {% if redirect_field_value %}
                                <input type="hidden"
                                       name="{{ redirect_field_name }}"
                                       value="{{ redirect_field_value }}" />
                            {% endif %}
                            <button type="submit" class="btn btn-danger">Yes, Logout</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</div>