<!DOCTYPE html>
<html lang="tr" class="h-full bg-gray-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Yönetim Paneli{% endblock %} | Haber CMS</title>
    {% block stylesheets %}
        {{ encore_entry_link_tags('admin') }}
    {% endblock %}
</head>
<body class="h-full" x-data="{ sidebarOpen: true, mobileMenuOpen: false }">
    <div class="min-h-full">
        {# Mobile menu overlay #}
        <div x-show="mobileMenuOpen" x-cloak class="relative z-50 lg:hidden" role="dialog" aria-modal="true">
            <div x-show="mobileMenuOpen" class="fixed inset-0 bg-gray-900/80" @click="mobileMenuOpen = false"></div>
            <div class="fixed inset-0 flex">
                <div x-show="mobileMenuOpen" class="relative mr-16 flex w-full max-w-xs flex-1">
                    {% include 'admin/_sidebar.html.twig' %}
                </div>
            </div>
        </div>

        {# Desktop sidebar #}
        <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:flex-col transition-all duration-300"
             :class="sidebarOpen ? 'lg:w-64' : 'lg:w-20'">
            {% include 'admin/_sidebar.html.twig' %}
        </div>

        {# Main content #}
        <div class="transition-all duration-300" :class="sidebarOpen ? 'lg:pl-64' : 'lg:pl-20'">
            {# Top bar #}
            <div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
                <button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden" @click="mobileMenuOpen = true">
                    <i class="fas fa-bars text-lg"></i>
                </button>

                <button type="button" class="hidden lg:block -m-2.5 p-2.5 text-gray-500 hover:text-gray-700" @click="sidebarOpen = !sidebarOpen">
                    <i class="fas fa-bars text-lg"></i>
                </button>

                <div class="h-6 w-px bg-gray-200 lg:hidden" aria-hidden="true"></div>

                <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
                    <div class="flex flex-1 items-center">
                        <h1 class="text-lg font-semibold text-gray-900">{% block page_title %}Dashboard{% endblock %}</h1>
                    </div>
                    <div class="flex items-center gap-x-4 lg:gap-x-6">
                        {# Notifications #}
                        <button type="button" class="relative -m-2.5 p-2.5 text-gray-400 hover:text-gray-500">
                            <i class="fas fa-bell text-lg"></i>
                        </button>

                        <div class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-200" aria-hidden="true"></div>

                        {# User dropdown #}
                        <div x-data="{ open: false }" class="relative">
                            <button @click="open = !open" class="-m-1.5 flex items-center p-1.5">
                                <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-primary-600">
                                    <span class="text-sm font-medium text-white">
                                        {{ app.user ? app.user.fullName|default(app.user.email)|first|upper : 'A' }}
                                    </span>
                                </span>
                                <span class="hidden lg:flex lg:items-center">
                                    <span class="ml-3 text-sm font-semibold text-gray-900">
                                        {{ app.user ? app.user.fullName|default(app.user.email) : 'Admin' }}
                                    </span>
                                    <i class="fas fa-chevron-down ml-2 text-xs text-gray-400"></i>
                                </span>
                            </button>

                            <div x-show="open" @click.away="open = false" x-cloak
                                 class="absolute right-0 z-10 mt-2.5 w-48 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5">
                                <a href="#" class="block px-3 py-1 text-sm text-gray-900 hover:bg-gray-50">
                                    <i class="fas fa-user mr-2 text-gray-400"></i> Profilim
                                </a>
                                <a href="{{ path('admin_logout') }}" class="block px-3 py-1 text-sm text-gray-900 hover:bg-gray-50">
                                    <i class="fas fa-sign-out-alt mr-2 text-gray-400"></i> Çıkış Yap
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# Flash messages #}
            {% for type, messages in app.flashes %}
                {% for message in messages %}
                    <div class="mx-4 mt-4 sm:mx-6 lg:mx-8"
                         x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)">
                        <div class="rounded-md p-4 {{ type == 'success' ? 'bg-green-50' : (type == 'error' ? 'bg-red-50' : 'bg-yellow-50') }}">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fas {{ type == 'success' ? 'fa-check-circle text-green-400' : (type == 'error' ? 'fa-times-circle text-red-400' : 'fa-exclamation-circle text-yellow-400') }}"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm font-medium {{ type == 'success' ? 'text-green-800' : (type == 'error' ? 'text-red-800' : 'text-yellow-800') }}">
                                        {{ message }}
                                    </p>
                                </div>
                                <div class="ml-auto pl-3">
                                    <button @click="show = false" class="-mx-1.5 -my-1.5 inline-flex rounded-md p-1.5 {{ type == 'success' ? 'text-green-500 hover:bg-green-100' : (type == 'error' ? 'text-red-500 hover:bg-red-100' : 'text-yellow-500 hover:bg-yellow-100') }}">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% endfor %}

            {# License Warning Banner #}
            {% set licenseWarnings = license_warnings() %}
            {% if licenseWarnings|length > 0 %}
                <div class="mx-4 mt-4 sm:mx-6 lg:mx-8">
                    <div class="rounded-md bg-amber-50 border border-amber-200 p-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-exclamation-triangle text-amber-400"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-amber-800">Lisans Uyarısı</h3>
                                <ul class="mt-1 text-sm text-amber-700 list-disc list-inside">
                                    {% for warning in licenseWarnings %}
                                        <li>{{ warning }}</li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            {# Page content #}
            <main class="py-6">
                <div class="px-4 sm:px-6 lg:px-8">
                    {% block body %}{% endblock %}
                </div>
            </main>
        </div>
    </div>

    {% block javascripts %}
        {{ encore_entry_script_tags('admin') }}
        <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    {% endblock %}
</body>
</html>
