{% extends "base.html" %}
{% block content %}

<form id="generate-form" action="#" hx-post="/generate" hx-target="#qr-result" hx-swap="innerHTML"
    hx-indicator="#loading">
    <div class="form-container">
        <div class="form-group">
            <label>Plat No.</label>
            <input type="text" name="plate_no" value="B 1234 ABC" required>
        </div>

        <div class="form-group">
            <label>Model Kendaraan</label>
            <select name="model" class="stall-input" required>
                <option value="">Pilih Model</option>
                {% for t in types %}
                <option value="{{ t.type.strip() }}">{{ t.type.strip() }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form-group">
            <label>Warna Kendaraan</label>
            <select name="color" class="stall-input" required>
                <option value="">Pilih Warna</option>
                {% for c in colors %}
                <option value="{{ c.color.strip() }}">{{ c.color.strip() }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form-group">
            <label>Area Parkir (Opsional)</label>
            <select name="location" class="stall-input">
                <option value="">Otomatis (Valet -> Parkir Depan)</option>
                {% for loc in locations %}
                <option value="{{ loc.location }}">{{ loc.location }}</option>
                {% endfor %}
            </select>
        </div>

    </div>

    <button type="submit" class="btn-generate">
        Generate Barcode
    </button>

    <div id="loading" class="htmx-indicator">
        Generating barcode...
    </div>
</form>

<div id="qr-result"></div>

{% endblock %}