{% extends "assets/detail_generic.html" %}
{% load i18n %}
{% load static %}

{% block extra_blocks %}
<!-- Plots de la traverse -->
<div class="card mb-3" id="bollard-system-plots-card">
    <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <h5 class="mb-0">
            <i class="bi bi-geo-alt-fill text-primary me-2"></i>{% translate "Plots de la traverse" %}
            <span class="badge bg-primary ms-2">{{ asset.plots.count }}</span>
        </h5>
    </div>
    <div class="card-body p-0">
        {% if asset.plots.all %}
        <div class="table-responsive">
            <table class="table table-hover table-striped mb-0 align-middle">
                <thead>
                    <tr>
                        <th style="width: 80px;" class="text-center">{% translate "Pos." %}</th>
                        <th>{% translate "Code" %}</th>
                        <th>{% translate "Type de borne" %}</th>
                        <th>{% translate "Modèle" %}</th>
                        <th>{% translate "N° de série" %}</th>
                        <th>{% translate "Statut" %}</th>
                        <th style="width: 110px;" class="text-end">{% translate "Action" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for plot in asset.plots.all %}
                    <tr>
                        <td class="text-center">
                            <span class="badge bg-dark rounded-pill">#{{ plot.position }}</span>
                        </td>
                        <td>
                            <a href="{{ plot.get_absolute_url }}" class="fw-bold text-decoration-none">
                                {{ plot.code }}
                            </a>
                            {% if plot.get_name %}
                            <div class="small text-muted">{{ plot.get_name }}</div>
                            {% endif %}
                        </td>
                        <td>
                            {% if plot.bollard_type == 'automatic' %}
                                <span class="badge bg-primary"><i class="bi bi-arrow-up-down me-1"></i>{{ plot.get_bollard_type_display }}</span>
                            {% elif plot.bollard_type == 'semi_automatic' %}
                                <span class="badge bg-info text-dark">{{ plot.get_bollard_type_display }}</span>
                            {% elif plot.bollard_type == 'removable' %}
                                <span class="badge bg-warning text-dark">{{ plot.get_bollard_type_display }}</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ plot.get_bollard_type_display }}</span>
                            {% endif %}
                        </td>
                        <td>{{ plot.model.get_name|default:"-" }}</td>
                        <td><code>{{ plot.serial_number|default:"-" }}</code></td>
                        <td>
                            {% if plot.status == 'active' %}
                                <span class="badge bg-success">{{ plot.get_status_display }}</span>
                            {% elif plot.status == 'damaged' %}
                                <span class="badge bg-warning text-dark">{{ plot.get_status_display }}</span>
                            {% elif plot.status == 'to_replace' %}
                                <span class="badge bg-danger">{{ plot.get_status_display }}</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ plot.get_status_display }}</span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            <a href="{{ plot.get_absolute_url }}" class="btn btn-sm btn-outline-primary" title="{% translate 'Voir le détail du plot' %}">
                                <i class="bi bi-eye me-1"></i>{% translate "Voir" %}
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="p-4 text-center text-muted">
            <i class="bi bi-cone-striped display-6 d-block mb-2 text-secondary opacity-50"></i>
            {% translate "Aucun plot physique n'est encore configuré sur ce système de bornes." %}
        </div>
        {% endif %}
    </div>
</div>

