{% extends 'admin/base.html.twig' %}

{% block title %}Menuler{% endblock %}
{% block page_title %}Menu Yonetimi{% endblock %}

{% block body %}
    {# Actions bar #}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 gap-4">
        <div class="flex items-center gap-3">
            <a href="{{ path('admin_menu_create') }}" class="btn-primary">
                <i class="fas fa-plus mr-2"></i> Yeni Menu
            </a>
        </div>
    </div>

    {# Menus table #}
    <div class="card overflow-hidden">
        <div class="overflow-x-auto">
            <table class="table">
                <thead>
                    <tr>
                        <th>Ad</th>
                        <th>Konum</th>
                        <th>Oge Sayisi</th>
                        <th>Durum</th>
                        <th class="w-24">Islem</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 bg-white">
                    {% for menu in menus %}
                        <tr>
                            <td>
                                <a href="{{ path('admin_menu_edit', {id: menu.id}) }}"
                                   class="font-medium text-gray-900 hover:text-primary-600">
                                    {{ menu.name }}
                                </a>
                            </td>
                            <td>
                                {% if menu.location == 'header' %}
                                    <span class="inline-flex items-center rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">
                                        <i class="fas fa-arrow-up mr-1"></i> Header
                                    </span>
                                {% elseif menu.location == 'footer' %}
                                    <span class="inline-flex items-center rounded-full bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700">
                                        <i class="fas fa-arrow-down mr-1"></i> Footer
                                    </span>
                                {% elseif menu.location == 'sidebar' %}
                                    <span class="inline-flex items-center rounded-full bg-purple-50 px-2 py-0.5 text-xs font-medium text-purple-700">
                                        <i class="fas fa-columns mr-1"></i> Sidebar
                                    </span>
                                {% elseif menu.location == 'mobile' %}
                                    <span class="inline-flex items-center rounded-full bg-orange-50 px-2 py-0.5 text-xs font-medium text-orange-700">
                                        <i class="fas fa-mobile-alt mr-1"></i> Mobil
                                    </span>
                                {% endif %}
                            </td>
                            <td class="text-gray-500">
                                {{ menu.items|length }}
                            </td>
                            <td>
                                {% if menu.isActive %}
                                    <span class="badge-success">Aktif</span>
                                {% else %}
                                    <span class="badge-gray">Pasif</span>
                                {% endif %}
                            </td>
                            <td>
                                <div class="flex items-center gap-2">
                                    <a href="{{ path('admin_menu_edit', {id: menu.id}) }}"
                                       class="text-primary-600 hover:text-primary-900" title="Duzenle">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form method="post" action="{{ path('admin_menu_delete', {id: menu.id}) }}"
                                          onsubmit="return confirm('Bu menuyu ve tum ogelerini silmek istediginize emin misiniz?')">
                                        <input type="hidden" name="_token" value="{{ csrf_token('delete_menu_' ~ menu.id) }}">
                                        <button type="submit" class="text-red-600 hover:text-red-900" title="Sil">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="5" class="text-center text-gray-500 py-12">
                                <i class="fas fa-bars text-4xl text-gray-300 mb-3 block"></i>
                                Henuz menu eklenmemis.
                                <br>
                                <a href="{{ path('admin_menu_create') }}" class="text-primary-600 hover:text-primary-500 mt-2 inline-block">
                                    Ilk menuyu ekleyin
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}
