{% load i18n %}

<!-- Champs spécifiques ParkingSpot (Emplacement stationnement) -->
<div id="parkingSpotSpecificFields" class="border rounded p-2 mb-3 bg-white">
    <span class="small fw-bold text-secondary mb-2 d-block">
        <i class="bi bi-p-square me-1"></i>{% translate "Contrôles spécifiques stationnement" %}
    </span>
    <div class="row g-2 mb-3">
        <div class="col-4">
            <label class="form-label small mb-1" style="min-height: 38px; display: flex; align-items: flex-end; line-height: 1.15;">{% translate "Arceaux classiques" %}</label>
            <input type="number" name="verified_standard_stand_count" id="insp_std_stands"
                class="form-control form-control-sm" min="0">
        </div>
        <div class="col-4">
            <label class="form-label small mb-1" style="min-height: 38px; display: flex; align-items: flex-end; line-height: 1.15;">{% translate "Arceaux cargo" %}</label>
            <input type="number" name="verified_cargo_stand_count" id="insp_cargo_stands"
                class="form-control form-control-sm" min="0">
        </div>
        <div class="col-4">
            <label class="form-label small mb-1" style="min-height: 38px; display: flex; align-items: flex-end; line-height: 1.15;">{% translate "Arceaux drop-off" %}</label>
            <input type="number" name="verified_drop_off_stand_count" id="insp_drop_off_stands"
                class="form-control form-control-sm" min="0">
        </div>
    </div>

    <!-- Drop zone trottinettes -->
    <div class="mb-3">
        <label class="form-label small fw-bold text-muted mb-1">{% translate "Drop zone trottinettes" %}</label>
        <div class="row g-2">
            <div class="col-6">
                <input type="radio" class="btn-check" name="verified_has_scooter_drop_zone" id="dz_yes" value="true">
                <label class="btn btn-outline-secondary btn-sm w-100"
                    style="padding: 0.5rem 0.2rem; border-radius: 10px;" for="dz_yes">
                    <i class="bi bi-check-circle me-1"></i>{% translate "Oui" %}
                </label>
            </div>
            <div class="col-6">
                <input type="radio" class="btn-check" name="verified_has_scooter_drop_zone" id="dz_no" value="false">
                <label class="btn btn-outline-secondary btn-sm w-100"
                    style="padding: 0.5rem 0.2rem; border-radius: 10px;" for="dz_no">
                    <i class="bi bi-x-circle me-1"></i>{% translate "Non" %}
                </label>
            </div>
        </div>
    </div>

    <!-- Qualité marquage -->
    <div class="mb-2">
        <label class="form-label small fw-bold text-muted mb-1">{% translate "Qualité du marquage au sol" %}</label>
        <div class="row g-1">
            <div class="col-6">
                <input type="radio" class="btn-check" name="verified_marking_quality" id="mq_good" value="good">
                <label class="btn btn-outline-success btn-sm w-100 text-truncate"
                    style="padding: 0.5rem 0.2rem; border-radius: 10px;" for="mq_good">
                    <i class="bi bi-emoji-smile me-1"></i>{% translate "Bon état" %}
                </label>
            </div>
            <div class="col-6">
                <input type="radio" class="btn-check" name="verified_marking_quality" id="mq_medium" value="medium">
                <label class="btn btn-outline-warning btn-sm w-100 text-truncate"
                    style="padding: 0.5rem 0.2rem; border-radius: 10px;" for="mq_medium">
                    <i class="bi bi-emoji-neutral me-1"></i>{% translate "Moyen" %}
                </label>
            </div>
            <div class="col-6 mt-2">
                <input type="radio" class="btn-check" name="verified_marking_quality" id="mq_damaged" value="damaged">
                <label class="btn btn-outline-danger btn-sm w-100 text-truncate"
                    style="padding: 0.5rem 0.2rem; border-radius: 10px;" for="mq_damaged">
                    <i class="bi bi-emoji-frown me-1"></i>{% translate "Dégradé" %}
                </label>
            </div>
            <div class="col-6 mt-2">
                <input type="radio" class="btn-check" name="verified_marking_quality" id="mq_missing" value="missing">
                <label class="btn btn-outline-dark btn-sm w-100 text-truncate"
                    style="padding: 0.5rem 0.2rem; border-radius: 10px;" for="mq_missing">
                    <i class="bi bi-x-circle me-1"></i>{% translate "Absent" %}
                </label>
            </div>
        </div>
    </div>

    {% if show_apply_physical_counts %}
    <div class="form-check form-switch mt-2 bg-light p-2 rounded ps-4">
        <input class="form-check-input ms-0 me-2" type="checkbox" name="apply_physical_counts_to_asset" value="true"
            id="insp_apply_physical_counts" checked>
        <label class="form-check-label small fw-semibold" for="insp_apply_physical_counts">
            {% translate "Mettre à jour la capacité / les comptages de l'emplacement vélos" %}
        </label>
    </div>
    {% endif %}
</div>