{% load static %}

<form method="post" 
      class="space-y-6" 
      x-data="{ submitting: false }"
      @submit.prevent="
        if (!submitting) {
            submitting = true;
            const formData = new FormData($event.target);
            htmx.ajax('POST', '/rides/manufacturers/create/', {
                values: Object.fromEntries(formData),
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                }
            }).then(response => {
                if (response.detail) {
                    const data = JSON.parse(response.detail.xhr.response);
                    selectManufacturer(data.id, data.name);
                }
                $dispatch('close-manufacturer-modal');
            }).finally(() => {
                submitting = false;
            });
        }">
    {% csrf_token %}
    
    <div id="manufacturer-form-notification"></div>
    
    <div class="space-y-6">
        <!-- Name -->
        <div>
            <label for="manufacturer_name" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                Name *
            </label>
            <input type="text"
                   name="name"
                   id="manufacturer_name"
                   value="{{ search_term|default:'' }}"
                   class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                   required>
        </div>

        {% if not user.is_privileged %}
        <!-- Reason and Source for non-privileged users -->
        <div>
            <label for="reason" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                Reason for Addition *
            </label>
            <textarea name="reason"
                      id="reason"
                      class="w-full border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                      rows="3"
                      required
                      placeholder="Please explain why you're adding this manufacturer and provide any relevant details."></textarea>
        </div>
        <div>
            <label for="source" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                Source (Optional)
            </label>
            <input type="text"
                   name="source"
                   id="source"
                   class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                   placeholder="URL or reference for this information">
        </div>
        {% endif %}
    </div>

    <div class="flex justify-end mt-6 space-x-3">
        {% if modal %}
            <button type="button"
                    @click="$dispatch('close-manufacturer-modal')"
                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600">
                Cancel
            </button>
        {% endif %}
        <button type="submit"
                :disabled="submitting"
                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700 dark:hover:bg-blue-500 disabled:opacity-50">
            <span x-show="!submitting">Create Manufacturer</span>
            <span x-show="submitting">Creating...</span>
        </button>
    </div>
</form>
