{% extends 'base/base.html' %}
{% load static %}

{% block title %}Moderation - ThrillWiki{% endblock %}

{% block content %}
<div class="container px-4 mx-auto">
    <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
        <h1 class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">Moderation Queue</h1>

        <!-- Tabs -->
        <div class="mb-6 border-b border-gray-200 dark:border-gray-700">
            <ul class="flex flex-wrap -mb-px" role="tablist">
                <li class="mr-2">
                    <button class="tab-button {% if active_tab == 'new' %}active{% endif %}" 
                            data-tab="new"
                            hx-get="{% url 'moderation:edit_submissions' %}?tab=new"
                            hx-target="#submissions-content"
                            hx-push-url="true">
                        New
                        {% if new_count %}<span class="ml-2 badge">{{ new_count }}</span>{% endif %}
                    </button>
                </li>
                <li class="mr-2">
                    <button class="tab-button {% if active_tab == 'approved' %}active{% endif %}"
                            data-tab="approved"
                            hx-get="{% url 'moderation:edit_submissions' %}?tab=approved"
                            hx-target="#submissions-content"
                            hx-push-url="true">
                        Approved
                    </button>
                </li>
                <li class="mr-2">
                    <button class="tab-button {% if active_tab == 'rejected' %}active{% endif %}"
                            data-tab="rejected"
                            hx-get="{% url 'moderation:edit_submissions' %}?tab=rejected"
                            hx-target="#submissions-content"
                            hx-push-url="true">
                        Rejected
                    </button>
                </li>
                {% if user.role == 'ADMIN' or user.role == 'SUPERUSER' %}
                <li>
                    <button class="tab-button {% if active_tab == 'escalated' %}active{% endif %}"
                            data-tab="escalated"
                            hx-get="{% url 'moderation:edit_submissions' %}?tab=escalated"
                            hx-target="#submissions-content"
                            hx-push-url="true">
                        Escalated
                        {% if escalated_count %}<span class="ml-2 badge">{{ escalated_count }}</span>{% endif %}
                    </button>
                </li>
                {% endif %}
            </ul>
        </div>

        <!-- Tab Content -->
        <div id="submissions-content">
            {% include 'moderation/partials/submission_list.html' %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.tab-button {
    @apply inline-flex items-center px-4 py-2 text-sm font-medium border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300;
}

.tab-button.active {
    @apply text-blue-600 border-blue-600 dark:text-blue-500 dark:border-blue-500;
}

.badge {
    @apply px-2 py-1 text-xs font-semibold text-white bg-blue-500 rounded-full;
}

.submission-card {
    @apply p-4 mb-4 bg-white border rounded-lg shadow dark:bg-gray-700 dark:border-gray-600;
}

.submission-header {
    @apply flex items-center justify-between mb-2;
}

.submission-title {
    @apply text-lg font-semibold text-gray-900 dark:text-white;
}

.submission-meta {
    @apply text-sm text-gray-500 dark:text-gray-400;
}

.submission-changes {
    @apply mt-4 space-y-2;
}

.change-item {
    @apply flex items-start;
}

.change-label {
    @apply w-32 font-medium text-gray-700 dark:text-gray-300;
}

.change-value {
    @apply flex-1 text-gray-900 dark:text-white;
}

.action-buttons {
    @apply flex gap-2 mt-4;
}

.btn-approve {
    @apply px-4 py-2 text-white bg-green-500 rounded-lg hover:bg-green-600;
}

.btn-reject {
    @apply px-4 py-2 text-white bg-red-500 rounded-lg hover:bg-red-600;
}

.btn-escalate {
    @apply px-4 py-2 text-white bg-yellow-500 rounded-lg hover:bg-yellow-600;
}
</style>
{% endblock %}