{% load moderation_tags %}
{% load static %}
{% load fsm_tags %}

{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
{% endblock %}

{% for submission in submissions %}
<div class="p-6 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50"
     id="submission-{{ submission.id }}"
     x-data="{ 
        showSuccess: false, 
        isEditing: false,
        status: '{{ submission.changes.status|default:"" }}',
        category: '{{ submission.changes.category|default:"" }}',
        showCoasterFields: {% if submission.changes.category == 'RC' %}true{% else %}false{% endif %},
        init() {
            this.$watch('category', value => {
                this.showCoasterFields = value === 'RC';
            });
        }
     }"
     @htmx:afterOnLoad="showSuccess = true; setTimeout(() => showSuccess = false, 3000)">
    
    <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
        <!-- Left Column: Header & Status -->
        <div class="md:col-span-1">
            <div class="submission-header">
                <h3 class="flex items-center gap-3 text-lg font-semibold text-gray-900 dark:text-gray-300">
                    <span class="status-badge 
                        {% if submission.status == 'PENDING' %}status-pending
                        {% elif submission.status == 'APPROVED' %}status-approved
                        {% elif submission.status == 'REJECTED' %}status-rejected
                        {% elif submission.status == 'ESCALATED' %}status-escalated{% endif %}">
                        <i class="mr-1.5 fas fa-{% if submission.status == 'PENDING' %}clock
                            {% elif submission.status == 'APPROVED' %}check
                            {% elif submission.status == 'REJECTED' %}times
                            {% elif submission.status == 'ESCALATED' %}exclamation{% endif %}"></i>
                        {{ submission.get_status_display }}
                    </span>
                </h3>
                <div class="mt-3 text-gray-600 dark:text-gray-400">
                    <div class="flex items-center mb-2">
                        <i class="w-5 mr-2 fas fa-file-alt"></i>
                        {{ submission.get_content_type_display }} - 
                        {% if submission.submission_type == 'CREATE' %}New{% else %}Edit{% endif %}
                    </div>
                    <div class="flex items-center mb-2">
                        <i class="w-5 mr-2 fas fa-user"></i>
                        {{ submission.user.username }}
                    </div>
                    <div class="flex items-center mb-2">
                        <i class="w-5 mr-2 fas fa-clock"></i>
                        {{ submission.created_at|date:"M d, Y H:i" }}
                    </div>
                    {% if submission.handled_by %}
                    <div class="flex items-center">
                        <i class="w-5 mr-2 fas fa-user-shield"></i>
                        {{ submission.handled_by.username }}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Middle Column: Content Details -->
        <div class="md:col-span-2">
            {% if submission.content_object %}
            <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="text-sm font-medium text-gray-900 dark:text-gray-300">Current Object:</div>
                <div class="mt-1.5 text-gray-600 dark:text-gray-400">
                    {{ submission.content_object }}
                    {% if submission.content_type.model == 'park' or submission.content_type.model == 'company' or submission.content_type.model == 'designer' %}
                        <div class="mt-1 text-sm">
                            {{ submission.content_object.address }}
                        </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            {% if submission.reason %}
            <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="text-sm font-medium text-gray-900 dark:text-gray-300">Reason:</div>
                <div class="mt-1.5 text-gray-600 dark:text-gray-400">{{ submission.reason }}</div>
            </div>
            {% endif %}

            {% if submission.source %}
            <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="text-sm font-medium text-gray-900 dark:text-gray-300">Source:</div>
                <div class="mt-1.5">
                    <a href="{{ submission.source }}" 
                       target="_blank" 
                       class="inline-flex items-center text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">
                        <span>{{ submission.source }}</span>
                        <i class="ml-1.5 text-xs fas fa-external-link-alt"></i>
                    </a>
                </div>
            </div>
            {% endif %}

            <!-- View Mode -->
            <div x-show="!isEditing">
                <!-- Location Map (View Mode) -->
                {% if submission.content_type.model == 'park' %}
                <div class="mb-4">
                    {% include "moderation/partials/location_map.html" with submission=submission %}
                </div>
                {% endif %}

                <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                    {% for field, value in submission.changes.items %}
                    {% if field != 'model_name' and field != 'latitude' and field != 'longitude' and field != 'street_address' and field != 'city' and field != 'state' and field != 'postal_code' and field != 'country' and field != 'location' %}
                    <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="text-sm font-medium text-gray-900 dark:text-gray-300">
                            {{ field|title }}:
                        </div>
                        <div class="mt-1.5 text-gray-600 dark:text-gray-400">
                            {% if field == 'opening_date' or field == 'closing_date' or field == 'status_since' %}
                                {{ value|date:"Y-m-d" }}
                            {% elif field == 'size_acres' %}
                                {{ value }} acres
                            {% elif field == 'website' %}
                                <a href="{{ value }}" target="_blank" class="text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">
                                    {{ value }}
                                </a>
                            {% elif field == 'park' %}
                                {% with park_name=value|get_object_name:'parks.Park' %}
                                    {{ park_name }}
                                {% endwith %}
                            {% elif field == 'designer' %}
                                {% with designer_name=value|get_object_name:'designers.Designer' %}
                                    {{ designer_name|default:'None' }}
                                {% endwith %}
                            {% elif field == 'manufacturer' %}
                                {% with manufacturer_name=value|get_object_name:'companies.Manufacturer' %}
                                    {{ manufacturer_name|default:'None' }}
                                {% endwith %}
                            {% elif field == 'ride_model' %}
                                {% with model_name=value|get_object_name:'rides.RideModel' %}
                                    {{ model_name|default:'None' }}
                                {% endwith %}
                            {% elif field == 'park_area' %}
                                {% with park_id=submission.changes.park %}
                                    {{ value|get_park_area_name:park_id|default:'None' }}
                                {% endwith %}
                            {% elif field == 'category' %}
                                {{ value|get_category_display }}
                            {% elif field == 'stats' %}
                                <div class="space-y-2">
                                    {% if value.height_ft %}<div>Height: {{ value.height_ft }} ft</div>{% endif %}
                                    {% if value.length_ft %}<div>Length: {{ value.length_ft }} ft</div>{% endif %}
                                    {% if value.speed_mph %}<div>Speed: {{ value.speed_mph }} mph</div>{% endif %}
                                    {% if value.inversions %}<div>Inversions: {{ value.inversions }}</div>{% endif %}
                                    {% if value.launch_type %}<div>Launch Type: {{ value.launch_type }}</div>{% endif %}
                                    {% if value.track_material %}<div>Track Material: {{ value.track_material }}</div>{% endif %}
                                    {% if value.roller_coaster_type %}<div>Type: {{ value.roller_coaster_type }}</div>{% endif %}
                                    {% if value.trains_count %}<div>Number of Trains: {{ value.trains_count }}</div>{% endif %}
                                    {% if value.cars_per_train %}<div>Cars per Train: {{ value.cars_per_train }}</div>{% endif %}
                                    {% if value.seats_per_car %}<div>Seats per Car: {{ value.seats_per_car }}</div>{% endif %}
                                </div>
                            {% else %}
                                {{ value }}
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
            </div>

            <!-- Edit Mode -->
            <form x-show="isEditing"
                  x-cloak
                  hx-post="{% url 'moderation:edit_submission' submission.id %}"
                  hx-target="#submission-{{ submission.id }}"
                  class="grid grid-cols-1 gap-3 md:grid-cols-2">

                <!-- Location Widget for Parks -->
                {% if submission.content_type.model == 'park' %}
                <div class="col-span-2">
                    {% include "moderation/partials/location_widget.html" with submission=submission %}
                </div>
                {% endif %}

                {% for field, value in submission.changes.items %}
                {% if field != 'model_name' and field != 'stats' and field != 'latitude' and field != 'longitude' and field != 'street_address' and field != 'city' and field != 'state' and field != 'postal_code' and field != 'country' and field != 'location' %}
                <div class="p-4 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50"
                     {% if field == 'post_closing_status' %}x-show="status === 'CLOSING'"{% endif %}
                     {% if field == 'closing_date' %}x-show="['CLOSING', 'SBNO', 'CLOSED_PERM', 'DEMOLISHED', 'RELOCATED'].includes(status)"{% endif %}>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                        {{ field|title }}:
                    </label>

                    {% if field == 'category' %}
                        <select name="{{ field }}"
                                x-model="category"
                                class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500">
                            <option value="">Select ride type</option>
                            <option value="RC" {% if value == 'RC' %}selected{% endif %}>Roller Coaster</option>
                            <option value="DR" {% if value == 'DR' %}selected{% endif %}>Dark Ride</option>
                            <option value="FR" {% if value == 'FR' %}selected{% endif %}>Flat Ride</option>
                            <option value="WR" {% if value == 'WR' %}selected{% endif %}>Water Ride</option>
                            <option value="TR" {% if value == 'TR' %}selected{% endif %}>Transport</option>
                            <option value="OT" {% if value == 'OT' %}selected{% endif %}>Other</option>
                        </select>
                    {% elif field == 'status' %}
                        <select name="{{ field }}"
                                x-model="status"
                                class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500">
                            <option value="OPERATING" {% if value == 'OPERATING' %}selected{% endif %}>Operating</option>
                            <option value="SBNO" {% if value == 'SBNO' %}selected{% endif %}>Standing But Not Operating</option>
                            <option value="CLOSING" {% if value == 'CLOSING' %}selected{% endif %}>Closing</option>
                            <option value="CLOSED_PERM" {% if value == 'CLOSED_PERM' %}selected{% endif %}>Permanently Closed</option>
                            <option value="UNDER_CONSTRUCTION" {% if value == 'UNDER_CONSTRUCTION' %}selected{% endif %}>Under Construction</option>
                            <option value="DEMOLISHED" {% if value == 'DEMOLISHED' %}selected{% endif %}>Demolished</option>
                            <option value="RELOCATED" {% if value == 'RELOCATED' %}selected{% endif %}>Relocated</option>
                        </select>
                    {% elif field == 'post_closing_status' %}
                        <select name="{{ field }}"
                                class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500">
                            <option value="SBNO" {% if value == 'SBNO' %}selected{% endif %}>Standing But Not Operating</option>
                            <option value="CLOSED_PERM" {% if value == 'CLOSED_PERM' %}selected{% endif %}>Permanently Closed</option>
                        </select>
                    {% elif field == 'opening_date' or field == 'closing_date' or field == 'status_since' %}
                        <input type="date"
                               name="{{ field }}"
                               value="{{ value|date:'Y-m-d' }}"
                               class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                               {% if field == 'closing_date' %}
                               :required="status === 'CLOSING'"
                               {% endif %}>
                    {% else %}
                        {% if field == 'park' %}
                            <div class="relative space-y-2">
                                <input type="text"
                                       id="park-search-{{ submission.id }}"
                                       placeholder="Search for a park..."
                                       class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                                       hx-get="{% url 'moderation:search_parks' %}"
                                       hx-trigger="click, input delay:200ms"
                                       hx-target="#park-search-results-{{ submission.id }}"
                                       hx-vals='{"submission_id": "{{ submission.id }}"}'
                                       name="q"
                                       autocomplete="off"
                                       {% with park_name=value|get_object_name:'parks.Park' %}
                                       value="{{ park_name }}"
                                       {% endwith %}>
                                <div id="park-search-results-{{ submission.id }}" class="absolute z-50 w-full"></div>
                                <input type="hidden" 
                                       id="park-input-{{ submission.id }}"
                                       name="{{ field }}" 
                                       value="{{ value }}"
                                       hx-trigger="change"
                                       hx-get="/parks/areas/"
                                       hx-target="#park-area-select-{{ submission.id }}">
                            </div>
                        {% elif field == 'park_area' %}
                            <select name="{{ field }}"
                                    id="park-area-select-{{ submission.id }}"
                                    class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500">
                                <option value="">Select area</option>
                                {% with park_id=submission.changes.park %}
                                {% with areas=park_areas_by_park|get_item:park_id %}
                                {% for area_id, area_name in areas %}
                                <option value="{{ area_id }}" {% if value == area_id %}selected{% endif %}>{{ area_name }}</option>
                                {% endfor %}
                                {% endwith %}
                                {% endwith %}
                            </select>
                        {% elif field == 'manufacturer' %}
                            <div class="relative space-y-2">
                                <input type="text"
                                       id="manufacturer-search-{{ submission.id }}"
                                       placeholder="Search for a manufacturer..."
                                       class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                                       hx-get="{% url 'moderation:search_manufacturers' %}"
                                       hx-trigger="click, input delay:200ms"
                                       hx-target="#manufacturer-search-results-{{ submission.id }}"
                                       hx-vals='{"submission_id": "{{ submission.id }}"}'
                                       name="q"
                                       autocomplete="off"
                                       {% with manufacturer_name=value|get_object_name:'companies.Manufacturer' %}
                                       value="{{ manufacturer_name }}"
                                       {% endwith %}>
                                <div id="manufacturer-search-results-{{ submission.id }}" class="absolute z-50 w-full"></div>
                                <input type="hidden" 
                                       id="manufacturer-input-{{ submission.id }}"
                                       name="{{ field }}" 
                                       value="{{ value }}">
                            </div>
                        {% elif field == 'designer' %}
                            <div class="relative space-y-2">
                                <input type="text"
                                       id="designer-search-{{ submission.id }}"
                                       placeholder="Search for a designer..."
                                       class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                                       hx-get="{% url 'moderation:search_designers' %}"
                                       hx-trigger="click, input delay:200ms"
                                       hx-target="#designer-search-results-{{ submission.id }}"
                                       hx-vals='{"submission_id": "{{ submission.id }}"}'
                                       name="q"
                                       autocomplete="off"
                                       {% with designer_name=value|get_object_name:'designers.Designer' %}
                                       value="{{ designer_name }}"
                                       {% endwith %}>
                                <div id="designer-search-results-{{ submission.id }}" class="absolute z-50 w-full"></div>
                                <input type="hidden" 
                                       id="designer-input-{{ submission.id }}"
                                       name="{{ field }}" 
                                       value="{{ value }}">
                            </div>
                        {% elif field == 'ride_model' %}
                            <div class="relative space-y-2">
                                <input type="text"
                                       id="ride-model-search-{{ submission.id }}"
                                       placeholder="Search for a ride model..."
                                       class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                                       hx-get="{% url 'moderation:search_ride_models' %}"
                                       hx-trigger="click, input delay:200ms"
                                       hx-target="#ride-model-search-results-{{ submission.id }}"
                                       hx-vals='{"submission_id": "{{ submission.id }}"}'
                                       hx-include="[name='manufacturer']"
                                       name="q"
                                       autocomplete="off"
                                       {% with model_name=value|get_object_name:'rides.RideModel' %}
                                       value="{{ model_name }}"
                                       {% endwith %}>
                                <div id="ride-model-search-results-{{ submission.id }}" class="absolute z-50 w-full"></div>
                                <input type="hidden" 
                                       id="ride-model-input-{{ submission.id }}"
                                       name="{{ field }}" 
                                       value="{{ value }}">
                            </div>
                        {% elif field == 'description' %}
                            <textarea name="{{ field }}"
                                      rows="4"
                                      class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                                      placeholder="General description and notable features">{{ value }}</textarea>
                        {% elif field == 'min_height_in' or field == 'max_height_in' %}
                            <input type="number"
                                   name="{{ field }}"
                                   value="{{ value }}"
                                   min="0"
                                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                                   placeholder="Height in inches">
                        {% elif field == 'capacity_per_hour' %}
                            <input type="number"
                                   name="{{ field }}"
                                   value="{{ value }}"
                                   min="0"
                                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                                   placeholder="Theoretical hourly ride capacity">
                        {% elif field == 'ride_duration_seconds' %}
                            <input type="number"
                                   name="{{ field }}"
                                   value="{{ value }}"
                                   min="0"
                                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                                   placeholder="Total duration of one ride cycle in seconds">
                        {% else %}
                            <input type="text"
                                   name="{{ field }}"
                                   value="{{ value }}"
                                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500">
                        {% endif %}
                    {% endif %}
                </div>
                {% endif %}
                {% endfor %}

                <!-- Coaster Fields -->
                <div x-show="showCoasterFields" 
                     x-cloak
                     class="col-span-2">
                    {% include 'moderation/partials/coaster_fields.html' with stats=submission.changes.stats %}
                </div>

                <div class="col-span-2 p-4 border rounded-lg bg-blue-50 dark:bg-blue-900/30 border-blue-200/50 dark:border-blue-700/50">
                    <label class="block mb-2 text-sm font-medium text-blue-900 dark:text-blue-300">
                        Notes (required):
                    </label>
                    <textarea name="notes"
                              class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg resize-none dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                              rows="3"
                              required
                              placeholder="Explain why you're editing this submission"></textarea>
                </div>

                <div class="flex justify-end col-span-2 gap-3">
                    <button type="button"
                            class="px-4 py-2 font-medium text-gray-700 transition-all duration-200 bg-gray-100 rounded-lg hover:bg-gray-200 hover:text-gray-900 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
                            @click="isEditing = false">
                        Cancel
                    </button>
                    <button type="submit"
                            class="px-4 py-2 font-medium text-white transition-all duration-200 bg-blue-600 rounded-lg hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">
                        Save Changes
                    </button>
                </div>
            </form>

            <!-- Keep existing review notes section -->
            {% if submission.notes %}
            <div class="p-4 mt-4 border rounded-lg bg-blue-50 dark:bg-blue-900/30 border-blue-200/50 dark:border-blue-700/50">
                <div class="text-sm font-medium text-blue-900 dark:text-blue-300">Review Notes:</div>
                <div class="mt-1.5 text-blue-800 dark:text-blue-200">{{ submission.notes }}</div>
            </div>
            {% endif %}

            {% if submission.status == 'PENDING' or submission.status == 'ESCALATED' and user.role == 'ADMIN' or user.role == 'SUPERUSER' %}
            <div class="mt-6 review-notes" x-data="{ showNotes: false }">
                <div x-show="showNotes"
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform -translate-y-2"
                     x-transition:enter-end="opacity-100 transform translate-y-0"
                     x-transition:leave="transition ease-in duration-200"
                     x-transition:leave-start="opacity-100 transform translate-y-0"
                     x-transition:leave-end="opacity-0 transform -translate-y-2">
                    <textarea name="notes"
                             class="w-full px-4 py-3 text-gray-900 bg-white border rounded-lg resize-none dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                             placeholder="Add review notes (optional)"
                             rows="3"></textarea>
                </div>

                <div class="flex items-center justify-end gap-3 mt-4 action-buttons">
                    <button class="inline-flex items-center px-4 py-2.5 font-medium text-gray-700 transition-all duration-200 bg-gray-100 rounded-lg hover:bg-gray-200 hover:text-gray-900 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white shadow-xs hover:shadow-md"
                            @click="showNotes = !showNotes">
                        <i class="mr-2 fas fa-comment-alt"></i>
                        Add Notes
                    </button>

                    <button class="inline-flex items-center px-4 py-2.5 font-medium text-gray-700 transition-all duration-200 bg-gray-100 rounded-lg hover:bg-gray-200 hover:text-gray-900 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white shadow-xs hover:shadow-md"
                            @click="isEditing = !isEditing">
                        <i class="mr-2 fas fa-edit"></i>
                        Edit
                    </button>

                    <!-- FSM-based transition actions -->
                    {% include 'htmx/status_with_actions.html' with object=submission user=user target_id="submission-"|add:submission.id|stringformat:"s" show_badge=False %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% empty %}
<div class="relative p-8 text-center bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
    <div class="text-gray-600 dark:text-gray-400">
        <i class="mb-4 text-5xl fas fa-inbox"></i>
        <p class="text-lg">No submissions found matching your filters.</p>
    </div>

    <div id="loading-indicator" 
         class="absolute inset-0 flex items-center justify-center rounded-lg htmx-indicator bg-white/80 dark:bg-gray-900/80">
        <div class="flex items-center p-6 space-x-4">
            <div class="w-8 h-8 border-4 border-blue-500 rounded-full animate-spin border-t-transparent"></div>
            <span class="text-gray-900 dark:text-gray-300">Loading...</span>
        </div>
    </div>
</div>
{% endfor %}

{% block extra_js %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
{% endblock %}
