{% load django_umin_tags %}

<div class="bg-white rounded-lg shadow-sm border border-gray-200">
    <form method="post"
          enctype="multipart/form-data"
          {% if htmx_enabled %}
          hx-post="{{ request.path }}"
          hx-target="this"
          hx-swap="outerHTML"
          {% endif %}
          class="space-y-6 p-6">
        {% csrf_token %}

        {% if form.non_field_errors %}
        <div class="rounded-lg bg-red-50 border border-red-200 p-4">
            <div class="flex">
                <svg class="h-5 w-5 text-red-400 mr-3" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                </svg>
                <div>
                    <h3 class="text-sm font-medium text-red-800">Please correct the following errors:</h3>
                    <ul class="mt-2 text-sm text-red-700 list-disc list-inside">
                        {% for error in form.non_field_errors %}
                        <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}

        {% for field in form %}
        <div>
            <label for="{{ field.id_for_label }}"
                   class="block text-sm font-medium text-gray-700 mb-1">
                {{ field.label }}
                {% if field.field.required %}
                <span class="text-red-500">*</span>
                {% endif %}
            </label>

            {% if field|is_checkbox %}
            <div class="flex items-start">
                <div class="flex items-center h-5">
                    {{ field }}
                </div>
                {% if field.help_text %}
                <div class="ml-3 text-sm">
                    <p class="text-gray-500">{{ field.help_text|safe }}</p>
                </div>
                {% endif %}
            </div>
            {% elif field|is_textarea %}
            <textarea name="{{ field.name }}"
                      id="{{ field.id_for_label }}"
                      rows="4"
                      class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-3 bg-white border-2 {% if field.errors %}border-red-300 focus:border-red-500 focus:ring-red-500{% endif %}"
                      {% if field.field.required %}required{% endif %}>{{ field.value|default:'' }}</textarea>
            {% elif field|is_select %}
            <select name="{{ field.name }}"
                    id="{{ field.id_for_label }}"
                    class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-3 bg-white border-2 {% if field.errors %}border-red-300 focus:border-red-500 focus:ring-red-500{% endif %}"
                    {% if field.field.required %}required{% endif %}>
                {% for choice in field.field.choices %}
                <option value="{{ choice.0 }}" {% if choice.0 == field.value %}selected{% endif %}>{{ choice.1 }}</option>
                {% endfor %}
            </select>
            {% else %}
            {% if field|is_date %}
            <input type="date"
                   name="{{ field.name }}"
                   id="{{ field.id_for_label }}"
                   value="{{ field.value|date:'Y-m-d' }}"
                   class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-3 bg-white border-2 {% if field.errors %}border-red-300 focus:border-red-500 focus:ring-red-500{% endif %}"
                   {% if field.required %}required{% endif %}>
            {% else %}
            <input type="{{ field.field.widget.input_type|default:'text' }}"
                   name="{{ field.name }}"
                   id="{{ field.id_for_label }}"
                   {% if field.field.widget.input_type != 'password' %}value="{{ field.value|default:'' }}"{% endif %}
                   class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-3 bg-white border-2 {% if field.errors %}border-red-300 focus:border-red-500 focus:ring-red-500{% endif %}"
                   {% if field.required %}required{% endif %}>
            {% endif %}
            {% endif %}

            {% if field.help_text and field.field.widget.input_type != 'checkbox' %}
            <p class="mt-1 text-sm text-gray-500">{{ field.help_text|safe }}</p>
            {% endif %}

            {% if field.errors %}
            <div class="mt-1">
                {% for error in field.errors %}
                <p class="text-sm text-red-600">{{ error }}</p>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endfor %}

        <div class="flex items-center justify-between pt-6 border-t border-gray-200">
            <a href="{{ cancel_url }}"
               class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                Cancel
            </a>
            <button type="submit"
                    class="inline-flex items-center px-6 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
                {{ submit_label }}
            </button>
        </div>
    </form>
</div>