{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block extra_head %}
<style>
    .nature-kpi-card {
        border-radius: 10px;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        border: 1px solid #e2e8f0;
        background: #ffffff;
    }
    .nature-kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    }
    .nature-kpi-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
    }
    .nature-tab-content {
        background: #ffffff;
        border: 1px solid #dee2e6;
        border-top: none;
        border-radius: 0 0 8px 8px;
        padding: 1rem;
    }
    #map {
        width: 100%;
        height: calc(100vh - 230px);
        min-height: 520px;
        border-radius: 8px;
    }
    .map-card-wrapper {
        position: sticky;
        top: 1rem;
    }
    .map-layer-pill {
        font-size: 0.78rem;
        cursor: pointer;
        user-select: none;
    }
</style>
{% endblock extra_head %}

{% block content %}
<div class="container-fluid py-3">

    <!-- Breadcrumb & Navigation -->
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{% url 'assets:nature_index' %}" class="text-decoration-none">{% translate "Nature" %}</a></li>
                <li class="breadcrumb-item"><a href="{% url 'assets:nature_locations' %}" class="text-decoration-none">{% translate "Voiries" %}</a></li>
                <li class="breadcrumb-item active fw-semibold" aria-current="page">{{ section.code }}</li>
            </ol>
        </nav>
        <div class="d-flex gap-2">
            <a href="{% url 'assets:nature_index' %}" class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>{% translate "Retour à la carte" %}
            </a>
            {% if section.lon and section.lat %}
                <a href="https://www.google.com/maps?cbll={{ section.lat|floatformat:'6u'}},{{ section.lon|floatformat:'6u'}}&cbp=12,0,0,0,5&layer=c&panoid="
                   target="_blank" class="btn btn-sm btn-outline-primary" style="text-decoration: none;">
                    <img src="{% static 'common/google-street-view-logo.png' %}" alt="{% translate 'Street View' %}" height="18" class="me-1">
                    {% translate "View in Google Street View" %}
                </a>
            {% endif %}
        </div>
    </div>

    <!-- Header Card -->
    <div class="card shadow-sm mb-4 border-0" style="background: linear-gradient(to right, #f8fafc, #ffffff); border-left: 5px solid #16a34a !important;">
        <div class="card-body p-3 p-md-4">
            <div class="row align-items-center g-3">
                <div class="col-lg-8">
                    <div class="d-flex align-items-center gap-3">
                        <div class="rounded-circle bg-success-subtle p-2 d-flex align-items-center justify-content-center text-success" style="width: 52px; height: 52px; min-width: 52px;">
                            <i class="bi bi-tree-fill" style="font-size: 1.8rem;"></i>
                        </div>
                        <div>
                            <div class="d-flex align-items-center gap-2 flex-wrap">
                                <h1 class="h4 mb-0 fw-bold text-dark">
                                    {{ section.code }} <span class="text-muted fw-normal">&mdash; {{ section.get_name }}</span>
                                </h1>
                            </div>
                            <div class="d-flex align-items-center gap-2 mt-2 flex-wrap text-muted small">
                                {% if section.municipality %}
                                    <span><i class="bi bi-geo-alt-fill text-danger me-1"></i>{{ section.municipality }}</span>
                                    <span>&bull;</span>
                                {% endif %}
                                <span>
                                    <strong>{% translate "Zone:" %}</strong>
                                    {% if section.zone %}
                                        <span class="badge bg-secondary-subtle text-secondary border">Zone {{ section.zone }}</span>
                                    {% else %}
                                        <span class="text-muted">{% translate "Non définie" %}</span>
                                    {% endif %}
                                </span>
                                <span>&bull;</span>
                                <span>
                                    <strong>{% translate "Autoroute:" %}</strong>
                                    {% if section.is_highway %}
                                        <span class="badge bg-primary-subtle text-primary border">{% translate "Oui" %}</span>
                                    {% else %}
                                        <span class="badge bg-light text-secondary border">{% translate "Non" %}</span>
                                    {% endif %}
                                </span>
                                {% if section.category %}
                                    <span>&bull;</span>
                                    <span><i class="bi bi-tag me-1"></i>{{ section.category.get_name }}</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    {% if section.parent_location or section.child_locations.exists %}
                    <div class="mt-2 pt-2 border-top d-flex gap-3 flex-wrap small text-muted">
                        {% if section.parent_location %}
                            <div>
                                <i class="bi bi-diagram-2 me-1"></i>{% translate "Section parente :" %}
                                <a href="{{ section.parent_location.get_absolute_url }}" class="fw-semibold text-decoration-none">
                                    {{ section.parent_location.code }} - {{ section.parent_location.get_name }}
                                </a>
                            </div>
                        {% endif %}
                        {% if section.child_locations.exists %}
                            <div>
                                <i class="bi bi-diagram-3 me-1"></i>{% translate "Sous-sections :" %}
                                {% for child in section.child_locations.all %}
                                    <a href="{{ child.get_absolute_url }}" class="badge bg-light text-dark border text-decoration-none me-1">
                                        {{ child.code }}
                                    </a>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>

                <div class="col-lg-4 text-lg-end">
                    <div class="d-inline-flex gap-2 flex-wrap justify-content-lg-end">
                        <div class="badge bg-light text-dark border p-2 text-start">
                            <span class="d-block text-muted" style="font-size: 0.72rem;">{% translate "Total équipements" %}</span>
                            <span class="fw-bold fs-6">{{ total_assets_count }}</span>
                        </div>
                        <div class="badge bg-light text-dark border p-2 text-start">
                            <span class="d-block text-muted" style="font-size: 0.72rem;">{% translate "Interventions" %}</span>
                            <span class="fw-bold fs-6 text-primary">{{ interventions|length }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- KPI Metric Cards Grid -->
    <div class="row g-3 mb-4">
        <!-- 1. Nombre d'arbres -->
        <div class="col-sm-6 col-xl-3">
            <div class="card h-100 nature-kpi-card shadow-sm p-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="nature-kpi-icon bg-success-subtle text-success">
                        <i class="bi bi-tree-fill"></i>
                    </div>
                    <div>
                        <div class="text-muted small fw-semibold">{% translate "Nombre d'arbres:" %}</div>
                        <div class="fs-4 fw-bold text-dark">{{ trees_count }}</div>
                        <div class="text-muted" style="font-size: 0.75rem;">
                            {{ trees_active_count }} {% translate "actifs" %}
                            {% if trees_remarkable_count %}
                                &bull; <span class="text-warning fw-semibold"><i class="bi bi-star-fill text-warning"></i> {{ trees_remarkable_count }} {% translate "remarquables" %}</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 2. Superficie totale surfaces vertes -->
        <div class="col-sm-6 col-xl-3">
            <div class="card h-100 nature-kpi-card shadow-sm p-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="nature-kpi-icon bg-primary-subtle text-primary">
                        <i class="bi bi-grid-fill"></i>
                    </div>
                    <div>
                        <div class="text-muted small fw-semibold">{% translate "Surfaces végétales:" %}</div>
                        <div class="fs-4 fw-bold text-dark">{{ total_green_surface|floatformat:1 }} <span class="fs-6 fw-normal text-muted">m²</span></div>
                        <div class="text-muted" style="font-size: 0.75rem;">
                            {{ green_surfaces_count }} {% translate "surfaces au total" %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 3. Superficie massif arboré -->
        <div class="col-sm-6 col-xl-3">
            <div class="card h-100 nature-kpi-card shadow-sm p-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="nature-kpi-icon bg-warning-subtle text-warning-emphasis">
                        <i class="bi bi-flower1"></i>
                    </div>
                    <div>
                        <div class="text-muted small fw-semibold">{% translate "Superficie massif arboré:" %}</div>
                        <div class="fs-4 fw-bold text-dark">{{ surface_massif_arbore|floatformat:1 }} <span class="fs-6 fw-normal text-muted">m²</span></div>
                        <div class="text-muted" style="font-size: 0.75rem;">
                            {{ massif_arbore_count }} {% translate "massifs arborés" %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 4. Superficie pré fleuri -->
        <div class="col-sm-6 col-xl-3">
            <div class="card h-100 nature-kpi-card shadow-sm p-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="nature-kpi-icon bg-info-subtle text-info-emphasis">
                        <i class="bi bi-flower2"></i>
                    </div>
                    <div>
                        <div class="text-muted small fw-semibold">{% translate "Superficie pré fleuri:" %}</div>
                        <div class="fs-4 fw-bold text-dark">{{ surface_pre_fleuri|floatformat:1 }} <span class="fs-6 fw-normal text-muted">m²</span></div>
                        <div class="text-muted" style="font-size: 0.75rem;">
                            {{ pre_fleuri_count }} {% translate "prés fleuris" %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Typology breakdown (if available) -->
    {% if surfaces_by_type %}
    <div class="card shadow-sm mb-4 border-0">
        <div class="card-body p-3">
            <div class="d-flex align-items-center justify-content-between mb-2">
                <span class="small fw-bold text-secondary text-uppercase"><i class="bi bi-pie-chart-fill me-1"></i>{% translate "Répartition des surfaces végétales" %}</span>
                <span class="small text-muted">{{ total_green_surface|floatformat:1 }} m²</span>
            </div>
            <!-- Progress bar -->
            <div class="progress mb-2" style="height: 10px; border-radius: 6px;">
                {% for st in surfaces_by_type %}
                    <div class="progress-bar" role="progressbar"
                         style="width: {{ st.percent }}%; background-color: {{ st.color }};"
                         title="{{ st.name }}: {{ st.total_area|floatformat:1 }} m² ({{ st.percent }}%)"
                         aria-valuenow="{{ st.percent }}" aria-valuemin="0" aria-valuemax="100"></div>
                {% endfor %}
            </div>
            <!-- Badges -->
            <div class="d-flex flex-wrap gap-2 mt-2">
                {% for st in surfaces_by_type %}
                    <span class="badge bg-light text-dark border d-inline-flex align-items-center gap-1 py-1 px-2" style="font-size: 0.8rem;">
                        <span class="d-inline-block rounded-circle" style="width: 8px; height: 8px; background-color: {{ st.color }};"></span>
                        <span class="fw-semibold">{{ st.name }}</span>:
                        <span class="text-muted">{{ st.total_area|floatformat:1 }} m² ({{ st.count }})</span>
                    </span>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Main Content Layout (Split View: Tabs/Tables on Left, Interactive Map on Right) -->
    <div class="row g-4">
        <!-- Left Column: Tabs & Tables -->
        <div class="col-lg-7 col-xl-7">
            <!-- Tabs Navigation -->
            <ul class="nav nav-tabs" id="natureLocationTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active fw-semibold" id="surfaces-tab" data-bs-toggle="tab" data-bs-target="#surfaces-pane" type="button" role="tab">
                        <i class="bi bi-grid-fill text-success me-1"></i>{% translate "Surfaces vertes" %}
                        <span class="badge bg-success-subtle text-success ms-1">{{ green_surfaces_count }}</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link fw-semibold" id="trees-tab" data-bs-toggle="tab" data-bs-target="#trees-pane" type="button" role="tab">
                        <i class="bi bi-tree-fill text-success me-1"></i>{% translate "Arbres" %}
                        <span class="badge bg-success-subtle text-success ms-1">{{ trees_count }}</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link fw-semibold" id="equipments-tab" data-bs-toggle="tab" data-bs-target="#equipments-pane" type="button" role="tab">
                        <i class="bi bi-flower3 text-info me-1"></i>{% translate "Arbustes & Bancs" %}
                        <span class="badge bg-secondary-subtle text-secondary ms-1">{{ shrubs_count|add:benches_count }}</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link fw-semibold" id="interventions-tab" data-bs-toggle="tab" data-bs-target="#interventions-pane" type="button" role="tab">
                        <i class="bi bi-tools text-primary me-1"></i>{% translate "Interventions" %}
                        <span class="badge bg-primary-subtle text-primary ms-1">{{ interventions|length }}</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link fw-semibold" id="documents-tab" data-bs-toggle="tab" data-bs-target="#documents-pane" type="button" role="tab">
                        <i class="bi bi-files text-secondary me-1"></i>{% translate "Documents" %}
                        <span class="badge bg-secondary-subtle text-secondary ms-1">{{ documents|length }}</span>
                    </button>
                </li>
            </ul>

            <!-- Tabs Content -->
            <div class="tab-content nature-tab-content shadow-sm" id="natureLocationTabsContent">
                
                <!-- TAB 1: Surfaces végétalisées -->
                <div class="tab-pane fade show active" id="surfaces-pane" role="tabpanel" aria-labelledby="surfaces-tab">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0" style="font-size: 0.9rem;">
                            <thead class="table-light">
                                <tr>
                                    <th>{% translate "Code" %}</th>
                                    <th>{% translate "Typologie / Modèle" %}</th>
                                    <th class="text-end">{% translate "Superficie" %}</th>
                                    <th>{% translate "Pente / Tonte" %}</th>
                                    <th>{% translate "Bulbes" %}</th>
                                    <th>{% translate "Statut" %}</th>
                                    <th class="text-end">{% translate "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for gs in green_surfaces %}
                                <tr>
                                    <td class="fw-bold">
                                        <a href="{% url 'assets:nature_assets_detail' 'naturegreensurface' gs.id %}" class="text-decoration-none">
                                            {{ gs.code }}
                                        </a>
                                    </td>
                                    <td>
                                        <span class="d-inline-block rounded-circle me-1" style="width: 8px; height: 8px; background-color: {{ gs.model.color|default:'#4caf50' }};"></span>
                                        {{ gs.model.get_name|default:"-" }}
                                    </td>
                                    <td class="text-end fw-semibold">
                                        {% if gs.surface_area %}{{ gs.surface_area|floatformat:1 }} m²{% else %}<span class="text-muted">-</span>{% endif %}
                                    </td>
                                    <td>
                                        <span class="small text-muted">
                                            {% if gs.slope %}{{ gs.slope }}%{% else %}-{% endif %} /
                                            {% if gs.mower_frenquency %}{{ gs.mower_frenquency }}x/an{% else %}-{% endif %}
                                        </span>
                                    </td>
                                    <td>
                                        {% if gs.bulb_types %}
                                            <span class="badge bg-info-subtle text-info border">{{ gs.bulb_types|length }} bulbe(s)</span>
                                        {% else %}
                                            <span class="text-muted small">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="badge {% if gs.status == 'active' %}bg-success{% else %}bg-secondary{% endif %}">
                                            {{ gs.get_status_display }}
                                        </span>
                                    </td>
                                    <td class="text-end">
                                        <div class="btn-group btn-group-sm">
                                            {% if gs.lon and gs.lat %}
                                            <button type="button" class="btn btn-outline-success" onclick="zoomToAsset({{ gs.lon|stringformat:'f' }}, {{ gs.lat|stringformat:'f' }}, '{{ gs.code }}')" title="{% translate 'Centrer sur la carte' %}">
                                                <i class="bi bi-geo-alt"></i>
                                            </button>
                                            {% endif %}
                                            <a href="{% url 'assets:nature_assets_detail' 'naturegreensurface' gs.id %}" class="btn btn-outline-primary" title="{% translate 'Détail' %}">
                                                <i class="bi bi-arrow-right"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">
                                        <i class="bi bi-grid mb-2 d-block fs-3 text-muted"></i>
                                        {% translate "Aucune surface végétalisée enregistrée sur cette voirie." %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- TAB 2: Arbres -->
                <div class="tab-pane fade" id="trees-pane" role="tabpanel" aria-labelledby="trees-tab">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0" style="font-size: 0.9rem;">
                            <thead class="table-light">
                                <tr>
                                    <th>{% translate "Code" %}</th>
                                    <th>{% translate "Essence / Modèle" %}</th>
                                    <th>{% translate "Stade" %}</th>
                                    <th>{% translate "Vitalité" %}</th>
                                    <th>{% translate "Risque" %}</th>
                                    <th>{% translate "Statut" %}</th>
                                    <th class="text-end">{% translate "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for tree in trees %}
                                <tr>
                                    <td class="fw-bold">
                                        <a href="{% url 'assets:nature_assets_detail' 'naturetree' tree.id %}" class="text-decoration-none">
                                            {{ tree.code }}
                                        </a>
                                        {% if tree.is_remarkable %}
                                            <i class="bi bi-star-fill text-warning ms-1" title="{% translate 'Arbre remarquable' %}"></i>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div>{{ tree.model.get_name|default:"-" }}</div>
                                        {% if tree.model.scientific_name %}
                                            <div class="small text-muted fst-italic">{{ tree.model.scientific_name }}</div>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="small">{{ tree.get_development_stage_display|default:"-" }}</span>
                                    </td>
                                    <td>
                                        {% if tree.vitality == 'strong' %}
                                            <span class="badge bg-success-subtle text-success border">{% translate "Forte" %}</span>
                                        {% elif tree.vitality == 'normal' %}
                                            <span class="badge bg-info-subtle text-info border">{% translate "Normale" %}</span>
                                        {% elif tree.vitality == 'weak' %}
                                            <span class="badge bg-warning-subtle text-warning-emphasis border">{% translate "Faible" %}</span>
                                        {% elif tree.vitality == 'declining' or tree.vitality == 'dead' %}
                                            <span class="badge bg-danger">{{ tree.get_vitality_display }}</span>
                                        {% else %}
                                            <span class="text-muted small">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if tree.risk_level == 'high' or tree.risk_level == 'imminent_danger' %}
                                            <span class="badge bg-danger">{{ tree.get_risk_level_display }}</span>
                                        {% elif tree.risk_level == 'moderate' %}
                                            <span class="badge bg-warning text-dark">{{ tree.get_risk_level_display }}</span>
                                        {% else %}
                                            <span class="small text-muted">{{ tree.get_risk_level_display|default:"Faible" }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="badge {% if tree.status == 'active' %}bg-success{% else %}bg-secondary{% endif %}">
                                            {{ tree.get_status_display }}
                                        </span>
                                    </td>
                                    <td class="text-end">
                                        <div class="btn-group btn-group-sm">
                                            {% if tree.lon and tree.lat %}
                                            <button type="button" class="btn btn-outline-success" onclick="zoomToAsset({{ tree.lon|stringformat:'f' }}, {{ tree.lat|stringformat:'f' }}, '{{ tree.code }}')" title="{% translate 'Centrer sur la carte' %}">
                                                <i class="bi bi-geo-alt"></i>
                                            </button>
                                            {% endif %}
                                            <a href="{% url 'assets:nature_assets_detail' 'naturetree' tree.id %}" class="btn btn-outline-primary" title="{% translate 'Détail' %}">
                                                <i class="bi bi-arrow-right"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">
                                        <i class="bi bi-tree mb-2 d-block fs-3 text-muted"></i>
                                        {% translate "Aucun arbre enregistré sur cette voirie." %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- TAB 3: Arbustes & Bancs -->
                <div class="tab-pane fade" id="equipments-pane" role="tabpanel" aria-labelledby="equipments-tab">
                    <!-- Arbustes -->
                    <h6 class="fw-bold mb-2 text-dark"><i class="bi bi-flower3 text-success me-1"></i>{% translate "Arbustes" %} ({{ shrubs_count }})</h6>
                    <div class="table-responsive mb-4">
                        <table class="table table-hover align-middle mb-0" style="font-size: 0.9rem;">
                            <thead class="table-light">
                                <tr>
                                    <th>{% translate "Code" %}</th>
                                    <th>{% translate "Modèle" %}</th>
                                    <th>{% translate "Hauteur" %}</th>
                                    <th>{% translate "Taillé" %}</th>
                                    <th>{% translate "Statut" %}</th>
                                    <th class="text-end">{% translate "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for shrub in shrubs %}
                                <tr>
                                    <td class="fw-bold">
                                        <a href="{% url 'assets:nature_assets_detail' 'natureshrub' shrub.id %}" class="text-decoration-none">
                                            {{ shrub.code }}
                                        </a>
                                    </td>
                                    <td>{{ shrub.model.get_name|default:"-" }}</td>
                                    <td>{% if shrub.height %}{{ shrub.height }} m{% else %}-{% endif %}</td>
                                    <td>
                                        {% if shrub.trimmed %}<span class="badge bg-success-subtle text-success">{% translate "Oui" %}</span>{% else %}<span class="badge bg-light text-secondary">{% translate "Non" %}</span>{% endif %}
                                    </td>
                                    <td><span class="badge bg-secondary">{{ shrub.get_status_display }}</span></td>
                                    <td class="text-end">
                                        <div class="btn-group btn-group-sm">
                                            {% if shrub.lon and shrub.lat %}
                                            <button type="button" class="btn btn-outline-success" onclick="zoomToAsset({{ shrub.lon|stringformat:'f' }}, {{ shrub.lat|stringformat:'f' }}, '{{ shrub.code }}')">
                                                <i class="bi bi-geo-alt"></i>
                                            </button>
                                            {% endif %}
                                            <a href="{% url 'assets:nature_assets_detail' 'natureshrub' shrub.id %}" class="btn btn-outline-primary">
                                                <i class="bi bi-arrow-right"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr><td colspan="6" class="text-center text-muted py-2 small">{% translate "Aucun arbuste répertorié." %}</td></tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <!-- Bancs / Mobilier -->
                    <h6 class="fw-bold mb-2 text-dark"><i class="bi bi-inbox text-warning me-1"></i>{% translate "Mobilier & Bancs" %} ({{ benches_count }})</h6>
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0" style="font-size: 0.9rem;">
                            <thead class="table-light">
                                <tr>
                                    <th>{% translate "Code" %}</th>
                                    <th>{% translate "Modèle" %}</th>
                                    <th>{% translate "Matériau" %}</th>
                                    <th>{% translate "Dimensions" %}</th>
                                    <th>{% translate "Statut" %}</th>
                                    <th class="text-end">{% translate "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for bench in benches %}
                                <tr>
                                    <td class="fw-bold">
                                        <a href="{% url 'assets:nature_assets_detail' 'naturebench' bench.id %}" class="text-decoration-none">
                                            {{ bench.code }}
                                        </a>
                                    </td>
                                    <td>{{ bench.model.get_name|default:"-" }}</td>
                                    <td>{{ bench.material|default:"-" }}</td>
                                    <td>
                                        {% if bench.length or bench.width or bench.height %}
                                            {{ bench.length|default:"-" }} x {{ bench.width|default:"-" }} x {{ bench.height|default:"-" }} m
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                    <td><span class="badge bg-secondary">{{ bench.get_status_display }}</span></td>
                                    <td class="text-end">
                                        <div class="btn-group btn-group-sm">
                                            {% if bench.lon and bench.lat %}
                                            <button type="button" class="btn btn-outline-success" onclick="zoomToAsset({{ bench.lon|stringformat:'f' }}, {{ bench.lat|stringformat:'f' }}, '{{ bench.code }}')">
                                                <i class="bi bi-geo-alt"></i>
                                            </button>
                                            {% endif %}
                                            <a href="{% url 'assets:nature_assets_detail' 'naturebench' bench.id %}" class="btn btn-outline-primary">
                                                <i class="bi bi-arrow-right"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr><td colspan="6" class="text-center text-muted py-2 small">{% translate "Aucun banc ou mobilier répertorié." %}</td></tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- TAB 4: Interventions -->
                <div class="tab-pane fade" id="interventions-pane" role="tabpanel" aria-labelledby="interventions-tab">
                    <div class="table-responsive">
                        <table id="interventions-table" class="table table-hover align-middle mb-0"
                               data-pagination="true"
                               data-page-size="25">
                            <thead class="table-light">
                                <tr>
                                    <th data-field="actions" class="text-center" style="width: 50px;"></th>
                                    <th data-field="code">{% translate "Code" %}</th>
                                    <th data-field="title">{% translate "Titre" %}</th>
                                    <th data-field="begin_date">{% translate "Début" %}</th>
                                    <th data-field="status">{% translate "Statut" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for interv in interventions %}
                                <tr>
                                    <td class="text-center">
                                        <a href="{% url 'interventions:interventions_index' %}{{ interv.id }}" class="btn btn-sm btn-light detail-btn" title="{% translate 'Détail' %}">
                                            <i class="bi bi-info-circle"></i>
                                        </a>
                                    </td>
                                    <td class="fw-bold">{{ interv.code }}</td>
                                    <td>{{ interv.title }}</td>
                                    <td>{{ interv.begin_time|date:"d-m-Y H:i"|default:"-" }}</td>
                                    <td>
                                        <span class="badge bg-secondary">{{ interv.get_status_display }}</span>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-4">
                                        <i class="bi bi-tools mb-2 d-block fs-3 text-muted"></i>
                                        {% translate "Aucune intervention enregistrée sur cette localisation ou ses aménagements." %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- TAB 5: Documents -->
                <div class="tab-pane fade" id="documents-pane" role="tabpanel" aria-labelledby="documents-tab">
                    {% if documents %}
                    <div class="row g-3">
                        {% for document in documents %}
                        <div class="col-6 col-sm-4 col-md-3">
                            <div class="card h-100 shadow-sm border p-2 text-center">
                                <a href="{{ document.url }}" target="_blank" class="text-decoration-none text-dark">
                                    <div class="img-thumbnail d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 100%; height: 90px; overflow: hidden; background: #f8fafc;">
                                        {% if document.thumbnail_url %}
                                            <img src="{{ document.thumbnail_url }}" alt="{{ document.title }}" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                                        {% else %}
                                            <i class="bi bi-file-earmark-text fs-2 text-secondary"></i>
                                        {% endif %}
                                    </div>
                                    <div class="fw-semibold small text-truncate" title="{{ document.title }}">{{ document.title }}</div>
                                    {% if document.tag %}
                                        <span class="badge bg-primary-subtle text-primary border my-1" style="font-size: 0.7rem;">{{ document.tag }}</span>
                                    {% endif %}
                                    {% if document.date %}
                                        <div class="text-muted" style="font-size: 0.7rem;">{{ document.date|date:"d/m/Y" }}</div>
                                    {% endif %}
                                </a>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center text-muted py-5">
                        <i class="bi bi-folder2-open mb-2 d-block fs-2 text-muted"></i>
                        {% translate "Aucun document associé à cette localisation." %}
                    </div>
                    {% endif %}
                </div>

            </div>
        </div>

        <!-- Right Column: Interactive Map -->
        <div class="col-lg-5 col-xl-5">
            <div class="card shadow-sm border-0 map-card-wrapper">
                <div class="card-header bg-white py-2 px-3 d-flex align-items-center justify-content-between flex-wrap gap-2 border-bottom">
                    <span class="fw-bold text-dark d-flex align-items-center">
                        <i class="bi bi-geo-alt-fill text-success me-2"></i>{% translate "Carte & Aménagements" %}
                    </span>
                    <!-- Map Layer Controls / Legend -->
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        <div class="form-check form-check-inline m-0 map-layer-pill">
                            <input class="form-check-input" type="checkbox" id="toggle-surfaces" checked onchange="toggleNatureLayer('surfaces', this.checked)">
                            <label class="form-check-label" for="toggle-surfaces"><span class="badge bg-success" style="width: 8px; height: 8px; padding: 0; display: inline-block;"></span> {% translate "Surfaces" %}</label>
                        </div>
                        <div class="form-check form-check-inline m-0 map-layer-pill">
                            <input class="form-check-input" type="checkbox" id="toggle-trees" checked onchange="toggleNatureLayer('trees', this.checked)">
                            <label class="form-check-label" for="toggle-trees"><span class="badge bg-success" style="border-radius: 50%; width: 8px; height: 8px; padding: 0; display: inline-block;"></span> {% translate "Arbres" %}</label>
                        </div>
                        <div class="form-check form-check-inline m-0 map-layer-pill">
                            <input class="form-check-input" type="checkbox" id="toggle-equipments" checked onchange="toggleNatureLayer('shrubs', this.checked); toggleNatureLayer('benches', this.checked)">
                            <label class="form-check-label" for="toggle-equipments"><span class="badge bg-warning" style="border-radius: 50%; width: 8px; height: 8px; padding: 0; display: inline-block;"></span> {% translate "Autres" %}</label>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0 position-relative">
                    <div id="map"></div>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock content %}

{% block script %}
    {{ feature_lon|json_script:"lon_value" }}
    {{ feature_lat|json_script:"lat_value" }}
    {{ section_geojson|json_script:"section_geojson_value" }}
    {{ assets_geojson|json_script:"assets_geojson_value" }}
    <script>
        const feature_lon = JSON.parse(document.getElementById("lon_value").textContent);
        const feature_lat = JSON.parse(document.getElementById("lat_value").textContent);
        const section_geojson = JSON.parse(document.getElementById("section_geojson_value").textContent);
        const assets_geojson = JSON.parse(document.getElementById("assets_geojson_value").textContent);
    </script>
    <script src="{% static 'common/turf.min.js' %}"></script>
    <script src="{% static 'common/layer-switcher-control.js' %}"></script>
    <script src="{% static 'assets/nature_location_detail.js' %}"></script>
{% endblock script %}