{% extends 'base.html.twig' %}
{% block title %}Blog — Admin | TROPO{% endblock %}

{% block body %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <div>
            <a href="{{ path('app_admin_dashboard') }}" class="text-sm text-gray-500 hover:text-dark transition">&larr; Dashboard</a>
            <h1 class="text-3xl font-bold mt-1">Posty na blogu</h1>
        </div>
        <a href="{{ path('app_admin_blog_new') }}" class="px-5 py-2.5 bg-nova text-white font-semibold rounded-xl hover:bg-nova/90 transition text-sm">+ Nowy post</a>
    </div>

    {% for flash in app.flashes('success') %}
        <div class="mb-6 bg-echo/10 border border-echo/30 text-echo rounded-xl px-4 py-3 text-sm font-medium">{{ flash }}</div>
    {% endfor %}

    <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-gray-500 uppercase text-xs tracking-wider">
                <tr>
                    <th class="px-6 py-3 text-left">Tytuł</th>
                    <th class="px-6 py-3 text-left">Slug</th>
                    <th class="px-6 py-3 text-center">Status</th>
                    <th class="px-6 py-3 text-left">Data</th>
                    <th class="px-6 py-3 text-left">Edytował</th>
                    <th class="px-6 py-3 text-right">Akcje</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for post in posts %}
                <tr class="hover:bg-gray-50 transition">
                    <td class="px-6 py-4 font-medium text-dark">{{ post.title }}</td>
                    <td class="px-6 py-4 text-gray-500">{{ post.slug }}</td>
                    <td class="px-6 py-4 text-center">
                        {% if post.isPublished %}
                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-echo/10 text-echo">Opublikowany</span>
                        {% else %}
                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-500">Szkic</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 text-gray-500">{{ post.createdAt|date('d.m.Y') }}</td>
                    <td class="px-6 py-4 text-gray-400 text-xs">{{ post.updatedBy ?? '—' }}</td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex gap-2 justify-end">
                            <a href="{{ path('app_admin_blog_edit', {id: post.id}) }}" class="px-3 py-1.5 bg-scout/10 text-scout text-xs font-semibold rounded-lg hover:bg-scout/20 transition">Edytuj</a>
                            <form method="post" action="{{ path('app_admin_blog_toggle_publish', {id: post.id}) }}">
                                <input type="hidden" name="_token" value="{{ csrf_token('admin_action') }}">
                                <button type="submit" class="px-3 py-1.5 bg-blitz/10 text-blitz text-xs font-semibold rounded-lg hover:bg-blitz/20 transition">
                                    {{ post.isPublished ? 'Ukryj' : 'Publikuj' }}
                                </button>
                            </form>
                            <form method="post" action="{{ path('app_admin_blog_delete', {id: post.id}) }}" data-controller="confirm" data-confirm-message-value="Na pewno usunąć?" data-action="submit->confirm#submit">
                                <input type="hidden" name="_token" value="{{ csrf_token('admin_action') }}">
                                <button type="submit" class="px-3 py-1.5 bg-red-50 text-red-600 text-xs font-semibold rounded-lg hover:bg-red-100 transition">Usuń</button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="px-6 py-12 text-center text-gray-400">Brak postów. Utwórz pierwszy!</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}