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

{% block body %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <div class="mb-8">
        <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">Komentarze</h1>
    </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="space-y-4">
        {% for comment in comments %}
        <div class="bg-white rounded-2xl border {{ comment.isApproved ? 'border-gray-200' : 'border-blitz/30 bg-blitz/5' }} p-6">
            <div class="flex items-start justify-between gap-4">
                <div class="flex-1">
                    <div class="flex items-center gap-3 mb-2">
                        <span class="font-semibold text-dark">{{ comment.authorName }}</span>
                        <span class="text-gray-400 text-sm">{{ comment.authorEmail }}</span>
                        <span class="text-gray-400 text-sm">{{ comment.createdAt|date('d.m.Y H:i') }}</span>
                        {% if comment.isApproved %}
                            <span class="inline-flex px-2 py-0.5 text-xs font-semibold rounded-full bg-echo/10 text-echo">Zatwierdzony</span>
                        {% else %}
                            <span class="inline-flex px-2 py-0.5 text-xs font-semibold rounded-full bg-blitz/10 text-blitz">Oczekuje</span>
                        {% endif %}
                    </div>
                    <p class="text-gray-600 text-sm mb-2">
                        Post: <a href="{{ path('app_blog_show', {slug: comment.blogPost.slug}) }}" class="text-scout hover:underline">{{ comment.blogPost.title }}</a>
                    </p>
                    <p class="text-dark">{{ comment.content }}</p>
                </div>
                <div class="flex gap-2 shrink-0">
                    {% if not comment.isApproved %}
                    <form method="post" action="{{ path('app_admin_comment_approve', {id: comment.id}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('admin_action') }}">
                        <button type="submit" class="px-3 py-1.5 bg-echo/10 text-echo text-xs font-semibold rounded-lg hover:bg-echo/20 transition">Zatwierdź</button>
                    </form>
                    {% endif %}
                    <form method="post" action="{{ path('app_admin_comment_delete', {id: comment.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>
            </div>
        </div>
        {% else %}
        <div class="bg-white rounded-2xl border border-gray-200 p-12 text-center text-gray-400">
            Brak komentarzy.
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}