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

{% block content %}
<div class="row mt-2" style="height: calc(100vh - 200px);">
    <div class="col-md-8" style="max-height: calc(100vh - 200px); overflow: auto;">
        <h3 class="h3">
            <i class="bi bi-rainbow"></i><span class="mx-2">{{ location.code}}</span> - <span class="mx-2">{{ location.get_name }}</span>
        </h3>
        <hr>
        <div class="row mb-4">
            <div class="col-md-8">
                <label class="mx-2">{% translate "Structure" %}:</label>{{ location.structure }}<br>
                
                <div class="my-2">
                    <label class="mx-2">{% translate "Localisation principale" %}:</label>
                    {% if location.is_main_location %}
                        <i class="bi bi-check-square"></i>
                    {% else %}
                        <a href="{{ location.structure.main_location.get_absolute_url }}">{{ location.structure.main_location }}</a>
                    {% endif %}
                    <br>
                    {% if location.parent_location %}
                        <label class="mx-2">{% translate "Parent" %}: </label>
                        <a href="{{ location.parent_location.get_absolute_url }}">{{ location.parent_location }}</a>
                    {% endif %}
                </div>
            </div>
            <div class="col-md-4">
                {% if location.lon %}
                    <a href="https://www.google.com/maps?cbll={{ location.lat|floatformat:'6u'}},{{ location.lon|floatformat:'6u'}}&cbp=12,0,0,0,5&layer=c&panoid=" target="_blank" style="text-decoration: none; font-size: 16px; display: flex; align-items: center;">
                        <img src="{% static 'common/google-street-view-logo.png' %}" alt="{% translate 'Street View' %}" height="20" style="margin-right: 8px;">
                        {% translate "View in Google Street View" %}
                    </a>
                {% endif %}
            </div>
        </div>
        
        <!-- Documents -->
        {% if location.is_main_location %}
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4>{% translate "Documents" %}</h4>
                <button onclick="" class="btn btn-light border-0" title="{% translate 'Ajouter' %}" data-bs-toggle="modal" data-bs-target="#addDocumentModal">
                    <i class="bi bi-plus-circle text-primary"></i>
                </button>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label class="mx-2">{% translate "Répertoire principal" %}:</label>
                        {% if document_folder %}
                        <span class="mx-2"><a href="/documents/?folder={{ document_folder.slug }}">{{ location.structure }}</a></span>
                        {% else %}
                        <span class="mx-2"><a href="/documents/?folder={{ location.structure.linked_folder }}">{{ location.structure }}</a></span>
                        {% endif %}
                    </div>
                </div>
                <div class="row">
                    {% if use_managed_documents %}
                        {# Nouveau système de gestion documentaire #}
                        {% for doc_info in main_documents %}
                            {% if doc_info.document %}
                            <div class="col-md-3 mb-3">
                                <div class="card h-100 shadow-sm border rounded-3">
                                    <div class="d-flex">
                                        <!-- Colonne gauche : contenu document -->
                                        <div class="flex-grow-1 p-2" style="min-width:0; overflow:hidden;">
                                            <div class="d-flex flex-column align-items-center mb-2">
                                                <!-- Badge centré -->
                                                <div class="text-muted" style="font-size: 0.85em;">
                                                    <span class="badge bg-primary">{{ doc_info.tag.name }}</span>
                                                </div>

                                                <!-- Image -->
                                                {% if doc_info.version and doc_info.version.file %}
                                                <a href="{% private_file_url doc_info.version 'file' %}" target="_blank" class="text-decoration-none w-100">
                                                    <div class="img-thumbnail d-flex justify-content-center align-items-center mt-1" style="width: 100%; height: 100px; overflow: hidden; background-color: #f8f9fa;">
                                                        {% if doc_info.version.thumbnail %}
                                                            <img src="{% private_file_url doc_info.version 'thumbnail' %}" alt="{{ doc_info.document.title }}"
                                                                 style="max-height: 100%; max-width: 100%; object-fit: contain;">
                                                        {% else %}
                                                            <span class="d-block w-100 px-2 text-muted"
                                                                    style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.85em;">
                                                                {{ doc_info.version.filename }}
                                                            </span>
                                                        {% endif %}
                                                    </div>
                                                </a>
                                                {% endif %}
                                            </div>

                                            <div class="text-muted text-start" style="font-size: 0.85em;">
                                                {{ doc_info.document.updated_at|timezone:"Europe/Paris"|date:"d/m/Y" }}<br>
                                                {% if doc_info.version %}v{{ doc_info.version.version_number }}{% endif %}
                                            </div>
                                        </div>

                                        <!-- Colonne droite : icônes -->
                                        <div class="d-flex flex-column justify-content-end align-items-center p-2" style="width: 40px; min-height: 100%;">
                                            <!-- Historique -->
                                            <button class="btn btn-sm p-0 border-0 bg-transparent mb-2" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#documentHistoryModal"
                                                data-tag-slug="{{ doc_info.tag.slug }}"
                                                data-location-id="{{ location.structure.id }}"
                                                data-use-managed="true"
                                                title="{% translate 'Historique' %}">
                                                <i class="bi bi-clock-history text-primary"></i>
                                            </button>
                                            <!-- Lien vers le document -->
                                            <a href="{% url 'documents:detail' doc_info.document.pk %}" 
                                               class="btn btn-sm p-0 border-0 bg-transparent mb-2"
                                               title="{% translate 'Détail' %}">
                                                <i class="bi bi-box-arrow-up-right text-secondary"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        {% endfor %}
                    {% else %}
                        {# Ancien système - StructureDocument #}
                        {% for document in main_documents %}
                            {% if document %}
                            <div class="col-md-3 mb-3">
                                <div class="card h-100 shadow-sm border rounded-3">
                                    <div class="d-flex">
                                        <!-- Colonne gauche : contenu document -->
                                        <div class="flex-grow-1 p-2" style="min-width:0; overflow:hidden;">
                                            <div class="d-flex flex-column align-items-center mb-2">
                                                <!-- Badge centré -->
                                                <div class="text-muted" style="font-size: 0.85em;">
                                                    <span class="badge bg-primary">{{ document.get_document_type_display }}</span>
                                                </div>

                                                <!-- Image -->
                                                <a href="{{ document.file.url }}" target="_blank" class="text-decoration-none w-100">
                                                    <div class="img-thumbnail d-flex justify-content-center align-items-center mt-1" style="width: 100%; height: 100px; overflow: hidden; background-color: #f8f9fa;">
                                                        {% if document.thumbnail %}
                                                            <img src="{{ document.thumbnail.url }}" alt="{{ document.filename }}"
                                                                 style="max-height: 100%; max-width: 100%; object-fit: contain;">
                                                        {% else %}
                                                            <span class="d-block w-100 px-2 text-muted"
                                                                    style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.85em;">
                                                                {{ document.filename }}
                                                            </span>
                                                        {% endif %}
                                                    </div>
                                                </a>
                                            </div>

                                            <div class="text-muted text-start" style="font-size: 0.85em;">
                                                {{ document.upload_date|timezone:"Europe/Paris"|date:"d/m/Y" }}<br>
                                                {{ document.uploaded_by.username }}
                                            </div>
                                        </div>

                                        <!-- Colonne droite : icônes -->
                                        <div class="d-flex flex-column justify-content-end align-items-center p-2" style="width: 40px; min-height: 100%;">
                                            <!-- Historique -->
                                            <button class="btn btn-sm p-0 border-0 bg-transparent mb-2" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#documentHistoryModal"
                                                data-document-type="{{ document.document_type }}"
                                                data-location-id="{{ document.structure.id }}"
                                                title="{% translate 'Historique' %}">
                                                <i class="bi bi-clock-history text-primary"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- Modal form add document -->
        <div class="modal fade" id="addDocumentModal" tabindex="-1" aria-labelledby="addDocumentModalLabel" aria-hidden="true" style="z-index: 10050;">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="addDocumentModalLabel">{% translate "Ajouter des documents" %}</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                    </div>
                    <div class="modal-body">
                        <form id="addDocumentForm" method="post" enctype="multipart/form-data" action="{% url 'assets:structures_add_document' location.structure.id %}">
                            {% csrf_token %}

                            <div class="mb-3">
                                <label for="fileInput" class="form-label">{% translate "Sélectionner des fichiers" %}</label>
                                <input type="file" id="fileInput" name="files" multiple class="form-control">
                            </div>

                            <div id="fileFieldsContainer">
                                <!-- Champs dynamiques injectés ici -->
                            </div>

                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary" id="documentSubmitButton">
                                {% translate "Ajouter" %}
                                <span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true" id="documentSubmitSpinner"></span>
                                </button>
                            </div>
                        </form>
                    </div>
                  </div>
            </div>
        </div>
        
        <!-- Données JSON pour JavaScript -->
        <script type="application/json" id="documentConfigData">
            {
                "use_managed_documents": {% if use_managed_documents %}true{% else %}false{% endif %},
                "can_add_unique_tag_documents": {% if can_add_unique_tag_documents %}true{% else %}false{% endif %},
                "config_url": "{% url 'assets:structures_document_config' location.structure.id %}"
            }
        </script>
        <!-- Modal form delete document -->
        <div class="modal fade" id="documentDeleteModal" tabindex="-1" aria-labelledby="documentDeleteModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="documentDeleteModalLabel">{% translate "Confirmer la suppression" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                </div>

                <div class="modal-body">
                    <p>{% translate "Voulez-vous vraiment supprimer ce document ?" %}</p>
                    <p><strong id="deleteDocumentFileName">{% translate "Nom du fichier" %}</strong></p>
                </div>

                <div class="modal-footer">
                    <form method="post" id="deleteDocumentForm" action="">
                    {% csrf_token %}
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="submit" class="btn btn-danger">{% translate "Supprimer" %}</button>
                    </form>
                </div>

                </div>
            </div>
        </div>
        <!-- Modal for document history -->
        <div class="modal fade" id="documentHistoryModal" tabindex="-1" aria-labelledby="documentHistoryModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-scrollable">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="documentHistoryModalLabel">{% translate "Historique des documents" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                </div>
                <div class="modal-body">
                    <div id="documentHistoryContent" class="row g-3">
                    <!-- Contenu dynamique injecté ici -->
                    </div>
                </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Transport Exceptionnel & Convois Lourds -->
        {% if can_view_exceptional_transport and location.structure %}
        <div class="card mb-4 border-warning shadow-sm">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h4 class="mb-0 text-dark">
                    <i class="bi bi-truck text-warning me-2"></i>{% translate "Transport exceptionnel & Convois lourds" %}
                </h4>
                <div class="d-flex align-items-center">
                    {% if te_info %}
                        {% if te_info.passage_status == 'authorized' %}
                            <span class="badge bg-success fs-6"><i class="bi bi-check-circle me-1"></i>{% translate "Autorisé" %}</span>
                        {% elif te_info.passage_status == 'conditional' %}
                            <span class="badge bg-warning text-dark fs-6"><i class="bi bi-exclamation-triangle me-1"></i>{% translate "Sous conditions" %}</span>
                        {% elif te_info.passage_status == 'prior_study_required' %}
                            <span class="badge bg-danger fs-6"><i class="bi bi-file-earmark-medical me-1"></i>{% translate "Étude préalable requise" %}</span>
                        {% elif te_info.passage_status == 'forbidden' %}
                            <span class="badge bg-dark fs-6"><i class="bi bi-slash-circle me-1"></i>{% translate "Interdit" %}</span>
                        {% else %}
                            <span class="badge bg-secondary fs-6">{% translate "Non évalué" %}</span>
                        {% endif %}
                    {% else %}
                        <span class="badge bg-secondary fs-6">{% translate "Non évalué" %}</span>
                    {% endif %}

                    {% if can_edit_exceptional_transport %}
                    <button type="button" class="btn btn-sm btn-outline-primary ms-3" data-bs-toggle="modal" data-bs-target="#editExceptionalTransportModal" title="{% translate 'Modifier les paramètres TE' %}">
                        <i class="bi bi-pencil me-1"></i>{% translate "Modifier" %}
                    </button>
                    {% endif %}
                </div>
            </div>
            <div class="card-body">
                <ul class="nav nav-tabs mb-3" id="teTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active text-dark" id="te-specs-tab" data-bs-toggle="tab" data-bs-target="#te-specs" type="button" role="tab">
                            <i class="bi bi-speedometer2 me-1"></i>{% translate "Charges & Gabarits" %}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link text-dark" id="te-rules-tab" data-bs-toggle="tab" data-bs-target="#te-rules" type="button" role="tab">
                            <i class="bi bi-signpost-split me-1"></i>{% translate "Prescriptions de passage" %}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link text-dark" id="te-docs-tab" data-bs-toggle="tab" data-bs-target="#te-docs" type="button" role="tab">
                            <i class="bi bi-folder me-1"></i>{% translate "Documents & Études" %}
                            {% if te_documents %}
                            <span class="badge bg-primary rounded-pill ms-1">{{ te_documents|length }}</span>
                            {% endif %}
                        </button>
                    </li>
                </ul>

                <div class="tab-content" id="teTabContent">
                    <!-- Onglet 1: Charges & Gabarits -->
                    <div class="tab-pane fade show active" id="te-specs" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="p-3 bg-light rounded border h-100">
                                    <h6 class="fw-bold text-primary mb-3"><i class="bi bi-box-seam me-1"></i>{% translate "Capacités de charge" %}</h6>
                                    <table class="table table-sm table-borderless mb-0">
                                        <tr>
                                            <th class="text-muted" style="width: 55%;">{% translate "Poids max. standard (MAXWA)" %} :</th>
                                            <td><strong>{% if te_info.max_authorized_weight_tonnes %}{{ te_info.max_authorized_weight_tonnes }} t{% else %}<span class="text-muted">-</span>{% endif %}</strong></td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">{% translate "Tonnage max. calculé (MX)" %} :</th>
                                            <td><span class="badge bg-info text-dark">{% if te_info.max_calculated_weight_tonnes %}{{ te_info.max_calculated_weight_tonnes }} t{% else %}-{% endif %}</span></td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">{% translate "Capacité min. garantie (MINWR)" %} :</th>
                                            <td>{% if te_info.min_guaranteed_capacity_tonnes %}{{ te_info.min_guaranteed_capacity_tonnes }} t{% else %}<span class="text-muted">-</span>{% endif %}</td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">{% translate "Charge max. / essieu" %} :</th>
                                            <td><strong>{% if te_info.max_axle_load_tonnes %}{{ te_info.max_axle_load_tonnes }} t/essieu{% else %}<span class="text-muted">-</span>{% endif %}</strong></td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">{% translate "Entraxe minimal essieux" %} :</th>
                                            <td>{% if te_info.min_axle_spacing_m %}{{ te_info.min_axle_spacing_m }} m{% else %}<span class="text-muted">-</span>{% endif %}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="p-3 bg-light rounded border h-100">
                                    <h6 class="fw-bold text-primary mb-3"><i class="bi bi-rulers me-1"></i>{% translate "Gabarits & Classification" %}</h6>
                                    <table class="table table-sm table-borderless mb-0">
                                        <tr>
                                            <th class="text-muted" style="width: 55%;">{% translate "Classe de pont (BKL)" %} :</th>
                                            <td><code>{{ te_info.bridge_class|default:"-" }}</code></td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">{% translate "N° FOD / ID National" %} :</th>
                                            <td>{{ te_info.fod_vnr|default:"-" }} / {{ te_info.national_id|default:"-" }}</td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">{% translate "Hauteurs libres (G / Axe / D)" %} :</th>
                                            <td>
                                                <strong>{{ te_info.clearance_height_left_m|default:"-" }} m</strong> /
                                                <strong>{{ te_info.clearance_height_center_m|default:"-" }} m</strong> /
                                                <strong>{{ te_info.clearance_height_right_m|default:"-" }} m</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">{% translate "Largeur utile (BRE)" %} :</th>
                                            <td>{% if te_info.usable_width_m %}{{ te_info.usable_width_m }} m{% else %}<span class="text-muted">-</span>{% endif %}</td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">{% translate "Franchissement ferroviaire / métro" %} :</th>
                                            <td>
                                                {% if te_info.is_railway_metro_crossing %}
                                                <span class="badge bg-warning text-dark"><i class="bi bi-train-front me-1"></i>{% translate "Oui" %}</span>
                                                {% else %}
                                                <span class="text-muted">{% translate "Non" %}</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Onglet 2: Prescriptions de passage -->
                    <div class="tab-pane fade" id="te-rules" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-5">
                                <div class="p-3 bg-light rounded border h-100">
                                    <h6 class="fw-bold text-primary mb-3"><i class="bi bi-shield-check me-1"></i>{% translate "Règles d'exploitation" %}</h6>
                                    <ul class="list-group list-group-flush bg-transparent">
                                        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center px-0 py-2">
                                            <span>{% translate "Vitesse maximale" %}</span>
                                            <span class="badge bg-primary">{{ te_info.max_speed_kmh|default:5 }} km/h</span>
                                        </li>
                                        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center px-0 py-2">
                                            <span>{% translate "Freinage sur ouvrage" %}</span>
                                            {% if te_info.is_braking_forbidden %}
                                            <span class="badge bg-danger">{% translate "Strictement interdit" %}</span>
                                            {% else %}
                                            <span class="badge bg-secondary">{% translate "Autorisé" %}</span>
                                            {% endif %}
                                        </li>
                                        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center px-0 py-2">
                                            <span>{% translate "Passage isolé (convoi seul)" %}</span>
                                            {% if te_info.is_isolated_crossing_only %}
                                            <span class="badge bg-warning text-dark">{% translate "Convoi seul obligatoire" %}</span>
                                            {% else %}
                                            <span class="badge bg-light text-dark">{% translate "Non exigé" %}</span>
                                            {% endif %}
                                        </li>
                                        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center px-0 py-2">
                                            <span>{% translate "Distance de sécurité" %}</span>
                                            <span class="badge bg-info text-dark">{{ te_info.safety_distance_m|default:5 }} m</span>
                                        </li>
                                        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center px-0 py-2">
                                            <span>{% translate "Interruption circulation" %}</span>
                                            {% if te_info.traffic_interruption_required %}
                                            <span class="badge bg-danger">{% translate "Requise" %}</span>
                                            {% else %}
                                            <span class="badge bg-light text-dark">{% translate "Non" %}</span>
                                            {% endif %}
                                        </li>
                                        <li class="list-group-item bg-transparent d-flex justify-content-between align-items-center px-0 py-2">
                                            <span>{% translate "Position sur chaussée" %}</span>
                                            <span class="badge bg-secondary">{{ te_info.get_lane_positioning_display|default:"Standard" }}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="col-md-7">
                                <div class="p-3 bg-light rounded border h-100">
                                    <h6 class="fw-bold text-primary mb-3"><i class="bi bi-card-text me-1"></i>{% translate "Prescriptions détaillées" %}</h6>
                                    {% if te_info.prescriptions_fr %}
                                    <div class="mb-3">
                                        <span class="badge bg-secondary mb-1">FR</span>
                                        <p class="small text-dark mb-0" style="white-space: pre-line;">{{ te_info.prescriptions_fr }}</p>
                                    </div>
                                    {% endif %}
                                    {% if te_info.prescriptions_nl %}
                                    <div class="mb-3">
                                        <span class="badge bg-secondary mb-1">NL</span>
                                        <p class="small text-dark mb-0" style="white-space: pre-line;">{{ te_info.prescriptions_nl }}</p>
                                    </div>
                                    {% endif %}
                                    {% if not te_info.prescriptions_fr and not te_info.prescriptions_nl %}
                                    <p class="text-muted small">{% translate "Aucune prescription textuelle spécifique enregistrée." %}</p>
                                    {% endif %}
                                    
                                    {% if te_info.last_study_ref or te_info.last_study_date %}
                                    <hr>
                                    <div class="small text-muted">
                                        <i class="bi bi-journal-check me-1"></i>
                                        {% translate "Dernière note de calcul" %} :
                                        <strong>{{ te_info.last_study_ref|default:"-" }}</strong>
                                        {% if te_info.last_study_date %}({{ te_info.last_study_date|date:"d/m/Y" }}){% endif %}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Onglet 3: Documents & Études -->
                    <div class="tab-pane fade" id="te-docs" role="tabpanel">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="fw-bold text-primary mb-0"><i class="bi bi-file-earmark-pdf me-1"></i>{% translate "Documents du répertoire Transport exceptionnel" %}</h6>
                            {% if te_folder %}
                            <a href="/documents/?folder={{ te_folder.slug }}" class="btn btn-sm btn-outline-secondary" target="_blank">
                                <i class="bi bi-folder2-open me-1"></i>{% translate "Ouvrir dans la GED" %}
                            </a>
                            {% endif %}
                        </div>

                        {% if te_documents %}
                        <div class="row row-cols-1 row-cols-md-3 g-3">
                            {% for doc in te_documents %}
                            <div class="col">
                                <div class="card h-100 shadow-sm border">
                                    <div class="card-body p-2 d-flex flex-column">
                                        <div class="d-flex align-items-start mb-2">
                                            <i class="bi bi-file-earmark-text text-danger fs-3 me-2"></i>
                                            <div class="flex-grow-1 text-truncate">
                                                <a href="{% url 'documents:detail' doc.id %}" class="fw-bold text-dark text-decoration-none" title="{{ doc.title }}">
                                                    {{ doc.title }}
                                                </a>
                                                <div class="text-muted small">{{ doc.updated_at|date:"d/m/Y" }}</div>
                                            </div>
                                        </div>
                                        {% if doc.current_version and doc.current_version.file %}
                                        <div class="mt-auto pt-2 border-top d-flex justify-content-between align-items-center">
                                            <span class="badge bg-light text-dark">v{{ doc.current_version.version_number }}</span>
                                            <a href="{% private_file_url doc.current_version 'file' %}" target="_blank" class="btn btn-sm btn-outline-primary">
                                                <i class="bi bi-download"></i>
                                            </a>
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="text-center py-4 bg-light rounded border text-muted">
                            <i class="bi bi-folder2 text-secondary fs-2 d-block mb-2"></i>
                            <p class="mb-0">{% translate "Aucun document spécifique dans le répertoire Transport exceptionnel." %}</p>
                        </div>
                        {% endif %}

                        {% if te_notices %}
                        <hr class="my-4">
                        <h6 class="fw-bold text-primary mb-3"><i class="bi bi-list-check me-1"></i>{% translate "Historique des missions d'études et avis" %}</h6>
                        <div class="table-responsive">
                            <table class="table table-sm table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>{% translate "Mission / Réf" %}</th>
                                        <th>{% translate "Date" %}</th>
                                        <th>{% translate "Résultat" %}</th>
                                        <th>{% translate "Tonnage évalué" %}</th>
                                        <th>{% translate "Charge / essieu" %}</th>
                                        <th>{% translate "Commentaires" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for notice in te_notices %}
                                    <tr>
                                        <td><strong>{{ notice.mission_reference }}</strong></td>
                                        <td>{{ notice.notice_date|date:"d/m/Y"|default:"-" }}</td>
                                        <td>
                                            {% if notice.result == 'positive' %}
                                            <span class="badge bg-success">{% translate "Favorable" %}</span>
                                            {% elif notice.result == 'conditional' %}
                                            <span class="badge bg-warning text-dark">{% translate "Sous conditions" %}</span>
                                            {% else %}
                                            <span class="badge bg-danger">{% translate "Défavorable" %}</span>
                                            {% endif %}
                                        </td>
                                        <td>{% if notice.evaluated_total_weight_tonnes %}{{ notice.evaluated_total_weight_tonnes }} t{% else %}-{% endif %}</td>
                                        <td>{% if notice.evaluated_axle_load_tonnes %}{{ notice.evaluated_axle_load_tonnes }} t{% else %}-{% endif %}</td>
                                        <td class="small">{{ notice.comments|default:"-" }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endif %}


        <!-- Assets -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 data-bs-toggle="collapse" href="#assets_card_body" role="button">{% translate "Assets" %}</h4>
                {% if can_create_assets %}
                <button type="button" class="btn btn-light border-0" data-bs-toggle="modal" data-bs-target="#addAssetLocationModal" title="{% translate 'Créer un nouvel équipement' %}">
                    <i class="bi bi-plus-square text-success"></i> {% translate "Nouveau" %}
                </button>
                {% endif %}
            </div>

            <div class="card-body collapse show" id="assets_card_body">
                <ul class="nav nav-tabs" id="assetsTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="assets-tree-tab" data-bs-toggle="tab"
                            data-bs-target="#assets-tree-structure" type="button" role="tab"
                            aria-controls="assets-tree-structure" aria-selected="true" style="color:black;">
                    {% translate "Arborescence" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="assets-archives-tab" data-bs-toggle="tab"
                            data-bs-target="#assets-archives" type="button" role="tab"
                            aria-controls="assets-archives" aria-selected="false" style="color:black;">
                    {% translate "Archives" %}
                    </button>
                </li>
                </ul>

                <div class="tab-content my-2" id="assetsTabContent">
                <div class="tab-pane fade show active" id="assets-tree-structure" role="tabpanel" aria-labelledby="assets-tree-tab">
                    <div class="d-flex align-items-center justify-content-between gap-2 mb-2 flex-wrap">
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <span>{{ location.get_name }}</span>
                            {% if location_tree.children %}
                                {% blocktrans count c=location_tree.children|length %}
                                    {{ c }} sous-localisation
                                {% plural %}
                                    {{ c }} sous-localisations
                                {% endblocktrans %}
                            {% endif %}
                            {% if location_tree.assets %}
                                {% blocktrans count a=location_tree.assets|length %}
                                    {{ a }} asset
                                {% plural %}
                                    {{ a }} assets
                                {% endblocktrans %}
                            {% endif %}
                        </div>
                        <a href="{{ toggle_inactive_url }}" class="btn btn-sm {% if show_inactive_assets %}btn-outline-warning{% else %}btn-outline-secondary{% endif %}">
                            {% if show_inactive_assets %}
                                {% translate "Masquer les non-actifs" %}
                            {% else %}
                                {% translate "Afficher les non-actifs" %}
                            {% endif %}
                        </a>
                    </div>
                    {% include "assets/structures_location_tree.html" with node=location_tree include_inactive=show_inactive_assets only %}
                </div>

                <div class="tab-pane fade" id="assets-archives" role="tabpanel" aria-labelledby="assets-archives-tab">
                    …
                </div>
                </div>
            </div>
        </div>


        <div class="card mb-4">
            <div class="card-header">
                <h4>{% translate "Interventions" %}</h4>
            </div>
            <div class="card-body">
                <table id="interventions-table" class="table"
                    data-height="550"
                    data-pagination="true"
                    data-page-size="25"
                    data-click-to-select="true" >
                    <thead>
                        <tr>
                            <th data-field="actions" data-width="100"></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="statut">{% translate "Statut" %}</th>
                        </tr>
                        <tbody>
                            {% for interv in interventions %}
                                <tr>
                                    <td>
                                        <a href="{% url 'interventions:interventions_index' %}{{ interv.id }}" type="button" class="btn btn-sm btn-light detail-btn" data-id="${row.id}" data-bs-toggle="tooltip" title="{% translate 'Détail' %}">
                                            <i class="bi bi-info-circle"></i>
                                        </a>
                                    </td>
                                    <td>{{ interv.code }}</td>
                                    <td>{{ interv.title }}</td>
                                    <td>{{ interv.begin_time|date:"d-m-Y H:i" }}</td>
                                    <td>{{ interv.get_status_display }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div id="map">
        </div>
    </div>
</div>

<!-- Add Asset Modal -->
{% if can_create_assets %}
{% include "assets/components/add_asset_modal.html" with modal_id="addAssetLocationModal" thematic_code="structures" location=location categories=categories suggested_code=suggested_code %}
{% endif %}

<!-- Modal d'édition des paramètres Transport Exceptionnel -->
{% if can_edit_exceptional_transport and location.structure %}
<div class="modal fade" id="editExceptionalTransportModal" tabindex="-1" aria-labelledby="editExceptionalTransportModalLabel" aria-hidden="true" style="z-index: 10060;">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <form id="exceptionalTransportForm" method="post" action="{% url 'assets:structures_edit_exceptional_transport' location.structure.id %}">
                {% csrf_token %}
                <div class="modal-header bg-light">
                    <h5 class="modal-title" id="editExceptionalTransportModalLabel">
                        <i class="bi bi-truck text-warning me-2"></i>{% translate "Modifier les paramètres Transport Exceptionnel" %} - {{ location.structure.code }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <!-- Statut & Classification -->
                        <div class="col-md-12">
                            <div class="card p-3 bg-light border-0">
                                <h6 class="fw-bold text-primary mb-3">{% translate "Statut d'admissibilité & Références" %}</h6>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label fw-bold">{% translate "Statut d'admissibilité" %}</label>
                                        {{ te_form.passage_status }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">{% translate "Classe de pont (BKL)" %}</label>
                                        {{ te_form.bridge_class }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">{% translate "N° d'ordre FOD/SPF (VNR)" %}</label>
                                        {{ te_form.fod_vnr }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">{% translate "Identifiant national (IDN)" %}</label>
                                        {{ te_form.national_id }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">{% translate "Nombre de travées (OVS)" %}</label>
                                        {{ te_form.number_of_spans }}
                                    </div>
                                    <div class="col-md-4 d-flex align-items-center mt-4">
                                        <div class="form-check">
                                            {{ te_form.is_railway_metro_crossing }}
                                            <label class="form-check-label" for="{{ te_form.is_railway_metro_crossing.id_for_label }}">
                                                {% translate "Ouvrage ferroviaire / métro / tram" %}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Capacités & Tonnages -->
                        <div class="col-md-6">
                            <div class="card p-3 h-100 border">
                                <h6 class="fw-bold text-primary mb-3">{% translate "Capacités de charge" %}</h6>
                                <div class="row g-2">
                                    <div class="col-md-6">
                                        <label class="form-label small">{% translate "Poids max standard (MAXWA) [t]" %}</label>
                                        {{ te_form.max_authorized_weight_tonnes }}
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label small">{% translate "Tonnage max calculé (MX) [t]" %}</label>
                                        {{ te_form.max_calculated_weight_tonnes }}
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label small">{% translate "Capacité min garantie (MINWR) [t]" %}</label>
                                        {{ te_form.min_guaranteed_capacity_tonnes }}
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label small">{% translate "Charge max / essieu [t]" %}</label>
                                        {{ te_form.max_axle_load_tonnes }}
                                    </div>
                                    <div class="col-md-12">
                                        <label class="form-label small">{% translate "Entraxe minimal essieux [m]" %}</label>
                                        {{ te_form.min_axle_spacing_m }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Gabarits géométriques -->
                        <div class="col-md-6">
                            <div class="card p-3 h-100 border">
                                <h6 class="fw-bold text-primary mb-3">{% translate "Gabarits géométriques" %}</h6>
                                <div class="row g-2">
                                    <div class="col-md-4">
                                        <label class="form-label small">{% translate "Hauteur gauche H1 [m]" %}</label>
                                        {{ te_form.clearance_height_left_m }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label small">{% translate "Hauteur axe H2 [m]" %}</label>
                                        {{ te_form.clearance_height_center_m }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label small">{% translate "Hauteur droite H3 [m]" %}</label>
                                        {{ te_form.clearance_height_right_m }}
                                    </div>
                                    <div class="col-md-12">
                                        <label class="form-label small">{% translate "Largeur utile roulable (BRE) [m]" %}</label>
                                        {{ te_form.usable_width_m }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Règles d'exploitation -->
                        <div class="col-md-12">
                            <div class="card p-3 border">
                                <h6 class="fw-bold text-primary mb-3">{% translate "Prescriptions d'exploitation" %}</h6>
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label small">{% translate "Vitesse max [km/h]" %}</label>
                                        {{ te_form.max_speed_kmh }}
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label small">{% translate "Distance sécurité [m]" %}</label>
                                        {{ te_form.safety_distance_m }}
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label small">{% translate "Positionnement sur chaussée" %}</label>
                                        {{ te_form.lane_positioning }}
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-check">
                                            {{ te_form.is_braking_forbidden }}
                                            <label class="form-check-label" for="{{ te_form.is_braking_forbidden.id_for_label }}">
                                                {% translate "Interdiction de freiner" %}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-check">
                                            {{ te_form.is_isolated_crossing_only }}
                                            <label class="form-check-label" for="{{ te_form.is_isolated_crossing_only.id_for_label }}">
                                                {% translate "Convoi seul (passage isolé)" %}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-check">
                                            {{ te_form.traffic_interruption_required }}
                                            <label class="form-check-label" for="{{ te_form.traffic_interruption_required.id_for_label }}">
                                                {% translate "Interruption circulation" %}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Prescriptions textuelles bilingues -->
                        <div class="col-md-6">
                            <label class="form-label fw-bold">{% translate "Prescriptions techniques (FR)" %}</label>
                            {{ te_form.prescriptions_fr }}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">{% translate "Prescriptions techniques (NL)" %}</label>
                            {{ te_form.prescriptions_nl }}
                        </div>

                        <!-- Dernière étude -->
                        <div class="col-md-6">
                            <label class="form-label small">{% translate "Référence dernière note de calcul / Mission" %}</label>
                            {{ te_form.last_study_ref }}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small">{% translate "Date dernière note de calcul" %}</label>
                            {{ te_form.last_study_date }}
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="submit" class="btn btn-primary" id="saveTeBtn">
                        {% translate "Enregistrer" %}
                        <span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true" id="saveTeSpinner"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}

{% endblock content%}


{% block script %}
    {{ geom|json_script:"geom_value" }}
    {{ location.lon|json_script:"lon_value" }}
    {{ location.lat|json_script:"lat_value" }}
    <script>
        const structures_locations_url = "{% url 'assets:structures_locations' %}";
        const document_history_url = "{% url 'assets:structures_document_history' %}";
        const feature_geom = JSON.parse(document.getElementById("geom_value").textContent);
        const feature_lon = JSON.parse(document.getElementById("lon_value").textContent);
        const feature_lat = JSON.parse(document.getElementById("lat_value").textContent);

        {% if can_edit_exceptional_transport %}
        const teForm = document.getElementById('exceptionalTransportForm');
        if (teForm) {
            teForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const submitBtn = document.getElementById('saveTeBtn');
                const spinner = document.getElementById('saveTeSpinner');
                if (submitBtn) submitBtn.disabled = true;
                if (spinner) spinner.classList.remove('d-none');

                const formData = new FormData(teForm);
                fetch(teForm.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        window.location.reload();
                    } else {
                        alert(data.error || JSON.stringify(data.errors));
                        if (submitBtn) submitBtn.disabled = false;
                        if (spinner) spinner.classList.add('d-none');
                    }
                })
                .catch(err => {
                    alert("{% filter escapejs %}{% translate "Une erreur est survenue lors de l'enregistrement." %}{% endfilter %}");
                    if (submitBtn) submitBtn.disabled = false;
                    if (spinner) spinner.classList.add('d-none');
                });
            });
        }
        {% endif %}
    </script>
    <!-- Turf.js (local) -->
    <script src="{% static 'common/turf.min.js' %}"></script>
    <script src="{% static 'assets/structures_location_detail.js' %}"></script>
    {% if can_create_assets %}
    <script src="{% static 'assets/asset_add_modal.js' %}"></script>
    {% endif %}
{% endblock script %}