<nav id="navbar" {{ attributes }} {{ stimulus_controller('navbar') }} {{ stimulus_action('navbar', 'setActive')}} class="flex h-screen flex-col justify-between bg-cyan-950 animate__animated animate__animateFaster">
    <div class="px-4 py-4 flex flex-col gap-12">
        <h1 class="text-3xl mt-12 md:mt-0 font-extrabold text-orange-500 mb-3"><a href="{{ path('app_index') }}">Torsearch</a></h1>
        <ul class="nav-list space-y-1">
            <li>
                <a href="{{ path('app_index') }}"
                   class="block rounded-lg
                         bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60
                         px-4 py-2 text-sm font-medium text-gray-50">
                    Dashboard
                </a>
            </li>

            <li>
                <a href="{{ path('app_downloads') }}"
                   class="block rounded-lg
                         bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60
                         px-4 py-2 text-sm font-medium text-gray-50">
                    Downloads
                </a>
            </li>

            <li>
                <a href="{{ path('app.monitors') }}"
                   class="block rounded-lg
                         bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60
                         px-4 py-2 text-sm font-medium text-gray-50">
                    Monitors
                </a>
            </li>

            <li>
                <a href="{{ path('app.discover') }}"
                   class="block rounded-lg
                         bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60
                         px-4 py-2 text-sm font-medium text-gray-50">
                    Discover
                </a>
            </li>

            <li>
                <a href="{{ path('app_user_preferences') }}"
                   class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700">
                    Preferences
                </a>
            </li>
        </ul>
    </div>

    <div class="sticky inset-x-0 bottom-0 border-t border-b border-orange-500 bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 flex flex-col">
        <a href="#" class="nav-foot flex items-center gap-2 pt-4 px-4">
            <span class="rounded-full p-2 border-orange-500 border-2">
                <twig:ux:icon name="ri:user-line" width="30" class="text-gray-50"/>
            </span>

            <div class="flex flex-col text-white">
                <p class="text-xs">
                    {% if app.user.name %}
                    <strong class="block font-medium text-white">{{ app.user.name }}</strong>
                    {% endif %}

                    <span class="text-white"> {{ app.user.email }} </span>
                </p>
            </div>
        </a>
        <p class="px-4 pt-1 inline-flex justify-center">
            <small class="text-white text-xs">{{ app_version() }}</small>
        </p>
    </div>
</nav>
