{% load bloomerp %}
{% load cotton %}
{% load i18n %}
{% load static %}


<aside id="sidebar"
    class="fixed left-0 top-0 h-screen w-64 transform -translate-x-full transition-transform duration-300 ease-in-out z-[70] overflow-visible bg-base dark:bg-zinc-950"
    bloomerp-component="sidebar">
    <div class="px-4 pt-2 pb-6 flex flex-col h-full overflow-visible">
        <div class="flex items-center justify-between">
            <a hx-get="{% url "bloomerp_home_view" %}" hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true"
                class="flex items-center hover:cursor-pointer h-full overflow-hidden ">
                <span class="hidden md:block w-24 mb-1  overflow-hidden">
                    <img src="{% static 'bloomerp/img/bloomerp-background-trans.png' %}"
                        class="w-full origin-center">
                </span>
                <img src="{% static 'bloomerp/img/bloomerp-touch-icon.png' %}" class="md:hidden" width="30" height="30">
            </a>

            <c-ui.shortcut_tooltip shortcut="mod+shift+b" action="click" position="left" text="Toggle sidebar    ">
                <button id="sidebar-toggle" type="button"
                    class="hover:cursor-pointer flex h-10 w-10 items-center justify-center">
                    <c-icons.lines_horizontal size="24" />
                </button>
            </c-ui.shortcut_tooltip>
        </div>
        <!-- End Logo -->


        <!-- Logo -->


        <!-- Search bar -->
         <c-ui.shortcut_tooltip shortcut="mod+k" action="click" position="right">
            <div bloomerp-component="global-search-modal" class="mt-2">
                <button id="global-search-btn" type="button" aria-haspopup="dialog" aria-controls="global-search-modal"
                    class="flex items-center gap-2 bg-white border border-gray-200 text-gray-700 px-3 py-1.5 rounded-xl hover:cursor-pointer focus:outline-none w-full hover:bg-gray-200">
                    <i class="fa fa-magnifying-glass text-gray-500"></i>
                    <span class="text-sm text-gray-600">
                        {% blocktrans %}Search{% endblocktrans %}
                    </span>
                </button>
            </div>
        </c-ui.shortcut_tooltip>
        <!-- End search bar -->

        <!-- Inbox -->
         <c-ui.shortcut_tooltip shortcut="mod+i" action="click" position="right">
            <div class="mt-2">
                <button 
                    id="inbox-btn" 
                    type="button" 
                    aria-haspopup="dialog" 
                    aria-controls="global-search-modal"
                    class="flex items-center justify-between gap-2 bg-white border border-gray-200 text-gray-700 px-3 py-1.5 rounded-xl hover:cursor-pointer focus:outline-none w-full hover:bg-gray-200"
                    hx-get="{% url 'inbox' %}"
                    hx-target="#main-content"
                    hx-swap="innerHTML"
                    hx-push-url="true"
                    hx-animation
                    >
                    <div class="flex gap-2">
                        <i class="fa fa-inbox text-gray-500"></i>
                        <span class="text-sm text-gray-600">
                            {% blocktrans %}Inbox{% endblocktrans %}
                        </span>
                    </div>
                    
                    <div id="inbox-notification-count" class="text-sm text-primary font-bold px-1">
                        {% if notification_count > 0 %}
                            {{ notification_count }}
                        {% endif %}
                    </div>
                </button>
            </div>
        </c-ui.shortcut_tooltip>
        <!-- End Inbox -->


        <hr class="text-gray-300 my-4">

        
        <div class="h-full">
            <div class="flex justify-between">
                <span class="text-gray-500 text-sm px-2">
                    {% blocktrans %}Sidebar{% endblocktrans %}
                </span>
                <div>
                    <c-ui.dropdown.body
                        trigger_icon_class="fa-solid fa-ellipsis"
                        trigger_button_class="ml-auto p-1 text-xs rounded-md bg-gray-100 text-gray-500 hover:bg-gray-200 hover:text-gray-700 hover:cursor-pointer"
                        size="sm" 
                        direction="down"
                        >

                        <c-ui.dropdown.submenu 
                            text="Select Sidebar" 
                            icon="fa fa-bars" 
                            id="select-sidebar-btn"
                            width="w-80"
                            >
                            <div
                                hx-get="{% url 'components_select_preference' model='Sidebar' %}"
                                hx-trigger="click from:#select-sidebar-btn"
                                hx-target="this"
                                hx-swap="innerHTML"
                                class="min-w-48"
                            >
                                <div class="px-4 py-2 text-xs text-gray-500">Loading sidebars...</div>
                            </div>
                        </c-ui.dropdown.submenu>

                        {% can_manage_preference_object request.user sidebar as can_manage %}

                        {% if can_manage %}
                        <c-ui.dropdown.submenu
                            id="create-folder-btn" 
                            text="Create Folder" 
                            icon="fa fa-folder"
                        >
                            <div
                                id="sidebar-create-folder-panel"
                                hx-get="{% url 'components_workspaces_sidebar_create_folder' sidebar_id=sidebar.id %}"
                                hx-trigger="click from:#create-folder-btn"
                                hx-target="this"
                                hx-swap="innerHTML"
                                
                            >
                                Loading form...
                            </div>
                        </c-ui.dropdown.submenu>

                        <c-ui.dropdown.submenu 
                            text="Add Link"
                            icon="fa-solid fa-link"
                            id="add-link-btn"
                        >
                        <div
                                id="sidebar-add-link-panel"
                                hx-get="{% url 'components_workspaces_sidebar_create_link' sidebar_id=sidebar.id %}"
                                hx-trigger="click from:#add-link-btn"
                                hx-target="this"
                                hx-swap="innerHTML"
                                
                            >
                            Loading form...
                        </div>

                        </c-ui.dropdown.submenu>
                        {% endif %}
                    </c-ui.dropdown.body>

                </div>
            </div>

            <div class="min-h-0 flex-1 overflow-y-auto overflow-x-visible">
                {% include "components/sidebar/content.html" with sidebar=sidebar can_manage=can_manage %}
            </div>
        </div>
                

        <!-- Profile -->
        <div class="mt-auto pt-3">
            {% translate "Account Settings" as account_settings_label %}
            {% translate "Theme" as theme_label %}
            {% translate "Languages" as languages_label %}
            {% translate "Sign Out" as sign_out_label %}
            <nav class="ml-auto">
                <ul class="flex items-center space-x-4 mb-0">
                    <li class="relative pr-3">
                        <c-ui.dropdown.body
                            trigger_text="{% avatar object=request.user class_name='rounded-full w-8 h-8' size=32 %}<span class='hidden md:block ml-2 text-sm font-medium text-gray-700'>{{request.user.first_name}} {{request.user.last_name}}</span>"
                            position="left" size="md" direction="up" :icon="False">
                            <div class="px-4 py-3 border-b border-gray-200">
                                <h6 class="text-sm font-semibold text-primary-800">{{request.user.username}}</h6>
                            </div>

                            <c-ui.dropdown.item text="{{ account_settings_label }}" icon="bi bi-gear"
                                hx_get="{% url 'users_my_profile_overview' %}" hx_target="#main-content"
                                hx_swap="innerHTML" hx_push_url="true" />

                            <c-ui.dropdown.submenu text="{{ theme_label }}" icon="bi bi-circle-half" direction="left">
                                <c-app.theme_selector />
                            </c-ui.dropdown.submenu>
                            
                            {% get_current_language as current_language %}
                            {% get_bloomerp_languages as available_languages %}
                            {% get_language_info_list for available_languages as languages %}
                            <c-ui.dropdown.submenu text="{{ languages_label }}" icon="bi bi-translate" direction="right">
                                {% for language in languages %}
                                    <form action="{% url 'set_language' %}" method="post">
                                        {% csrf_token %}
                                        <input type="hidden" name="next" value="{{ request.get_full_path }}">
                                        <input type="hidden" name="language" value="{{ language.code }}">
                                        <button
                                            type="submit"
                                            class="flex w-full items-center justify-between px-4 py-2 text-left text-sm transition-colors duration-150 {% if language.code == current_language %}cursor-default bg-gray-100 font-semibold text-primary-800{% else %}text-gray-700 hover:cursor-pointer hover:bg-gray-100 hover:text-primary-800{% endif %}"
                                            {% if language.code == current_language %}disabled aria-current="true"{% endif %}
                                        >
                                            <span>{{ language.name_local|capfirst }}</span>
                                            {% if language.code == current_language %}
                                                <i class="fa-solid fa-check text-primary" aria-hidden="true"></i>
                                                <span class="sr-only">{% blocktrans %}Current language{% endblocktrans %}</span>
                                            {% endif %}
                                        </button>
                                    </form>
                                {% endfor %}
                            </c-ui.dropdown.submenu>

                            <c-ui.dropdown.item type="divider" />

                            <c-ui.dropdown.item text="{{ sign_out_label }}" icon="bi bi-box-arrow-right" danger=True
                                onclick="document.getElementById('logoutForm').submit()" />

                            <!-- Hidden logout form -->
                            <form id="logoutForm" action="{% url 'logout' %}" method="post" style="display: none;">
                                {% csrf_token %}
                            </form>
                        </c-ui.dropdown.body>
                    </li>
                </ul>
            </nav>
        </div>
        <!-- End Profile -->
    </div>
</aside>

<!-- Mobile overlay -->
<div id="sidebar-overlay" class="fixed inset-0 bg-gray-900/50 z-[50] lg:hidden hidden"></div>
</div>