<div id="menu" class="h-full w-full bg-gray-600 text-white">
    <nav>
        <ul>
            <li class="{{ app.request.get('_route') starts with 'app_manga' ? 'border-l-4 border-green-600' : '' }}">
                <a href="{{ path('app_legacy') }}" class="block pl-4 py-2 flex items-center {{ app.request.get('_route') starts with 'app_manga' ? 'text-green-600 bg-gray-800' : 'hover:bg-gray-700' }}">
                    <i class="fas fa-book mr-2"></i>
                    <span>Mangas</span>
                </a>
                {% if app.request.get('_route') starts with 'app_manga' %}
                    <ul class="ml-8 mt-2 space-y-4">
                        <li><a href="{{ path('app_manga_search') }}" class="hover:text-green-600">Ajouter un nouveau</a></li>
                        <li><a href="{{ path('app_manga_import') }}" class="hover:text-green-600">Import bibliothèque</a></li>
                        <li><a href="#" class="hover:text-green-600">Découvrir</a></li>
                    </ul>
                {% endif %}
            </li>
            <li class="{{ app.request.get('_route') == 'app_convert' ? 'border-l-4 border-green-600' : '' }}">
                <a href="{{ path('app_convert') }}" class="block pl-4 py-2 flex items-center {{ app.request.get('_route') == 'app_convert' ? 'text-green-600 bg-gray-800' : 'hover:bg-gray-700' }}">
                    <i class="fas fa-exchange-alt mr-2"></i>
                    <span>Convertir CBR en CBZ</span>
                </a>
            </li>
            <li class="{{ app.request.get('_route') == 'app_calendar' ? 'border-l-4 border-green-600' : '' }}">
                <a href="{{ path('app_calendar') }}" class="block pl-4 py-2 flex items-center {{ app.request.get('_route') == 'app_calendar' ? 'text-green-600 bg-gray-800' : 'hover:bg-gray-700' }}">
                    <i class="fas fa-calendar-alt mr-2"></i>
                    <span>Calendrier</span>
                </a>
            </li>
            <li class="{{ app.request.get('_route') == 'app_activity' ? 'border-l-4 border-green-600' : '' }}">
                <a href="{{ path('app_activity') }}" class="block pl-4 py-2 flex items-center justify-between {{ app.request.get('_route') == 'app_activity' ? 'text-green-600 bg-gray-800' : 'hover:bg-gray-700' }}">
                    <div class="flex items-center">
                        <i class="fas fa-clock mr-2"></i>
                        <span>Activité</span>
                    </div>
                    <span data-controller="activity" data-activity-target="activity" class="bg-green-500 rounded px-2 mr-2 hover:text-white hidden"></span>
                </a>
            </li>
            <li class="{{ app.request.get('_route') starts with 'app_settings' ? 'border-l-4 border-green-600' : '' }}">
                <a href="{{ path('app_settings') }}" class="block pl-4 py-2 flex items-center {{ app.request.get('_route') starts with 'app_settings' ? 'text-green-600 bg-gray-800' : 'hover:bg-gray-700' }}">
                    <i class="fas fa-cog mr-2"></i>
                    <span>Paramètres</span>
                </a>
                {% if app.request.get('_route') starts with 'app_settings' %}
                    <ul class="ml-8 mt-2 space-y-4">
                        <li><a href="{{ path('app_settings_general') }}" class="hover:text-green-600">Général</a></li>
                        <li><a href="{{ path('app_settings_folders') }}" class="hover:text-green-600">Dossiers</a></li>
                        <li><a href="{{ path('app_settings_scrappers_list') }}" class="hover:text-green-600">Scrappers</a></li>
                        <li><a href="{{ path('app_settings_ui') }}" class="hover:text-green-600">UI</a></li>
                    </ul>
                {% endif %}
            </li>
            <li class="{{ app.request.get('_route') starts with 'app_system' ? 'border-l-4 border-green-600' : '' }}">
                <a href="{{ path('app_system') }}" class="block pl-4 py-2 flex items-center {{ app.request.get('_route') starts with 'app_system' ? 'text-green-600 bg-gray-800' : 'hover:bg-gray-700' }}">
                    <i class="fas fa-desktop mr-2"></i>
                    <span>Système</span>
                </a>
                {% if app.request.get('_route') starts with 'app_system' %}
                    <ul class="ml-8 mt-2 space-y-4">
                        <li><a href="{{ path('app_system_status') }}" class="hover:text-green-600">Status</a></li>
                        <li><a href="{{ path('app_system_backup') }}" class="hover:text-green-600">Backup</a></li>
                        <li><a href="{{ path('app_system_logs') }}" class="hover:text-green-600">Logs</a></li>
                        <li><a href="{{ path('app_system_updates') }}" class="hover:text-green-600">Updates</a></li>
                    </ul>
                {% endif %}
            </li>
        </ul>
    </nav>
</div>
