{% load i18n %}

{% if location or parent_support or can_edit_location %}
<div class="card mb-3">
    <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <h5 class="mb-0">
            {% if location_type == 'street' %}
                {% translate "Rue associée" %}
            {% elif location_type == 'intersection' %}
                {% translate "Carrefour associé" %}
            {% elif location_type == 'building' %}
                {% translate "Bâtiment associé" %}
            {% elif location_type == 'site' %}
                {% translate "Site associé" %}
            {% else %}
                {% translate "Localisation associée" %}
            {% endif %}
        </h5>
        {% if can_edit_location and not parent_support %}
        <button type="button" class="btn btn-sm btn-outline-primary d-none" id="changeLocationBtn" data-bs-toggle="modal" data-bs-target="#changeLocationModal" data-edit-mode-only="true">
            <i class="bi bi-pencil me-1"></i>{% translate "Changer" %}
        </button>
        {% endif %}
    </div>
    <div class="card-body">
        {% if parent_support %}
        <div class="mb-2">
            <small class="text-muted d-block">{% translate "Support / Équipement parent" %} :</small>
            {% if parent_support.get_absolute_url %}
            <a href="{{ parent_support.get_absolute_url }}" class="fw-bold text-decoration-none"
               title="{% translate 'Voir le détail du support' %}">
                <i class="bi bi-layers-fill me-1 text-primary"></i>{{ parent_support.code }}
            </a>
            {% else %}
            <strong>{{ parent_support.code }}</strong>
            {% endif %}
            - {{ parent_support.get_name }}
        </div>
        {% endif %}

        {% if location %}
        <div>
            {% if parent_support %}<small class="text-muted d-block">{% translate "Localisation" %} :</small>{% endif %}
            {% if location.get_absolute_url %}
            <a href="{{ location.get_absolute_url }}" class="fw-bold text-decoration-none"
               title="{% translate 'Voir le détail de la localisation' %}">
                <i class="bi bi-geo-alt-fill me-1 text-primary"></i>{{ location.code }}
            </a>
            {% else %}
            <strong>{{ location.code }}</strong>
            {% endif %}
            - {{ location.get_name }}
        </div>
        {% elif not parent_support %}
        <p class="text-muted mb-0">{% translate "Aucune localisation associée" %}</p>
        {% endif %}
    </div>
</div>
{% endif %}

{# Modal pour changer la localisation #}
{% if can_edit_location %}
<div class="modal fade" id="changeLocationModal" tabindex="-1" aria-labelledby="changeLocationModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="changeLocationModalLabel">
                    <i class="bi bi-map me-2"></i>{% translate "Changer la localisation" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <div class="modal-body">
                <div id="changeLocationAlert" class="alert d-none" role="alert"></div>
                <p class="text-muted small">
                    {% translate "Localisation actuelle :" %} <strong>{{ location.code|default:'---' }}</strong>
                </p>
                <div class="mb-2">
                    <label for="changeLocationSearch" class="form-label">
                        {% translate "Recherche" %}
                    </label>
                    <input type="text" class="form-control form-control-sm" id="changeLocationSearch"
                           placeholder="{% translate 'Code ou nom de localisation…' %}">
                    <div id="changeLocationSearchHelp" class="form-text text-muted"></div>
                </div>
                <div class="mb-3">
                    <label for="changeLocationSelect" class="form-label">
                        {% translate "Nouvelle localisation" %}
                    </label>
                    <select class="form-select" id="changeLocationSelect" name="location_id" data-asset-id="{{ asset.id }}" data-thematic="{{ thematic_code }}">
                        <option value="">{% translate "Sélectionner une localisation..." %}</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                <button type="button" class="btn btn-primary" id="confirmChangeLocationBtn">
                    <i class="bi bi-check-circle"></i> {% translate "Appliquer" %}
                </button>
            </div>
        </div>
    </div>
</div>
{% endif %}