{% load static %}

<div class="space-y-6">
    <div class="p-6 bg-white border rounded-lg shadow-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Photo Submissions</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>

        <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
            {% for submission in submissions %}
                {% include "moderation/partials/photo_submission.html" %}
            {% empty %}
                <div class="py-8 text-center col-span-full">
                    <i class="mb-3 text-4xl text-gray-400 fas fa-camera"></i>
                    <p class="text-gray-600 dark:text-gray-400">No photo submissions found</p>
                </div>
            {% endfor %}
        </div>
    </div>
</div>