{% load i18n static %}

{% 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">
            {% if leaf.date_derniere_pluie and leaf.date_derniere_pluie != 'null' %}
            <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 bg-info text-white px-2 py-1">{{ leaf.get_date_derniere_pluie_display }}</span>
            </div>
            {% endif %}

            {% if leaf.orage_moins_une_heure is not None %}
            <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 %}bg-danger{% else %}bg-success{% endif %} text-white px-2 py-1">
                    {% if leaf.orage_moins_une_heure %}{% translate "Oui" %}{% else %}{% translate "Non" %}{% endif %}
                </span>
            </div>
            {% endif %}
        </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 %}
                <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 %}">
                    
                    <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.name %}
                                <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">
                            <!-- Recommandations -->
                            {% if ouv.actions %}
                                <div class="col-12">
                                    <div class="border rounded p-3 bg-white shadow-sm">
                                        <p 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" %}
                                        </p>
                                        <div class="d-flex flex-wrap gap-1.5">
                                            {% 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 "Interventions préventives" %}</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 %}
                                                <span class="badge bg-primary-subtle text-primary border border-primary-subtle p-2"><i class="bi bi-search me-1"></i>{% translate "Inspection" %}</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>
{% endif %}
{% endwith %}