{% load static %}
<div class="navbar bg-base-100">
    <div class="navbar-start">
        <div class="dropdown">
            <label tabindex="0"
                   for="service_list_drawer"
                   id="service_list_togglers"
                   class="btn btn-ghost lg:hidden">
                <i class="fa-solid fa-bars"></i>
            </label>
        </div>
        <div class="flex items-center gap-x-0 gap-x-3 ms-4 md:gap-x-5">
            <a href="/" class="hidden lg:block">
                <label for="service_list_drawer"
                       id="service_list_button"
                       aria-label="close sidebar"
                       class="flex items-center swap-rotate drawer-overlay swap">
                    <input type="checkbox" id="logo_single_service_list_toggler" />
                    <img src="{% static "img/logo_single.png" %}" class="h-10 swap-off">
                    <i class="absolute flex items-center justify-center fa fa-solid fa-x swap-on"></i>
                </label>
            </a>
            {% include 'core/base/topbar/team_selector/selector.html' %}
        </div>
    </div>
    <div class="z-50 hidden navbar-center lg:flex">
        <!-- Topbar Dropdown (LARGE ONLY) -->
        <ul class="px-1 menu menu-horizontal" hx-boost="true">
            {% block topbar_list_dashboard %}
                <li>
                    <a href="/dashboard/" hx-boost="true" hx-swap="innerHTML show:no-scroll">
                        <i class="fa fa-house"></i>
                        Dashboard
                    </a>
                </li>
            {% endblock topbar_list_dashboard %}
            {% block topbar_list %}
                {#            <li class="z-[50]">#}
                {#                <details>#}
                {#                    <summary>some dropdown</summary>#}
                {#                    <ul class="p-2">#}
                {#                        <li>#}
                {#                            <a>something dropdown</a>#}
                {#                        </li>#}
                {#                        <li>#}
                {#                            <a>something dropdown</a>#}
                {#                        </li>#}
                {#                    </ul>#}
                {#                </details>#}
                {#            </li>#}
                {#            {% if feature_enabled_receipts %}#}
                {#                <div class="divider divider-horizontal mx-1"></div>#}
                {#                <li>#}
                {#                    <a href="{% url "receipts dashboard" %}"#}
                {#                       hx-boost="true"#}
                {#                       hx-swap="innerHTML show:no-scroll">#}
                {#                        <i class="fa fa-receipt"></i>#}
                {#                        Receipts#}
                {#                    </a>#}
                {#                </li>#}
                {#            {% endif %}#}
                {#            {% if feature_enabled_invoices %}#}
                {#                <div class="divider divider-horizontal mx-1"></div>#}
                {#                <li>#}
                {#                <a href="{% url "finance:invoices:single:dashboard" %}"#}
                {#                   hx-boost="true"#}
                {#                   hx-swap="innerHTML show:no-scroll"><i class="fa fa-file-invoice"></i>#}
                {#                Invoices#}
                {#            </a>#}
                {#        </li>#}
                {#    {% endif %}#}
                {#    <div class="divider divider-horizontal mx-1"></div>#}
                {#    <li>#}
                {#        <a href="{% url 'clients:dashboard' %}"#}
                {#           hx-boost="true"#}
                {#           hx-swap="innerHTML show:no-scroll"><i class="fa fa-user"></i> Clients#}
                {#        </a>#}
                {#    </li>#}
                {#    {% if feature_enabled_monthly_reports %}#}
                {#        <div class="divider divider-horizontal mx-1"></div>#}
                {#        <li>#}
                {#            <a href="{% url "reports:dashboard" %}"#}
                {#               hx-boost="true"#}
                {#               hx-swap="innerHTML show:no-scroll">#}
                {#                <i class="fa fa-chart-line"></i>#}
                {#                Monthly Reports#}
                {#            </a>#}
                {#        </li>#}
                {#    {% endif %}#}
            {% endblock topbar_list %}
        </ul>
    </div>
    <div class="navbar-end">
        {% block navbar_end %}
            {# Right Icons #}
            {#        <div class="flex">#}
            {# Profile Picture  #}
            <details class="mr-3 dropdown dropdown-end">
                <summary class="btn btn-ghost"
                         hx-get="{% url "core:api:base:notifications get" %}"
                         hx-target='ul[data-notifications="container"]'
                         hx-swap="innerHTML"
                         hx-trigger="click">
                    <i class="fa-solid fa-bell"></i>
                    {% include "core/base/topbar/_notification_count.html" %}
                </summary>
                <ul class="border menu menu-sm dropdown-content border-primary"
                    data-notifications="container">
                    {% include "core/base/topbar/_notification_dropdown_items.html" with initial_load=True %}
                </ul>
            </details>
            <div class="dropdown dropdown-end">
                <label tabindex="0" class="btn btn-ghost btn-circle">
                    {% component "profile_picture" image_type="small" extra_classes="max-w-8 max-h-8 w-8 h-8 avatar-img-ring" url=request.user.user_profile.profile_picture_url %}
                </label>
                <ul tabindex="0"
                    class="border menu menu-sm dropdown-content border-primary">
                    {% include "core/base/topbar/+icon_dropdown.html" %}
                    {#            {% component "core:base:topbar:icon_dropdown" %}#}
                </ul>
            </div>
            {# End of Profile Picture #}
            {#        </div>#}
            {# End of Right Icons #}
        {% endblock navbar_end %}
    </div>
</div>
