{% load static %}

<div class="animate-pulse">
    <!-- Filter Bar Skeleton -->
    <div class="flex items-center justify-between p-4 mb-6 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" %}
            <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 Form Skeleton -->
    <div class="p-6 mb-6 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
        <div class="flex flex-wrap items-end gap-4">
            {% for i in "123" %}
            <div class="flex-1 min-w-[200px] 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>

    <!-- Submission List Skeleton -->
    {% for i in "123" %}
    <div class="p-6 mb-4 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 md:col-span-1">
                <div class="flex items-center gap-3">
                    <div class="w-24 h-6 bg-gray-200 rounded-lg dark:bg-gray-700"></div>
                </div>
                <div class="space-y-3">
                    {% for i in "1234" %}
                    <div class="flex items-center gap-2">
                        <div class="w-5 h-5 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">
                {% for i in "12" %}
                <div class="p-4 mb-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 class="grid grid-cols-1 gap-3 mt-4 md:grid-cols-2">
                    {% for i in "1234" %}
                    <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>
            </div>
        </div>
    </div>
    {% endfor %}
</div>