{% load i18n static %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'adminita/adminita-tailwind.css' %}">
    <link rel="stylesheet" href="{% static 'adminita/action-fix.css' %}">
    <script src="{% static 'adminita/adminita-tailwind.js' %}" defer></script>
    <link rel="stylesheet" href="{% static 'admin/css/widgets.css' %}">
  </head>
    {% block dark_mode_vars %}
    <script>
        // Dark mode handling
        if (localStorage.getItem('darkMode') === 'true' || 
            (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        }
    </script>
    {% endblock %}
    
    {% block extrastyle %}{% endblock %}
    {% block extra_head %}{% endblock %}
</head>

<body class="min-h-full bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100">
    <div class="flex min-h-screen">
        
        <!-- Sidebar -->
        {% block sidebar %}
        <aside id="sidebar" class="w-64 bg-white dark:bg-gray-800 shadow-sm border-r border-gray-200 dark:border-gray-700 fixed h-full z-40 transform md:transform-none transition-transform duration-300 ease-in-out -translate-x-full md:translate-x-0">
            
            {% block branding %}
            <div class="h-16 px-6 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
                <a href="{% url 'admin:index' %}" class="text-md font-semibold text-gray-900 dark:text-white hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
                    {{ site_header|default:_('Django administration') }}
                </a>
            </div>
            {% endblock %}
            
            {% block nav-global %}{% endblock %}
            
            <nav class="px-4 py-6 overflow-y-auto h-[calc(100vh-4rem)]">
                {% block sidebar_content %}
                {% if available_apps %}
                    <div class="space-y-6">
                        {% for app in available_apps %}
                        <div>
                            <h3 class="px-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
                                {{ app.name }}
                            </h3>
                            <div class="space-y-1">
                                {% for model in app.models %}
                                <a href="{{ model.admin_url }}" 
                                   class="flex items-center px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors {% if request.path == model.admin_url %}bg-gray-100 dark:bg-gray-700 text-primary-600 dark:text-primary-400{% else %}text-gray-700 dark:text-gray-300{% endif %}">
                                    <span>{{ model.name }}</span>
                                </a>
                                {% endfor %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% endif %}
                {% endblock %}
            </nav>
        </aside>
        
        <!-- Overlay for mobile -->
        <div id="sidebar-overlay" class="fixed inset-0 bg-black/50 z-30 hidden md:hidden"></div>
        {% endblock %}
        
        <!-- Main Content  -->
        <div class="flex-1 flex flex-col md:ml-64 transition-all duration-300" id="main-content">
            
            <!-- Top Bar -->
            <div class="min-h-[8rem]">
                {% block header %}
                <header class="h-16 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between px-6 sticky top-0 z-20">
                    
                    <div class="flex items-center space-x-4">
                        <!-- Mobile menu button - hidden on desktop -->
                        <button id="sidebar-toggle" type="button" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors md:hidden">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                            </svg>
                        </button>
                        
                        {% block page_title %}
                        <h1 class="text-xl font-semibold text-gray-900 dark:text-white">
                            {% block content_title %}{% endblock %}
                        </h1>
                        {% endblock %}
                    </div>
                    
                    <div class="flex items-center space-x-4">
                        <!-- Dark mode toggle -->
                        <button id="dark-mode-toggle" type="button" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" title="Toggle dark mode">
                            <svg class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/>
                            </svg>
                            <svg class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
                            </svg>
                        </button>
                        
                        {% block usertools %}
                        {% if user.is_active and user.is_staff %}
                        <div class="flex items-center space-x-3 text-sm">
                            <span class="text-gray-700 dark:text-gray-300 hidden sm:inline">
                                {% trans 'Welcome,' %} <strong>{% firstof user.get_short_name user.first_name "back" %}</strong>
                            </span>
                            {% if site_url %}
                            <a href="{{ site_url }}" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors hidden sm:inline">
                                {% trans 'View site' %}
                            </a>
                            <span class="text-gray-400 hidden sm:inline">/</span>
                            {% endif %}
                            <a href="{% url 'admin:password_change' %}" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors hidden sm:inline">
                                {% trans 'Change password' %}
                            </a>
                            <span class="text-gray-400 hidden sm:inline">/</span>
                            <form method="post" action="{% url 'admin:logout' %}" style="display: inline;">
                                {% csrf_token %}
                                <button type="submit" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors bg-transparent border-0 cursor-pointer">
                                    {% trans 'Log out' %}
                                </button>
                            </form>
                        </div>
                        {% endif %}
                        {% endblock %}
                        </div>
                    </header>
                {% endblock %}
            </div>
            <!-- Main Content Area with Max Width Container -->
            <main class="flex-1 p-6  pt-16">
                <!-- Container with max-width to prevent super-wide content -->
                <div class="max-w-7xl mx-auto">
                    {% block messages %}
                        {% if messages %}
                        <div class="mb-6 space-y-2">
                            {% for message in messages %}
                            <div class="rounded-lg p-4 {% if message.tags %}{{ message.tags }}{% endif %} 
                                {% if 'error' in message.tags %}bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200
                                {% elif 'warning' in message.tags %}bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-200
                                {% elif 'success' in message.tags %}bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200
                                {% else %}bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200{% endif %}">
                                {{ message|capfirst }}
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}
                    {% endblock messages %}
                    
                    {% block content %}
                    {% endblock %}
                    
                    {% block sidebar_right %}{% endblock %}
                </div>
            </main>
            
            {% block footer %}
            <footer class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
                <div class="text-sm text-gray-600 dark:text-gray-400 text-center max-w-7xl mx-auto">
                    {% block footer_content %}
                    Powered by <a href="https://adminita.todiane.com" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank">Adminita</a>
                    {% endblock %}
                </div>
            </footer>
            {% endblock %}
        </div>
    </div>
    
    
{% block extrajs %}
  {{ block.super }}
  <script src="{% url 'admin:jsi18n' %}"></script>
  <script src="{% static 'admin/js/vendor/jquery/jquery.min.js' %}"></script>
  <script src="{% static 'admin/js/jquery.init.js' %}"></script>
  <script src="{% static 'admin/js/core.js' %}"></script>
  <script src="{% static 'admin/js/admin/RelatedObjectLookups.js' %}"></script>
{% endblock %}
    
</body>
</html>