{% load static %}

<div class="space-y-6 animate-pulse">
    <!-- Navigation Skeleton -->
    <div class="flex items-center justify-between p-4 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
        <div class="flex items-center space-x-4">
            {% for i in '1234'|make_list %}
            <div class="w-24 h-10 bg-gray-200 rounded-lg dark:bg-gray-700"></div>
            {% endfor %}
        </div>
        <div class="w-24 h-10 bg-gray-200 rounded-lg dark:bg-gray-700"></div>
    </div>

    <!-- Filter Section Skeleton -->
    <div class="p-6 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
        <div class="mb-6">
            <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                {% for i in '123'|make_list %}
                <div class="space-y-2">
                    <div class="w-24 h-4 bg-gray-200 rounded dark:bg-gray-700"></div>
                    <div class="w-full h-10 bg-gray-200 rounded-lg dark:bg-gray-700"></div>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Submissions Skeleton -->
        <div class="space-y-4">
            {% for i in '123'|make_list %}
            <div class="p-6 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
                <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
                    <!-- Left Column -->
                    <div class="space-y-4">
                        <div class="w-32 h-6 bg-gray-200 rounded dark:bg-gray-700"></div>
                        <div class="space-y-2">
                            {% for j in '1234'|make_list %}
                            <div class="flex items-center">
                                <div class="w-5 h-5 mr-2 bg-gray-200 rounded dark:bg-gray-700"></div>
                                <div class="w-32 h-4 bg-gray-200 rounded dark:bg-gray-700"></div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div class="md:col-span-2 space-y-4">
                        <!-- Content Details -->
                        <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                            {% for j in '1234'|make_list %}
                            <div class="p-4 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
                                <div class="w-24 h-4 mb-2 bg-gray-200 rounded dark:bg-gray-700"></div>
                                <div class="w-full h-4 bg-gray-200 rounded dark:bg-gray-700"></div>
                            </div>
                            {% endfor %}
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex justify-end gap-3">
                            {% for j in '1234'|make_list %}
                            <div class="w-24 h-10 bg-gray-200 rounded-lg dark:bg-gray-700"></div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>