{% load moderation_tags %}

<div class="p-6 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50"
     id="edit-form-{{ submission.id }}">
    <h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-300">
        Edit Submission
    </h3>

    <form hx-post="{% url 'moderation:edit_submission' submission.id %}"
          hx-target="#submissions-content"
          class="space-y-4">
        
        {% for field, value in changes.items %}
        {% if field != 'model_name' %}
        <div class="p-4 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                {% if field == 'stats' %}
                    Coaster Stats:
                {% elif field == 'park_area' %}
                    Park Area:
                {% elif field == 'ride_model' %}
                    Ride Model:
                {% elif field == 'min_height_in' %}
                    Minimum Height:
                {% elif field == 'max_height_in' %}
                    Maximum Height:
                {% elif field == 'capacity_per_hour' %}
                    Hourly Capacity:
                {% elif field == 'ride_duration_seconds' %}
                    Ride Duration:
                {% elif field == 'opening_date' %}
                    Opening Date:
                {% elif field == 'closing_date' %}
                    Closing Date:
                {% elif field == 'status_since' %}
                    Status Since:
                {% elif field == 'operating_season' %}
                    Operating Season:
                {% elif field == 'size_acres' %}
                    Size (Acres):
                {% elif field == 'post_closing_status' %}
                    Post-Closing Status:
                {% else %}
                    {{ field|title }}:
                {% endif %}
            </label>

            {% if field == 'stats' %}
                <div class="space-y-2">
                    {% for stat_name, stat_value in value.items %}
                    <div class="flex items-center gap-2">
                        <label class="text-sm text-gray-700 dark:text-gray-400">{{ stat_name|title }}:</label>
                        <input type="text" 
                               name="stats.{{ stat_name }}" 
                               value="{{ stat_value }}"
                               class="flex-1 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">
                    </div>
                    {% endfor %}
                </div>
            {% elif field == 'park' %}
                <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">
                    {% for park_id, park_name in parks %}
                    <option value="{{ park_id }}" {% if park_id == value %}selected{% endif %}>{{ park_name }}</option>
                    {% endfor %}
                </select>
            {% elif field == 'designer' %}
                <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">
                    <option value="">None</option>
                    {% for designer_id, designer_name in designers %}
                    <option value="{{ designer_id }}" {% if designer_id == value %}selected{% endif %}>{{ designer_name }}</option>
                    {% endfor %}
                </select>
            {% elif field == 'manufacturer' %}
                <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">
                    <option value="">None</option>
                    {% for manufacturer_id, manufacturer_name in manufacturers %}
                    <option value="{{ manufacturer_id }}" {% if manufacturer_id == value %}selected{% endif %}>{{ manufacturer_name }}</option>
                    {% endfor %}
                </select>
            {% elif field == 'ride_model' %}
                <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">
                    <option value="">None</option>
                    {% for model_id, model_name in ride_models %}
                    <option value="{{ model_id }}" {% if model_id == value %}selected{% endif %}>{{ model_name }}</option>
                    {% endfor %}
                </select>
            {% elif field == 'park_area' %}
                <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">
                    <option value="">None</option>
                    {% for area_id, area_name in park_areas %}
                    <option value="{{ area_id }}" {% if area_id == value %}selected{% endif %}>{{ area_name }}</option>
                    {% endfor %}
                </select>
            {% else %}
                <input type="{% if field == 'opening_date' or field == 'closing_date' or field == 'status_since' %}date{% else %}text{% endif %}" 
                       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">
            {% endif %}
        </div>
        {% endif %}
        {% endfor %}

        <div class="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"
                      rows="3"
                      required
                      placeholder="Explain why you're editing this submission"></textarea>
        </div>

        <div class="flex justify-end 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="showEditForm = 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>
</div>
