{% load i18n %}

{% with leaf=insp.detailed_inspection %}
{% if leaf %}
<div class="card border-0 bg-light p-3 mb-3 rounded-3 shadow-sm">
    <h6 class="fw-bold mb-3 text-primary border-bottom pb-2 small text-uppercase d-flex align-items-center">
        <i class="bi bi-fire text-danger me-2"></i>{% translate "Contrôles visuels Hot Box (Enrobé à chaud)" %}
    </h6>
    
    <ul class="list-group list-group-flush bg-transparent">
        {% if not leaf.joint_level and not leaf.joint_sealing and not leaf.cracking and not leaf.water_drainage %}
        <li class="list-group-item bg-transparent text-muted small fst-italic px-0 py-2">
            <i class="bi bi-hourglass-split me-1 text-secondary"></i>{% translate "Contrôles visuels non encore renseignés (inspection planifiée ou en attente d'évaluation)." %}
        </li>
        {% endif %}

        <!-- 1. Planéité -->
        {% if leaf.joint_level %}
        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center px-0 py-2.5 border-bottom-0">
            <span class="text-secondary fw-medium">
                <i class="bi bi-distribute-vertical me-2 text-primary fs-6"></i>{% translate "Planéité / Arasement" %}
            </span>
            <span>
                {% if leaf.joint_level == 'flush' %}
                    <span class="badge bg-success-subtle text-success border border-success-subtle px-2.5 py-1.5 rounded-pill">
                        <i class="bi bi-check-circle-fill me-1"></i>{% translate "Bien à niveau / Arasé" %}
                    </span>
                {% elif leaf.joint_level == 'slight_bump_hollow' %}
                    <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle px-2.5 py-1.5 rounded-pill">
                        <i class="bi bi-exclamation-circle-fill me-1"></i>{% translate "Léger décalage / Creux ou bosse" %}
                    </span>
                {% elif leaf.joint_level == 'step' %}
                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2.5 py-1.5 rounded-pill">
                        <i class="bi bi-exclamation-triangle-fill me-1"></i>{% translate "Ressaut important (> 1-2 cm)" %}
                    </span>
                {% else %}
                    {{ leaf.get_joint_level_display|default:leaf.joint_level }}
                {% endif %}
            </span>
        </li>
        {% endif %}

        <!-- 2. Joints de raccordement -->
        {% if leaf.joint_sealing %}
        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center px-0 py-2.5 border-bottom-0">
            <span class="text-secondary fw-medium">
                <i class="bi bi-bounding-box me-2 text-info fs-6"></i>{% translate "Joints de raccordement" %}
            </span>
            <span>
                {% if leaf.joint_sealing == 'good' %}
                    <span class="badge bg-success-subtle text-success border border-success-subtle px-2.5 py-1.5 rounded-pill">
                        <i class="bi bi-check-circle-fill me-1"></i>{% translate "Joints bien fermés / scellés" %}
                    </span>
                {% elif leaf.joint_sealing == 'cracked' %}
                    <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle px-2.5 py-1.5 rounded-pill">
                        <i class="bi bi-exclamation-circle-fill me-1"></i>{% translate "Joints fissurés ou abîmés" %}
                    </span>
                {% elif leaf.joint_sealing == 'open' %}
                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2.5 py-1.5 rounded-pill">
                        <i class="bi bi-exclamation-triangle-fill me-1"></i>{% translate "Joints ouverts ou décollés" %}
                    </span>
                {% else %}
                    {{ leaf.get_joint_sealing_display|default:leaf.joint_sealing }}
                {% endif %}
            </span>
        </li>
        {% endif %}

        <!-- 3. Fissuration -->
        {% if leaf.cracking %}
        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center px-0 py-2.5 border-bottom-0">
            <span class="text-secondary fw-medium">
                <i class="bi bi-activity me-2 text-warning fs-6"></i>{% translate "Fissuration" %}
            </span>
            <span>
                {% if leaf.cracking == 'none' %}
                    <span class="badge bg-success-subtle text-success border border-success-subtle px-2.5 py-1.5 rounded-pill">
                        <i class="bi bi-check-circle-fill me-1"></i>{% translate "Aucune fissure" %}
                    </span>
                {% elif leaf.cracking == 'minor' %}
                    <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle px-2.5 py-1.5 rounded-pill">
                        <i class="bi bi-exclamation-circle-fill me-1"></i>{% translate "Petites fissures / Faïençage" %}
                    </span>
                {% elif leaf.cracking == 'major' %}
                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2.5 py-1.5 rounded-pill">
                        <i class="bi bi-exclamation-triangle-fill me-1"></i>{% translate "Grosses fissures / Fissures ouvertes" %}
                    </span>
                {% else %}
                    {{ leaf.get_cracking_display|default:leaf.cracking }}
                {% endif %}
            </span>
        </li>
        {% endif %}

        <!-- 4. Évacuation des eaux pluviales -->
        {% if leaf.water_drainage %}
        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center px-0 py-2.5 border-bottom-0">
            <span class="text-secondary fw-medium">
                <i class="bi bi-droplet-half me-2 text-primary fs-6"></i>{% translate "Évacuation des eaux pluviales" %}
            </span>
            <span>
                {% if leaf.water_drainage == 'good' %}
                    <span class="badge bg-success-subtle text-success border border-success-subtle px-2.5 py-1.5 rounded-pill">
                        <i class="bi bi-check-circle-fill me-1"></i>{% translate "Bon écoulement / Pas de flaque" %}
                    </span>
                {% elif leaf.water_drainage == 'stagnation' %}
                    <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle px-2.5 py-1.5 rounded-pill">
                        <i class="bi bi-droplet-fill me-1"></i>{% translate "Eau stagnante / Flaque d'eau" %}
                    </span>
                {% elif leaf.water_drainage == 'not_checked' %}
                    <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle px-2.5 py-1.5 rounded-pill">
                        <i class="bi bi-question-circle me-1"></i>{% translate "Non vérifié" %}
                    </span>
                {% else %}
                    {{ leaf.get_water_drainage_display|default:leaf.water_drainage }}
                {% endif %}
            </span>
        </li>
        {% endif %}
    </ul>
</div>
{% endif %}
{% endwith %}