{% load moderation_tags %}

<div class="p-4 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
    <h3 class="mb-4 text-lg font-semibold">Coaster Stats</h3>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        <div>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                Height (ft):
            </label>
            <input type="number"
                   name="stats.height_ft"
                   value="{{ stats.height_ft }}"
                   min="0"
                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                   placeholder="Height in feet">
        </div>

        <div>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                Length (ft):
            </label>
            <input type="number"
                   name="stats.length_ft"
                   value="{{ stats.length_ft }}"
                   min="0"
                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                   placeholder="Length in feet">
        </div>

        <div>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                Speed (mph):
            </label>
            <input type="number"
                   name="stats.speed_mph"
                   value="{{ stats.speed_mph }}"
                   min="0"
                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                   placeholder="Speed in mph">
        </div>

        <div>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                Inversions:
            </label>
            <input type="number"
                   name="stats.inversions"
                   value="{{ stats.inversions }}"
                   min="0"
                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                   placeholder="Number of inversions">
        </div>

        <div>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                Launch Type:
            </label>
            <select name="stats.launch_type"
                    class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500">
                <option value="">Select launch type</option>
                <option value="CHAIN_LIFT" {% if stats.launch_type == 'CHAIN_LIFT' %}selected{% endif %}>Chain Lift</option>
                <option value="LSM" {% if stats.launch_type == 'LSM' %}selected{% endif %}>LSM</option>
                <option value="HYDRAULIC" {% if stats.launch_type == 'HYDRAULIC' %}selected{% endif %}>Hydraulic</option>
                <option value="TIRE_DRIVE" {% if stats.launch_type == 'TIRE_DRIVE' %}selected{% endif %}>Tire Drive</option>
                <option value="CABLE_LIFT" {% if stats.launch_type == 'CABLE_LIFT' %}selected{% endif %}>Cable Lift</option>
                <option value="OTHER" {% if stats.launch_type == 'OTHER' %}selected{% endif %}>Other</option>
            </select>
        </div>

        <div>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                Track Material:
            </label>
            <select name="stats.track_material"
                    class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500">
                <option value="">Select track material</option>
                <option value="STEEL" {% if stats.track_material == 'STEEL' %}selected{% endif %}>Steel</option>
                <option value="WOOD" {% if stats.track_material == 'WOOD' %}selected{% endif %}>Wood</option>
                <option value="HYBRID" {% if stats.track_material == 'HYBRID' %}selected{% endif %}>Hybrid</option>
            </select>
        </div>

        <div>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                Coaster Type:
            </label>
            <select name="stats.roller_coaster_type"
                    class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500">
                <option value="">Select coaster type</option>
                <option value="SIT_DOWN" {% if stats.roller_coaster_type == 'SIT_DOWN' %}selected{% endif %}>Sit Down</option>
                <option value="INVERTED" {% if stats.roller_coaster_type == 'INVERTED' %}selected{% endif %}>Inverted</option>
                <option value="FLYING" {% if stats.roller_coaster_type == 'FLYING' %}selected{% endif %}>Flying</option>
                <option value="STAND_UP" {% if stats.roller_coaster_type == 'STAND_UP' %}selected{% endif %}>Stand Up</option>
                <option value="WING" {% if stats.roller_coaster_type == 'WING' %}selected{% endif %}>Wing</option>
                <option value="OTHER" {% if stats.roller_coaster_type == 'OTHER' %}selected{% endif %}>Other</option>
            </select>
        </div>

        <div>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                Number of Trains:
            </label>
            <input type="number"
                   name="stats.trains_count"
                   value="{{ stats.trains_count }}"
                   min="0"
                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                   placeholder="Number of trains">
        </div>

        <div>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                Cars per Train:
            </label>
            <input type="number"
                   name="stats.cars_per_train"
                   value="{{ stats.cars_per_train }}"
                   min="0"
                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                   placeholder="Cars per train">
        </div>

        <div>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                Seats per Car:
            </label>
            <input type="number"
                   name="stats.seats_per_car"
                   value="{{ stats.seats_per_car }}"
                   min="0"
                   class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
                   placeholder="Seats per car">
        </div>
    </div>
</div>