{% load i18n static %}

{% 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-signpost-2-fill me-2"></i>{% translate "Constats spécifiques signalisation" %}
    </h6>
    
    <!-- Panneau & SVG -->
    <div class="d-flex align-items-center gap-3 p-2 bg-white rounded-3 border mb-3">
        <div style="width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;">
            <img src="/static/assets/road_signs/2025/{% if leaf.verified_signpanel_type %}{{ leaf.verified_signpanel_type.code|upper }}{% elif insp.asset.signpanel_type %}{{ insp.asset.signpanel_type.code|upper }}{% else %}C1{% endif %}.svg" 
                 alt="{% if leaf.verified_signpanel_type %}{{ leaf.verified_signpanel_type.code }}{% elif insp.asset.signpanel_type %}{{ insp.asset.signpanel_type.code }}{% else %}{% translate 'Panneau' %}{% endif %}" 
                 style="max-width: 44px; max-height: 44px; object-fit: contain;"
                 onerror="this.onerror=null; this.src='/static/assets/road_signs/2025/' + (this.alt || 'default') + '.png';">
        </div>
        <div class="flex-grow-1 overflow-hidden">
            <span class="small text-muted d-block">{% translate "Type de panneau" %}</span>
            <span class="fw-bold text-dark fs-6">
                {% if leaf.verified_signpanel_type %}
                    {{ leaf.verified_signpanel_type.code }} - {{ leaf.verified_signpanel_type.get_name }}
                {% elif insp.asset.signpanel_type %}
                    {{ insp.asset.signpanel_type.code }} - {{ insp.asset.signpanel_type.get_name }}
                {% else %}
                    {% translate "Non spécifié" %}
                {% endif %}
            </span>
        </div>
    </div>

    <ul class="list-group list-group-flush bg-transparent">
        <!-- État de propreté & Visibilité -->
        {% if leaf.verified_cleanliness %}
        <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-info fs-6"></i>{% translate "Propreté & Visibilité" %}
            </span>
            <span>
                {% if leaf.verified_cleanliness == 'clean' %}
                    <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 "Propre / Bon état" %}
                    </span>
                {% elif leaf.verified_cleanliness == 'dirty' %}
                    <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-brush-fill me-1"></i>{% translate "Sale / Mousse (À nettoyer)" %}
                    </span>
                {% elif leaf.verified_cleanliness == 'vegetation' %}
                    <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle px-2.5 py-1.5 rounded-pill" style="color: #fd7e14 !important; border-color: #fd7e14 !important;">
                        <i class="bi bi-tree-fill me-1"></i>{% translate "Masqué par végétation" %}
                    </span>
                {% elif leaf.verified_cleanliness == 'vandalized' %}
                    <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-octagon-fill me-1"></i>{% translate "Tagué / Dégradé" %}
                    </span>
                {% elif leaf.verified_cleanliness == 'missing' %}
                    <span class="badge bg-dark-subtle text-dark border border-dark-subtle px-2.5 py-1.5 rounded-pill">
                        <i class="bi bi-x-circle-fill me-1"></i>{% translate "Panneau absent / Manquant" %}
                    </span>
                {% else %}
                    {{ leaf.get_verified_cleanliness_display|default:leaf.verified_cleanliness }}
                {% endif %}
            </span>
        </li>
        {% endif %}

        <!-- Texte additionnel / Panonceau -->
        {% if leaf.verified_signpanel_text %}
        <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-chat-left-text me-2 text-secondary fs-6"></i>{% translate "Mention / Panonceau" %}
            </span>
            <span class="badge bg-light text-dark border px-3 py-1.5 fs-6 shadow-sm">
                « {{ leaf.verified_signpanel_text }} »
            </span>
        </li>
        {% endif %}

        <!-- IA Validation -->
        {% if leaf.ai_detected_code %}
        <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-stars me-2 text-warning fs-6"></i>{% translate "Détection IA" %}
            </span>
            <span class="badge bg-info-subtle text-info-emphasis border border-info-subtle px-2.5 py-1.5 rounded-pill">
                {{ leaf.ai_detected_code }} {% if leaf.ai_confidence %}({{ leaf.ai_confidence|floatformat:0 }}%){% endif %}
            </span>
        </li>
        {% endif %}
    </ul>
</div>
{% endif %}
{% endwith %}