{% load static %}

<div class="bg-white rounded-lg shadow-xl modal-content dark:bg-gray-800"
     x-data="{ showModal: true }"
     @click.outside="$dispatch('close-modal')"
     @keydown.escape.window="$dispatch('close-modal')">
    <div class="p-6">
        <h2 class="mb-4 text-xl font-semibold dark:text-white">Create New Ride Model</h2>
        
        <form hx-post="{% url 'rides:create_ride_model' %}"
              hx-target="#modal-content"
              class="space-y-4">
            {% csrf_token %}
            
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name *</label>
                <input type="text"
                       id="name"
                       name="name"
                       value="{{ name }}"
                       required
                       class="w-full mt-1 border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white">
            </div>

            <div>
                <label for="manufacturer" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Manufacturer</label>
                <select id="manufacturer"
                        name="manufacturer"
                        class="w-full mt-1 border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                    <option value="">Select a manufacturer</option>
                    {% for manufacturer in manufacturers %}
                    <option value="{{ manufacturer.id }}">{{ manufacturer.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div>
                <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category *</label>
                <select id="category"
                        name="category"
                        required
                        class="w-full mt-1 border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                    <option value="">Select a category</option>
                    {% for code, name in categories %}
                    <option value="{{ code }}">{{ name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div>
                <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
                <textarea id="description"
                          name="description"
                          rows="3"
                          class="w-full mt-1 border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                          placeholder="Enter a description of this ride model"></textarea>
            </div>

            {% if not user.is_privileged %}
            <div>
                <label for="reason" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Reason for Addition *</label>
                <textarea id="reason"
                          name="reason"
                          rows="2"
                          required
                          class="w-full mt-1 border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                          placeholder="Why are you adding this ride model?"></textarea>
            </div>

            <div>
                <label for="source" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Source</label>
                <input type="text"
                       id="source"
                       name="source"
                       class="w-full mt-1 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 class="flex justify-end mt-6 space-x-3">
                <button type="button"
                        @click="$dispatch('close-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>
                <button type="submit"
                        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">
                    Create Ride Model
                </button>
            </div>
        </form>
    </div>
</div>
