{% 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/designers/create/', {
                values: Object.fromEntries(formData),
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                }
            });
            
            // Handle HTMX response using event listeners
            document.addEventListener('htmx:afterRequest', function handleResponse(event) {
                if (event.detail.pathInfo.requestPath === '/rides/designers/create/') {
                    document.removeEventListener('htmx:afterRequest', handleResponse);
                    
                    if (event.detail.xhr.status >= 200 && event.detail.xhr.status < 300) {
                        const data = JSON.parse(event.detail.xhr.response);
                        if (typeof selectDesigner === 'function') {
                            selectDesigner(data.id, data.name);
                        }
                        $dispatch('close-designer-modal');
                    }
                    submitting = false;
                }
            });
        }">
    {% csrf_token %}
    
    <div id="designer-form-notification"></div>
    
    <div class="space-y-6">
        <!-- Name -->
        <div>
            <label for="designer_name" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                Name *
            </label>
            <input type="text"
                   name="name"
                   id="designer_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 designer 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-designer-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 Designer</span>
            <span x-show="submitting">Creating...</span>
        </button>
    </div>
</form>