{% load static %}

<div class="space-y-6">
    <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
        <div class="p-6 transition-shadow duration-200 bg-white border rounded-lg shadow-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50 hover:shadow-xl">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Pending Reviews</h3>
                <span class="px-3 py-1 text-sm font-medium text-yellow-800 bg-yellow-100 rounded-full dark:bg-yellow-900/50 dark:text-yellow-200">
                    {{ submissions|length }}
                </span>
            </div>
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Submissions awaiting moderation</p>
        </div>
        
        <div class="p-6 transition-shadow duration-200 bg-white border rounded-lg shadow-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50 hover:shadow-xl">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Recent Activity</h3>
                <i class="text-gray-400 fas fa-history"></i>
            </div>
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Latest moderation actions</p>
        </div>
        
        <div class="p-6 transition-shadow duration-200 bg-white border rounded-lg shadow-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50 hover:shadow-xl">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Quick Actions</h3>
                <i class="text-gray-400 fas fa-bolt"></i>
            </div>
            <div class="mt-4 space-y-2">
                <a href="{% url 'moderation:edit_submissions' %}" 
                   class="block px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
                   hx-get="{% url 'moderation:edit_submissions' %}"
                   hx-target="#submissions-content"
                   hx-push-url="true">
                    <i class="mr-2 fas fa-edit"></i> Review Edit Submissions
                </a>
                <a href="{% url 'moderation:photo_submissions' %}"
                   class="block px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
                   hx-get="{% url 'moderation:photo_submissions' %}"
                   hx-target="#submissions-content"
                   hx-push-url="true">
                    <i class="mr-2 fas fa-image"></i> Review Photo Submissions
                </a>
            </div>
        </div>
    </div>

    <div class="bg-white border rounded-lg shadow-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
        <div class="p-6">
            <h3 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">Recent Submissions</h3>
            <div class="space-y-4">
                {% for submission in submissions %}
                    {% include "moderation/partials/submission_list.html" %}
                {% empty %}
                    <div class="py-8 text-center">
                        <i class="mb-3 text-4xl text-green-500 fas fa-check-circle"></i>
                        <p class="text-gray-600 dark:text-gray-400">No pending submissions</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>