<!-- Équipements associés au système (Caméras LAPI, totems, armoires...) -->
<div class="card mb-3" id="bollard-system-assets-card">
    <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <h5 class="mb-0">
            <i class="bi bi-hdd-network text-info me-2"></i>{% translate "Équipements associés" %}
            <span class="badge bg-secondary ms-2">{{ asset.system_assets.count }}</span>
        </h5>
    </div>
    <div class="card-body p-0">
        {% if asset.system_assets.all %}
        <div class="table-responsive">
            <table class="table table-hover table-striped mb-0 align-middle">
                <thead>
                    <tr>
                        <th>{% translate "Rôle" %}</th>
                        <th>{% translate "Équipement" %}</th>
                        <th>{% translate "Modèle" %}</th>
                        <th>{% translate "Statut" %}</th>
                        <th>{% translate "Commentaire" %}</th>
                        <th style="width: 110px;" class="text-end">{% translate "Action" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in asset.system_assets.all %}
                    <tr>
                        <td>
                            {% if 'camera' in item.role %}
                                <span class="badge bg-info text-dark"><i class="bi bi-camera-video me-1"></i>{{ item.get_role_display }}</span>
                            {% elif item.role == 'cabinet' %}
                                <span class="badge bg-dark"><i class="bi bi-cpu me-1"></i>{{ item.get_role_display }}</span>
                            {% elif item.role == 'totem' %}
                                <span class="badge bg-primary"><i class="bi bi-tablet me-1"></i>{{ item.get_role_display }}</span>
                            {% elif item.role == 'traffic_light' %}
                                <span class="badge bg-warning text-dark"><i class="bi bi-traffic-light me-1"></i>{{ item.get_role_display }}</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ item.get_role_display }}</span>
                            {% endif %}
                        </td>
                        <td>
                            <a href="{{ item.asset.get_absolute_url }}" class="fw-bold text-decoration-none">
                                {{ item.asset.code }}
                            </a>
                            {% if item.asset.get_name %}
                            <div class="small text-muted">{{ item.asset.get_name }}</div>
                            {% endif %}
                        </td>
                        <td>{{ item.asset.model.get_name|default:"-" }}</td>
                        <td>
                            {% if item.asset.status == 'active' %}
                                <span class="badge bg-success">{{ item.asset.get_status_display }}</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ item.asset.get_status_display }}</span>
                            {% endif %}
                        </td>
                        <td>{{ item.comment|default:"-" }}</td>
                        <td class="text-end">
                            <a href="{{ item.asset.get_absolute_url }}" class="btn btn-sm btn-outline-secondary" title="{% translate 'Voir équipement' %}">
                                <i class="bi bi-box-arrow-up-right"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="p-4 text-center text-muted">
            <i class="bi bi-camera-video display-6 d-block mb-2 text-secondary opacity-50"></i>
            {% translate "Aucun équipement périphérique (caméra, armoire, totem...) n'est actuellement associé." %}
        </div>
        {% endif %}
    </div>
</div>

<!-- Contrats de maintenance liés -->
{% if asset.bollard_systems_contracts.exists %}
<div class="card mb-3" id="bollard-system-contracts-card">
    <div class="card-header bg-light">
        <h5 class="mb-0">
            <i class="bi bi-file-earmark-text text-secondary me-2"></i>{% translate "Contrats d'entretien" %}
            <span class="badge bg-secondary ms-2">{{ asset.bollard_systems_contracts.count }}</span>
        </h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover table-striped mb-0 align-middle">
                <thead>
                    <tr>
                        <th>{% translate "Numéro de contrat" %}</th>
                        <th>{% translate "Type de maintenance" %}</th>
                        <th>{% translate "Statut" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for sc in asset.bollard_systems_contracts.all %}
                    <tr>
                        <td class="fw-bold">{{ sc.contract.contract_number }} - {{ sc.contract.name }}</td>
                        <td>{{ sc.get_maintenance_type_display }}</td>
                        <td>
                            {% if sc.status == 'active' %}
                                <span class="badge bg-success">{% translate "Actif" %}</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ sc.get_status_display }}</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endif %}

<!-- Métadonnées techniques (extra_data) -->
{% if asset.extra_data %}
<div class="card mb-3" id="bollard-system-extra-data-card">
    <div class="card-header bg-light">
        <h5 class="mb-0">
            <i class="bi bi-code-slash text-secondary me-2"></i>{% translate "Métadonnées techniques" %}
        </h5>
    </div>
    <div class="card-body">
        <dl class="row mb-0">
            {% for key, val in asset.extra_data.items %}
            <dt class="col-sm-4 text-truncate" title="{{ key }}">{{ key }}</dt>
            <dd class="col-sm-8 mb-2"><code>{{ val }}</code></dd>
            {% endfor %}
        </dl>
    </div>
</div>
{% endif %}
{% endblock extra_blocks %}