{% load i18n static inspections_tags %}

{% with leaf=insp.detailed_inspection %}
{% if leaf %}
<div class="giep-inspection-details w-100">
    <!-- 1. Météo Card -->
    {% if leaf.date_derniere_pluie and leaf.date_derniere_pluie != 'null' or leaf.orage_moins_une_heure is not None %}
    <div class="card border-primary-subtle bg-light-subtle p-3 mb-3 shadow-sm rounded-3">
        <h6 class="fw-bold mb-3 text-primary border-bottom pb-2 small text-uppercase">
            <i class="bi bi-cloud-sun-fill me-2"></i>{% translate "Conditions météorologiques" %}
        </h6>
        <div class="row g-2">
            <div class="col-12 col-md-6 d-flex align-items-center justify-content-between">
                <span class="small text-muted"><i class="bi bi-cloud-rain me-1 text-primary"></i>{% translate "Date de la dernière pluie" %} :</span>
                <span class="badge {% if leaf.date_derniere_pluie and leaf.date_derniere_pluie != 'null' %}bg-info text-white{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                    {% if leaf.date_derniere_pluie and leaf.date_derniere_pluie != 'null' %}{{ leaf.get_date_derniere_pluie_display }}{% else %}{% translate "Non renseignée" %}{% endif %}
                </span>
            </div>

            <div class="col-12 col-md-6 d-flex align-items-center justify-content-between">
                <span class="small text-muted"><i class="bi bi-lightning-charge me-1 text-danger"></i>{% translate "Orage récent (-1h)" %} :</span>
                <span class="badge {% if leaf.orage_moins_une_heure is True %}bg-danger text-white{% elif leaf.orage_moins_une_heure is False %}bg-success text-white{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                    {% if leaf.orage_moins_une_heure is True %}{% translate "Oui" %}{% elif leaf.orage_moins_une_heure is False %}{% translate "Non" %}{% else %}{% translate "Non vérifié" %}{% endif %}
                </span>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- 2. Ouvrages inspectés -->
    {% if leaf.data and leaf.data.ouvrages %}
    <div class="mb-3">
        <h6 class="fw-bold mb-3 text-secondary border-bottom pb-2 small text-uppercase">
            <i class="bi bi-list-check me-2"></i>{% translate "Ouvrages GIEP inspectés" %} ({{ leaf.data.ouvrages|length }})
        </h6>

        <div class="d-flex flex-column gap-3">
            {% for ouv in leaf.data.ouvrages %}
                {% with q=ouv.questions %}
                <div class="card border shadow-sm rounded-3 giep-ouvrage-card overflow-hidden" 
                     style="{% if ouv.device_type == 'evc' %}border-left: 5px solid #2e7d32;{% elif ouv.device_type == 'oed' %}border-left: 5px solid #0277bd;{% elif ouv.device_type == 'ta' %}border-left: 5px solid #00796b;{% else %}border-left: 5px solid #6c757d;{% endif %}">
                    
                    <!-- En-tête de l'ouvrage -->
                    <div class="card-header bg-white p-3 d-flex align-items-center justify-content-between flex-wrap gap-2">
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <span class="fw-bold text-dark fs-6">{% translate "Ouvrage" %} #{{ forloop.counter }}</span>
                            
                            {% if ouv.device_type == 'evc' %}
                                <span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1">
                                    <i class="bi bi-flower1 me-1"></i>{% translate "Espace vert creux (EVC)" %}
                                </span>
                            {% elif ouv.device_type == 'oed' %}
                                <span class="badge bg-info-subtle text-info border border-info-subtle px-2 py-1">
                                    <i class="bi bi-grid-3x3-gap-fill me-1"></i>{% translate "Massif drainant (OED)" %}
                                </span>
                            {% elif ouv.device_type == 'ta' %}
                                <span class="badge bg-teal-subtle text-teal border border-teal-subtle px-2 py-1" style="color: #00796b; background-color: #e0f2f1;">
                                    <i class="bi bi-cloud-rain-fill me-1"></i>{% translate "Technique alternative (TA)" %}
                                </span>
                            {% else %}
                                <span class="badge bg-secondary px-2 py-1">{% translate "GÉNÉRIQUE" %}</span>
                            {% endif %}

                            {% if ouv.asset_code %}
                                <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-1">
                                    <i class="bi bi-droplet-fill me-1"></i>{{ ouv.asset_code }}
                                </span>
                            {% endif %}

                            {% if ouv.asset_name and ouv.asset_name != ouv.asset_code and ouv.asset_name != "Ouvrage #"|add:forloop.counter %}
                                <span class="badge bg-light text-dark border px-2 py-1">{{ ouv.asset_name }}</span>
                            {% elif ouv.name and ouv.name != ouv.asset_code and ouv.name != "Ouvrage #"|add:forloop.counter %}
                                <span class="badge bg-light text-dark border px-2 py-1">{{ ouv.name }}</span>
                            {% endif %}
                        </div>
                    </div>

                    <div class="card-body p-3 bg-light-subtle">
                        <div class="row g-3">

                            <!-- ── 1. EVC (Espace Vert Creux) BLOCS ── -->
                            {% if ouv.device_type == 'evc' %}
                                <!-- Bloc EVC: Point d'entrée -->
                                <div class="col-12">
                                    <div class="border rounded-3 p-3 bg-white border-success-subtle shadow-sm">
                                        <h6 class="fw-bold mb-3 small text-success text-uppercase border-bottom pb-1">
                                            <i class="bi bi-box-arrow-in-right me-1"></i>{% translate "Point d'entrée dans l'ouvrage" %}
                                        </h6>
                                        
                                        {% with val=q|get_q_val:'evc_pe_ok' %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "L'eau peut-elle facilement entrer dans l'EVC ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-success-subtle text-success border border-success-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-danger-subtle text-danger border border-danger-subtle{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endwith %}

                                        {% with val=q|get_q_val:'evc_pe_feuilles' %}
                                        {% if val != 'null' and val is not None %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "Des feuilles ou branches bloquent-elles l'eau ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-danger-subtle text-danger border border-danger-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-success-subtle text-success border border-success-subtle{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endif %}
                                        {% endwith %}

                                        {% with val=q|get_q_val:'evc_pe_detritus' %}
                                        {% if val != 'null' and val is not None %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "Un amas de détritus bloque-t-il l'eau ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-danger-subtle text-danger border border-danger-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-success-subtle text-success border border-success-subtle{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endif %}
                                        {% endwith %}

                                        {% with val=q|get_q_val:'evc_empierrement_present' %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "L'ouvrage dispose-t-il d'un empierrement ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-success-subtle text-success border border-success-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-secondary-subtle text-secondary border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endwith %}
                                    </div>
                                </div>

                                <!-- Bloc EVC: Espace Vert -->
                                <div class="col-12">
                                    <div class="border rounded-3 p-3 bg-white border-success-subtle shadow-sm">
                                        <h6 class="fw-bold mb-3 small text-success text-uppercase border-bottom pb-1">
                                            <i class="bi bi-flower1 me-1"></i>{% translate "Espace vert" %}
                                        </h6>

                                        {% with val=q|get_q_val:'evc_ev_veg_etat' %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "Quel est l'état de la végétation ?" %}</span>
                                            <span class="badge {% if val == 'bon' %}bg-success-subtle text-success border border-success-subtle{% elif val == 'mauvais' %}bg-danger-subtle text-danger border border-danger-subtle{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                                                {{ val|format_giep_q_val }}
                                            </span>
                                        </div>
                                        {% endwith %}

                                        {% with val=q|get_q_val:'evc_ev_chenaux_erosion' %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "Présence de chenaux d'érosion ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-danger-subtle text-danger border border-danger-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-success-subtle text-success border border-success-subtle{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endwith %}

                                        {% with val=q|get_q_val:'evc_ev_flaques' %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "Présence de flaques d'eau persistantes ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-danger-subtle text-danger border border-danger-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-success-subtle text-success border border-success-subtle{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endwith %}

                                        {% with val=q|get_q_val:'evc_ev_sediments' %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "Présence de sédiments dans l'ouvrage ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-danger-subtle text-danger border border-danger-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-success-subtle text-success border border-success-subtle{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endwith %}

                                        {% with val=q|get_q_val:'evc_ev_envahissantes' %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "Présence d'espèces exotiques envahissantes ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-danger-subtle text-danger border border-danger-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-success-subtle text-success border border-success-subtle{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endwith %}
                                    </div>
                                </div>

                                <!-- Bloc EVC: Surverse / Trop-plein -->
                                <div class="col-12">
                                    <div class="border rounded-3 p-3 bg-white border-success-subtle shadow-sm">
                                        <h6 class="fw-bold mb-3 small text-success text-uppercase border-bottom pb-1">
                                            <i class="bi bi-water me-1"></i>{% translate "Surverse / Trop-plein" %}
                                        </h6>

                                        {% with val=q|get_q_val:'evc_surverse_presente' %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "Une surverse est-elle présente ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-success-subtle text-success border border-success-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-secondary-subtle text-secondary border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endwith %}

                                        {% with val=q|get_q_val:'evc_sv_grille_propre' %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "La grille de surverse est propre et dégagée ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-success-subtle text-success border border-success-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-danger-subtle text-danger border border-danger-subtle{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endwith %}
                                    </div>
                                </div>
                            {% endif %}


                            <!-- ── 2. OED (Massif Drainant) BLOCS ── -->
                            {% if ouv.device_type == 'oed' %}
                                <!-- Bloc OED: État du revêtement -->
                                <div class="col-12">
                                    <div class="border rounded-3 p-3 bg-white border-info-subtle shadow-sm">
                                        <h6 class="fw-bold mb-3 small text-info text-uppercase border-bottom pb-1">
                                            <i class="bi bi-road-perspective me-1"></i>{% translate "État général du revêtement / chaussée" %}
                                        </h6>

                                        {% with val=q|get_q_val:'oed_revetement_ok' %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "La surface au-dessus du massif drainant est en bon état ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-success-subtle text-success border border-success-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-danger-subtle text-danger border border-danger-subtle{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endwith %}
                                    </div>
                                </div>

                                <!-- Bloc OED: Bouche d'injection -->
                                <div class="col-12">
                                    <div class="border rounded-3 p-3 bg-white border-info-subtle shadow-sm">
                                        <h6 class="fw-bold mb-3 small text-info text-uppercase border-bottom pb-1">
                                            <i class="bi bi-funnel me-1"></i>{% translate "Bouche d'injection & Drainage" %}
                                        </h6>

                                        {% with val=q|get_q_val:'oed_injection_presente' %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "Une bouche d'injection est-elle présente ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-success-subtle text-success border border-success-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-secondary-subtle text-secondary border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endwith %}

                                        {% with val=q|get_q_val:'oed_bi_grille_propre' %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "La grille est propre et dégagée ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-success-subtle text-success border border-success-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-danger-subtle text-danger border border-danger-subtle{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endwith %}
                                    </div>
                                </div>
                            {% endif %}


                            <!-- ── 3. TA (Technique Alternative) BLOCS ── -->
                            {% if ouv.device_type == 'ta' %}
                                <!-- Bloc TA: Points d'entrée -->
                                <div class="col-12">
                                    <div class="border rounded-3 p-3 bg-white border-teal-subtle shadow-sm" style="border-color:#b2dfdb;">
                                        <h6 class="fw-bold mb-3 small text-teal text-uppercase" style="color:#00796b;">
                                            <i class="bi bi-box-arrow-in-right me-1"></i>{% translate "Points d'entrée dans l'ouvrage" %}
                                        </h6>

                                        {% with val=q|get_q_val:'ta_pe_ok' %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "L'eau peut-elle facilement entrer dans l'ouvrage ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-success-subtle text-success border border-success-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-danger-subtle text-danger border border-danger-subtle{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endwith %}

                                        {% with val=q|get_q_val:'ta_pe_conduits_ok' %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "Les conduits et dispositifs amenant l'eau sont-ils fonctionnels ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-success-subtle text-success border border-success-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-danger-subtle text-danger border border-danger-subtle{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endwith %}

                                        {% with val=q|get_q_val:'ta_pe_decantation_vide' %}
                                        {% if val != 'null' and val is not None %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "La décantation est-elle vide ou presque ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-success-subtle text-success border border-success-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-danger-subtle text-danger border border-danger-subtle{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endif %}
                                        {% endwith %}
                                    </div>
                                </div>

                                <!-- Bloc TA: Bassin d'orage -->
                                <div class="col-12">
                                    <div class="border rounded-3 p-3 bg-white border-teal-subtle shadow-sm" style="border-color:#b2dfdb;">
                                        <h6 class="fw-bold mb-3 small text-teal text-uppercase" style="color:#00796b;">
                                            <i class="bi bi-cloud-snow me-1"></i>{% translate "Bassin d'orage" %}
                                        </h6>

                                        {% with val=q|get_q_val:'ta_bo_vegetation_etat' %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "Quel est l'état de la végétation ?" %}</span>
                                            <span class="badge {% if val == 'bon' %}bg-success-subtle text-success border border-success-subtle{% elif val == 'mauvais' %}bg-danger-subtle text-danger border border-danger-subtle{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                                                {{ val|format_giep_q_val }}
                                            </span>
                                        </div>
                                        {% endwith %}

                                        {% with val=q|get_q_val:'ta_sediments,ta_bo_sediments' %}
                                        <div class="d-flex align-items-center justify-content-between p-2 mb-1.5 rounded border {% if val == 'null' %}bg-light opacity-75{% else %}bg-white{% endif %}">
                                            <span class="small fw-medium {% if val == 'null' %}text-muted{% else %}text-dark{% endif %} me-2">{% translate "Présence de sédiments dans l'ouvrage ?" %}</span>
                                            <span class="badge {% if val == 'true' or val == True or val == 'oui' %}bg-danger-subtle text-danger border border-danger-subtle{% elif val == 'false' or val == False or val == 'non' %}bg-success-subtle text-success border border-success-subtle{% else %}bg-light text-muted border{% endif %} px-2 py-1">
                                                {% if val == 'true' or val == True or val == 'oui' %}Oui{% elif val == 'false' or val == False or val == 'non' %}Non{% else %}Non vérifié{% endif %}
                                            </span>
                                        </div>
                                        {% endwith %}
                                    </div>
                                </div>
                            {% endif %}


                            <!-- ── Recommandations ── -->
                            {% if ouv.actions %}
                                <div class="col-12">
                                    <div class="border rounded-3 p-3 bg-white shadow-sm">
                                        <h6 class="fw-bold mb-2 text-secondary small text-uppercase border-bottom pb-1">
                                            <i class="bi bi-bookmark-star me-1"></i>{% translate "Recommandations" %}
                                        </h6>
                                        <div class="d-flex flex-wrap gap-1.5 pt-1">
                                            {% if ouv.actions.aucune %}
                                                <span class="badge bg-success-subtle text-success border border-success-subtle p-2"><i class="bi bi-check-circle me-1"></i>{% translate "Aucune" %}</span>
                                            {% endif %}
                                            {% if ouv.actions.interventions_preventives or ouv.actions.renforcement_preventif %}
                                                <span class="badge bg-warning-subtle text-warning border border-warning-subtle p-2"><i class="bi bi-clock-history me-1"></i>{% translate "Renforcement de l’entretien préventif" %}</span>
                                            {% endif %}
                                            {% if ouv.actions.entretien_curatif %}
                                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle p-2"><i class="bi bi-exclamation-triangle me-1"></i>{% translate "Entretien curatif / Réparation / Adaptation nécessaire" %}</span>
                                            {% endif %}
                                            {% if ouv.actions.test_permeabilite %}
                                                <span class="badge bg-info-subtle text-info border border-info-subtle p-2"><i class="bi bi-speedometer2 me-1"></i>{% translate "Test de perméabilité" %}</span>
                                            {% endif %}
                                            {% if ouv.actions.inspection or ouv.actions.inspection_camera %}
                                                <span class="badge bg-primary-subtle text-primary border border-primary-subtle p-2"><i class="bi bi-search me-1"></i>{% translate "Inspection caméra" %}</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}

                        </div>
                    </div>
                </div>
                {% endwith %}
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>
{% endif %}
{% endwith %}