{% load i18n %}

<div class="p-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">
            {% if asset_model == 'signpole' %}
                {% translate "Détail du Poteau" %}
            {% else %}
                {% translate "Détail du Panneau" %}
            {% endif %}
        </h5>
        <!-- Close button is handled by the container -->
    </div>

    <div class="mb-3">
        <strong>ID:</strong> {{ asset.id }}<br>
        <strong>Code:</strong> {{ asset.code|default:"-" }}<br>
        <strong>Organisation:</strong> {{ asset.organization|default:"-" }}<br>
        {% if asset_model == 'signpole' %}
            <strong>{% translate "Type de support:" %}</strong>
            {% if asset.support_type == 'trafficlightpole' %}
                <span class="badge bg-danger-subtle text-danger border border-danger">🚦 {{ asset.support_type_display }}</span>
            {% else %}
                <span class="badge bg-light text-dark border">{{ asset.support_type_display|default:"Poteau" }}</span>
            {% endif %}<br>
            <strong>{% translate "Modèle:" %}</strong> {{ asset.model|default:"-" }}<br>
            <strong>{% translate "Hauteur:" %}</strong> {{ asset.height|default:"-" }} m<br>
            <strong>{% translate "Couleur:" %}</strong> {{ asset.color|default:"-" }}<br>
        {% else %}
            <strong>{% translate "Type de panneau:" %}</strong> {{ asset.signpanel_type.code }} - {{ asset.signpanel_type.get_name }}<br>
            <strong>{% translate "Support:" %}</strong>
            {% if asset.effective_support_type == 'trafficlightpole' %}
                <span class="badge bg-danger-subtle text-danger border border-danger">🚦 {{ asset.effective_support_type_display }}</span>
            {% else %}
                <span class="badge bg-light text-dark border">{{ asset.effective_support_type_display|default:"Poteau" }}</span>
            {% endif %}
            {% if asset.pole %}(<a href="{% url 'sign:sign_assets_detail' 'signpole' asset.pole.id %}">{{ asset.pole.code }}</a>){% endif %}
            <br>
            {% if asset.support_model_display %}
                <strong>{% translate "Modèle du support:" %}</strong> <span class="fw-semibold">{{ asset.support_model_display }}</span><br>
            {% endif %}
            {% if asset.model %}
                <strong>{% translate "Modèle du panneau:" %}</strong> {{ asset.model }}<br>
            {% endif %}
            <strong>{% translate "Texte:" %}</strong> {{ asset.signpanel_text|default:"-" }}<br>
        {% endif %}
    </div>

    {% if asset_model == 'signpole' %}
        <hr>
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h6 class="mb-0">{% translate "Panneaux associés" %}</h6>
            {% if perms.sign.add_signpanel or user_config.esign_can_edit %}
            <button class="btn btn-sm btn-primary" onclick="addPanelToPole({{ asset.id }})">
                <i class="bi bi-plus"></i> {% translate "Ajouter" %}
            </button>
            {% endif %}
        </div>

        <div id="pole-panels-list" class="list-group mb-3">
            {% for panel in asset.sign_app_panels.all|dictsort:"vertical_order" %}
            <div class="list-group-item d-flex justify-content-between align-items-center" data-id="{{ panel.id }}">
                <div>
                    <span class="badge bg-secondary me-2">{{ panel.vertical_order|default:"-" }}</span>
                    {{ panel.signpanel_type.code }} - {{ panel.signpanel_type.get_name }}
                </div>
                <div>
                    {% if perms.sign.change_signpanel or user_config.esign_can_edit %}
                    <button class="btn btn-sm btn-outline-secondary" onclick="movePanel({{ panel.id }}, 'up')">
                        <i class="bi bi-arrow-up"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-secondary" onclick="movePanel({{ panel.id }}, 'down')">
                        <i class="bi bi-arrow-down"></i>
                    </button>
                    {% endif %}
                </div>
            </div>
            {% empty %}
            <div class="text-muted text-center py-2">{% translate "Aucun panneau associé" %}</div>
            {% endfor %}
        </div>
    {% endif %}
</div>

<script>
function addPanelToPole(poleId) {
    const lat = {{ asset.lat|stringformat:"f" }};
    const lon = {{ asset.lon|stringformat:"f" }};
    
    if (window.openCreatePanelPanel) {
        window.openCreatePanelPanel({lat: lat, lng: lon}, poleId);
    }
}

function movePanel(panelId, direction) {
    fetch(`/sign/assets/panel/${panelId}/move/?direction=${direction}`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
             fetch(`/sign/assets/signpole/{{ asset.id }}/`)
                .then(res => res.text())
                .then(html => {
                    document.getElementById('detail-content').innerHTML = html;
                });
        }
    });
}
</script>