{% extends "base.html" %}
{% block title %}Surveillance Téléphone - GMAO{% endblock %}

{% block content %}

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="bi bi-telephone"></i> Surveillance P520</h1>
        <span class="badge bg-secondary">Auto-refresh: 30s</span>
    </div>
    
    {% if error %}
    <div class="alert alert-danger">{{ error }}</div>
    {% endif %}
    
    {% if pbx_info %}
    <div class="mb-3">
        <span class="badge bg-primary">{{ pbx_info['product_type'] | default('P520') }}</span>
        <span class="text-muted">v{{ pbx_info['version'] | default('N/A') }}</span>
    </div>
    {% endif %}
    
    <div class="card">
        <div class="card-header">Statuts des extensions</div>
        <div class="card-body p-0">
            <table class="table table-hover mb-0">
                <thead class="table-dark">
                    <tr><th>Numéro</th><th>Nom</th><th>Connexion</th><th>Statut</th><th>IP</th><th>Device</th></tr>
                </thead>
                <tbody>
                {% for ext in extensions %}
                <tr>
                    <td><strong>{{ ext.num }}</strong></td>
                    <td>{{ ext.name }}</td>
                    <td>
                        <span class="badge bg-{{ ext.conn_class }}">
                            {% if ext.status_code == 0 %}
                            <i class="bi bi-wifi"></i>
                            {% else %}
                            <i class="bi bi-wifi-off"></i>
                            {% endif %}
                            {{ ext.conn_label }}
                        </span>
                    </td>
                    <td><span class="badge bg-{% if ext.status == 'available' %}success{% elif ext.status == 'do_not_disturb' %}danger{% else %}secondary{% endif %}">{{ ext.status_fr }}</span></td>
                    <td>{{ ext.ip }}</td>
                    <td>{{ ext.device }}</td>
                </tr>
                {% else %}
                <tr><td colspan="6" class="text-center text-muted">Aucune extension trouvée</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    
    <div class="mt-3 text-muted small">
        <i class="bi bi-info-circle"></i> 
        <strong>Connexion :</strong> 
        <span class="badge bg-success text-dark"><i class="bi bi-wifi"></i> Connecté</span> = téléphone enregistré sur le réseau, 
        <span class="badge bg-warning text-dark"><i class="bi bi-wifi-off"></i> Non connecté</span> = téléphone hors réseau/éteint
    </div>
</div>

{% endblock %}