thrillwiki_django_no_react/templates/rides/partials/designer_form.html

{% load static %}

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('designerForm', () => ({
        submitting: false,
        
        init() {
            // Listen for HTMX events on this form
            this.$el.addEventListener('htmx:afterRequest', (event) => {
                if (event.detail.pathInfo.requestPath === '/rides/designers/create/') {
                    this.handleResponse(event);
                }
            });
        },
        
        async submitForm(event) {
            if (this.submitting) return;
            
            this.submitting = true;
            const formData = new FormData(event.target);
            const csrfToken = this.$el.querySelector('[name=csrfmiddlewaretoken]').value;
            
            // Use HTMX for form submission
            htmx.ajax('POST', '/rides/designers/create/', {
                values: Object.fromEntries(formData),
                headers: {
                    'X-CSRFToken': csrfToken
                },
                target: this.$el,
                swap: 'none'
            });
        },
        
        handleResponse(event) {
            this.submitting = false;
            
            if (event.detail.xhr.status >= 200 && event.detail.xhr.status < 300) {
                const data = JSON.parse(event.detail.xhr.response);
                
                // Dispatch event with designer data for parent components
                this.$dispatch('designer-created', { 
                    id: data.id, 
                    name: data.name 
                });
                
                // Close modal if in modal context
                this.$dispatch('close-designer-modal');
            } else {
                // Handle error case
                this.$dispatch('designer-creation-error', { 
                    error: event.detail.xhr.responseText 
                });
            }
        }
    }));
});
</script>

<form method="post" 
      class="space-y-6" 
      x-data="designerForm()"
      @submit.prevent="submitForm($event)">
    {% 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>