{% load i18n %}
{% load static %}

<div class="territory-kpis-widget mb-2">
    <div class="d-flex align-items-center justify-content-between mb-2 flex-wrap gap-2">
        <div class="d-flex align-items-center gap-2">
            <div class="kpi-header-icon">
                <i class="bi bi-geo-alt-fill text-primary"></i>
            </div>
            <div>
                <h5 class="mb-0 fw-bold text-dark" style="letter-spacing: -0.01em;">
                    {% translate "Patrimoine du Territoire" %} — {{ organization_name|default:"Court-Saint-Étienne" }}
                </h5>
                <small class="text-muted">
                    {% translate "Inventaire géoréférencé et suivi d'exploitation en temps réel" %}
                </small>
            </div>
        </div>
        <div class="d-flex align-items-center gap-2">
            <span class="badge rounded-pill bg-light text-dark border px-3 py-2 fw-semibold" style="font-size: 0.85rem;">
                <i class="bi bi-layers-fill text-primary me-1"></i>
                <strong class="text-primary">{{ territory_kpis.grand_total|default:"11 160" }}</strong> {% translate "assets gérés" %}
            </span>
            <span class="badge rounded-pill bg-success-subtle text-success-emphasis border border-success-subtle px-3 py-2 fw-semibold" style="font-size: 0.85rem;">
                <i class="bi bi-activity me-1"></i>
                <strong class="text-success">{{ territory_kpis.recent_actions_count|default:"97" }}</strong> {% translate "actions (90j)" %}
            </span>
        </div>
    </div>

    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-5 g-3">
        <!-- 1. Nature & Espaces Verts -->
        <div class="col">
            <a href="{% url 'assets:index' %}?thematic=nature" class="text-decoration-none">
                <div class="card h-100 kpi-card kpi-card-nature border-0 shadow-sm">
                    <div class="card-body p-3 d-flex flex-column justify-content-between">
                        <div class="d-flex align-items-start justify-content-between mb-2">
                            <span class="kpi-badge kpi-badge-nature">
                                <i class="bi bi-tree-fill"></i> {% translate "Nature" %}
                            </span>
                            <span class="kpi-pill-total">{{ territory_kpis.nature_total|default:"3 354" }}</span>
                        </div>
                        <div class="kpi-stat-value text-dark fw-bold">
                            {{ territory_kpis.nature_trees|default:"2 722" }}
                            <span class="kpi-stat-unit">{% translate "arbres" %}</span>
                        </div>
                        <div class="kpi-details mt-2 text-secondary">
                            <div><i class="bi bi-flower1 me-1"></i><strong>{{ territory_kpis.nature_surfaces|default:"565" }}</strong> {% translate "espaces verts" %}</div>
                            <div><i class="bi bi-bench me-1"></i><strong>{{ territory_kpis.nature_benches|default:"67" }}</strong> {% translate "bancs" %}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- 2. Éclairage Public -->
        <div class="col">
            <a href="{% url 'assets:index' %}?thematic=publiclighting" class="text-decoration-none">
                <div class="card h-100 kpi-card kpi-card-lighting border-0 shadow-sm">
                    <div class="card-body p-3 d-flex flex-column justify-content-between">
                        <div class="d-flex align-items-start justify-content-between mb-2">
                            <span class="kpi-badge kpi-badge-lighting">
                                <i class="bi bi-lightbulb-fill"></i> {% translate "Éclairage" %}
                            </span>
                            <span class="kpi-pill-total">{{ territory_kpis.lighting_total|default:"2 490" }}</span>
                        </div>
                        <div class="kpi-stat-value text-dark fw-bold">
                            {{ territory_kpis.lighting_poles|default:"1 922" }}
                            <span class="kpi-stat-unit">{% translate "candélabres" %}</span>
                        </div>
                        <div class="kpi-details mt-2 text-secondary">
                            <div><i class="bi bi-cpu me-1"></i><strong>{{ territory_kpis.lighting_cabinets|default:"568" }}</strong> {% translate "armoires élec." %}</div>
                            <div><i class="bi bi-check2-circle me-1 text-success"></i><strong>100%</strong> {% translate "télégestionné" %}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- 3. Signalisation & Stationnement -->
        <div class="col">
            <a href="{% url 'assets:index' %}?thematic=sign" class="text-decoration-none">
                <div class="card h-100 kpi-card kpi-card-sign border-0 shadow-sm">
                    <div class="card-body p-3 d-flex flex-column justify-content-between">
                        <div class="d-flex align-items-start justify-content-between mb-2">
                            <span class="kpi-badge kpi-badge-sign">
                                <i class="bi bi-signpost-2-fill"></i> {% translate "Mobilité" %}
                            </span>
                            <span class="kpi-pill-total">{{ territory_kpis.sign_total|default:"2 000" }}</span>
                        </div>
                        <div class="kpi-stat-value text-dark fw-bold">
                            {{ territory_kpis.sign_poles|default:"1 865" }}
                            <span class="kpi-stat-unit">{% translate "supports" %}</span>
                        </div>
                        <div class="kpi-details mt-2 text-secondary">
                            <div><i class="bi bi-p-square me-1"></i><strong>{{ territory_kpis.parking_locations|default:"64" }}</strong> {% translate "parkings" %}</div>
                            <div><i class="bi bi-bicycle me-1"></i><strong>{{ territory_kpis.parking_spots|default:"43" }}</strong> {% translate "places / vélos" %}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- 4. Voirie & Assainissement -->
        <div class="col">
            <a href="{% url 'assets:index' %}?thematic=roads" class="text-decoration-none">
                <div class="card h-100 kpi-card kpi-card-roads border-0 shadow-sm">
                    <div class="card-body p-3 d-flex flex-column justify-content-between">
                        <div class="d-flex align-items-start justify-content-between mb-2">
                            <span class="kpi-badge kpi-badge-roads">
                                <i class="bi bi-water"></i> {% translate "Voirie & Eaux" %}
                            </span>
                            <span class="kpi-pill-total">{{ territory_kpis.roads_total|default:"3 172" }}</span>
                        </div>
                        <div class="kpi-stat-value text-dark fw-bold">
                            {{ territory_kpis.roads_drains|default:"2 744" }}
                            <span class="kpi-stat-unit">{% translate "avaloirs" %}</span>
                        </div>
                        <div class="kpi-details mt-2 text-secondary">
                            <div><i class="bi bi-sign-turn-right me-1"></i><strong>{{ territory_kpis.roads_streets|default:"177" }}</strong> {% translate "chaussées" %}</div>
                            <div><i class="bi bi-trash3 me-1"></i><strong>{{ territory_kpis.clean_bins|default:"67" }}</strong> {% translate "bulles / bacs" %}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- 5. Bâtiments & Ouvrages d'art -->
        <div class="col">
            <a href="{% url 'assets:index' %}?thematic=structures" class="text-decoration-none">
                <div class="card h-100 kpi-card kpi-card-structures border-0 shadow-sm">
                    <div class="card-body p-3 d-flex flex-column justify-content-between">
                        <div class="d-flex align-items-start justify-content-between mb-2">
                            <span class="kpi-badge kpi-badge-structures">
                                <i class="bi bi-building"></i> {% translate "Ouvrages & Bât." %}
                            </span>
                            <span class="kpi-pill-total">{{ territory_kpis.structures_total|default:"144" }}</span>
                        </div>
                        <div class="kpi-stat-value text-dark fw-bold">
                            {{ territory_kpis.structures_count|default:"74" }}
                            <span class="kpi-stat-unit">{% translate "ouvrages d'art" %}</span>
                        </div>
                        <div class="kpi-details mt-2 text-secondary">
                            <div><i class="bi bi-bank me-1"></i><strong>{{ territory_kpis.buildings_count|default:"70" }}</strong> {% translate "bâtiments com." %}</div>
                            <div><i class="bi bi-shield-check me-1 text-primary"></i><strong>100%</strong> {% translate "cartographiés" %}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>