{% 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>
        <div>
            <a href="{{ url_for('yeastar.dnd_config_page') }}" class="btn btn-outline-warning btn-sm">
                <i class="bi bi-shield-exclamation"></i> Watchdog DND
            </a>
            <a href="{{ url_for('yeastar.config_page') }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-gear"></i> Configuration
            </a>
            <span class="badge bg-secondary ms-2">Auto-refresh: 30s</span>
        </div>
    </div>
    
    {% if not yeastar_config %}
    <div class="alert alert-warning">
        <i class="bi bi-exclamation-triangle"></i> 
        <strong>Configuration absente</strong> - 
        Les identifiants Yeastar ne sont pas configurés.
        <a href="{{ url_for('yeastar.config_page') }}" class="alert-link">Configurer maintenant</a>
    </div>
    {% elif error %}
    <div class="alert alert-danger">
        <i class="bi bi-exclamation-circle"></i> {{ error }}
        <a href="{{ url_for('yeastar.config_page') }}" class="alert-link">Vérifier la configuration</a>
    </div>
    {% endif %}
    
    {% if pbx_info %}
    <div class="mb-3">
        <span class="badge bg-primary">{{ pbx_info.get('product_type', 'P520') }}</span>
        <span class="text-muted">v{{ pbx_info.get('version', 'N/A') }}</span>
        {% if yeastar_config %}
        <span class="text-muted ms-3">
            <i class="bi bi-globe"></i> {{ yeastar_config.base_url }}
        </span>
        {% endif %}
    </div>
    {% endif %}
    
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span>Statuts des extensions</span>
            {% if extensions %}<span class="badge bg-secondary">{{ extensions|length }} extensions</span>{% endif %}
        </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><code>{{ ext.ip }}</code></td>
                    <td>{{ ext.device }}</td>
                </tr>
                {% else %}
                <tr><td colspan="6" class="text-center text-muted py-4">
                    {% if not yeastar_config %}
                    <i class="bi bi-plug"></i> Configuration requise
                    {% elif error %}
                    <i class="bi bi-exclamation-triangle"></i> Erreur de connexion
                    {% else %}
                    <i class="bi bi-telephone-x"></i> Aucune extension trouvée
                    {% endif %}
                </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 %}