{% load static %}

<!-- Sidebar component with DaisyUI styling -->
<aside id="sidebar" class="sidebar-collapsed bg-gray-200 min-h-screen transition-all duration-300">
    <div class="p-3">
        <button id="menu-button" class="bg-slate-400 text-white rounded-full p-3 focus:outline-none">
            <svg class="bi" width="16" height="16" role="img" aria-label="Menu">
                <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#menu" />
            </svg>
        </button>
    </div>

    <nav class="mt-4">
        <a href="/" class="sidebar-item flex items-center p-4 hover:bg-gray-500">
            <svg class="bi" width="32" height="32" role="img" aria-label="Home">
                <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#home" />
            </svg>
            <span class="ml-4">Home</span>
        </a>
    </nav>

    <nav class="mt-4">
        <a href="/dashboard" class="sidebar-item flex items-center p-4 hover:bg-gray-500">
            <svg class="bi" width="32" height="32" role="img" aria-label="Dashboard">
                <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#dashboard" />
            </svg>
            <span class="ml-4">Dashboard</span>
        </a>
    </nav>

    <nav class="mt-4">
        <a href="/apps/" class="sidebar-item flex items-center p-4 hover:bg-gray-500">
            <svg class="bi" width="32" height="32" role="img" aria-label="Apps">
                <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#apps" />
            </svg>
            <span class="ml-4">Apps</span>
        </a>
    </nav>

    <nav class="mt-4">
        <a href="{{ path_map.projects }}" class="sidebar-item flex items-center p-4 hover:bg-gray-500">
            <svg class="bi" width="32" height="32" role="img" aria-label="Projects">
                <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#projects" />
            </svg>
            <span class="ml-4">Projects</span>
        </a>
    </nav>

    <nav class="mt-4">
        <a href="{{ path_map.processes }}" class="sidebar-item flex items-center p-4 hover:bg-gray-500">
            <svg class="bi" width="32" height="32" role="img" aria-label="Processes">
                <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#processes" />
            </svg>
            <span class="ml-4">Processes</span>
        </a>
    </nav>

    <nav class="mt-4">
        <a href="{{ path_map.data }}" class="sidebar-item flex items-center p-4 hover:bg-gray-500">
            <svg class="bi" width="32" height="32" role="img" aria-label="Data">
                <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#data" />
            </svg>
            <span class="ml-4">Data</span>
        </a>
    </nav>

    <nav class="mt-4">
        <a href="{{ path_map.devices }}" class="sidebar-item flex items-center p-4 hover:bg-amber-500">
            <svg class="bi" width="32" height="32" role="img" aria-label="Devices">
                <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#devices" />
            </svg>
            <span class="ml-4">Devices</span>
        </a>
    </nav>

    <nav class="mt-4">
        <a href="{{ path_map.parts }}" class="sidebar-item flex items-center p-4 hover:bg-gray-500">
            <svg class="bi" width="32" height="32" role="img" aria-label="Parts">
                <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#parts" />
            </svg>
            <span class="ml-4">Parts</span>
        </a>
    </nav>

    <nav class="mt-4">
        <a href="{{ path_map.labware }}" class="sidebar-item flex items-center p-4 hover:bg-gray-500">
            <svg class="bi" width="32" height="32" role="img" aria-label="Labware">
                <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#labware" />
            </svg>
            <span class="ml-4">Labware</span>
        </a>
    </nav>

    <nav class="mt-4">
        <a href="{{ path_map.substances }}" class="sidebar-item flex items-center p-4 hover:bg-teal-500">
            <svg class="bi" width="32" height="32" role="img" aria-label="Substances">
                <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#substances" />
            </svg>
            <span class="ml-4">Substances</span>
        </a>
    </nav>

    <nav class="mt-4">
        <a href="{{ path_map.organisms }}" class="sidebar-item flex items-center p-4 hover:bg-green-500">
            <svg class="bi" width="32" height="32" role="img" aria-label="Organisms">
                <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#organisms" />
            </svg>
            <span class="ml-4">Organisms</span>
        </a>
    </nav>

    {% if path_map.samples %}
    <nav class="mt-4">
        <a href="{{ path_map.samples }}" class="sidebar-item flex items-center p-4 hover:bg-green-500">
            <svg class="bi" width="32" height="32" role="img" aria-label="Samples">
                <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#samples" />
            </svg>
            <span class="ml-4">Samples</span>
        </a>
    </nav>
    {% endif %}

    <nav class="mt-4">
        <a href="{{ path_map.people }}" class="sidebar-item flex items-center p-4 hover:bg-gray-500">
            <svg class="bi" width="32" height="32" role="img" aria-label="People">
                <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#people" />
            </svg>
            <span class="ml-4">People</span>
        </a>
    </nav>

    <nav class="hidden mt-4">
        <a class="bg-opacity-30 text-blue-600 flex items-center justify-between py-1.5 px-4 rounded cursor-pointer">
            <span class="flex items-center space-x-2">
                <svg class="bi" width="16" height="16" role="img" aria-label="Messages">
                    <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#bell" />
                </svg>
                <span>Messages</span>
            </span>
            <span class="bg-sky-500 text-gray-100 font-bold px-2 py-0.5 text-xs rounded-lg">3</span>
        </a>
    </nav>

    <nav class="hidden mt-4">
        <a class="bg-gray-500 bg-opacity-30 text-blue-600 flex items-center justify-between py-1.5 px-4 rounded cursor-pointer">
            <span class="flex items-center space-x-2">
                <svg class="bi" width="16" height="16" role="img" aria-label="Inbox">
                    <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#chat-quote-fill" />
                </svg>
                <span>Inbox</span>
            </span>
            <span class="bg-sky-500 text-gray-100 font-bold px-2 py-0.5 text-xs rounded-lg">3</span>
        </a>
    </nav>

</aside>
