{% extends "base.html" %}
{% block title %}Configuration 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-gear"></i> Configuration P520</h1>
        <a href="{{ url_for('yeastar.index') }}" class="btn btn-secondary">Retour</a>
    </div>
    
    <div class="card">
        <div class="card-header">Watchdog DND - Ne pas déranger</div>
        <div class="card-body">
            <form method="POST">
                <div class="mb-3">
                    <label class="form-label">Actif</label>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_enabled" {% if config.is_enabled %}checked{% endif %}>
                        <label class="form-check-label">Activer le watchdog DND</label>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Refresh (secondes)</label>
                        <input type="number" class="form-control" name="refresh_seconds" value="{{ config.refresh_seconds }}" min="1" max="10">
                        <small class="text-muted">Intervalle de polling</small>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Délai remise disponible (s)</label>
                        <input type="number" class="form-control" name="reset_delay_seconds" value="{{ config.reset_delay_seconds }}" min="1" max="30">
                        <small class="text-muted">Attente avant remise en disponible</small>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Extensions exclues</label>
                    <input type="text" class="form-control" name="excluded_extensions" value="{{ config.excluded_extensions }}" placeholder="100,111">
                    <small class="text-muted">IDs séparés par virgule (ex: 100,111,120)</small>
                </div>
                
                <button type="submit" class="btn btn-success"><i class="bi bi-check-lg"></i> Sauvegarder</button>
            </form>
        </div>
    </div>
    
    <div class="card mt-4">
        <div class="card-header">Statut Watchdog</div>
        <div class="card-body">
            <div id="watchdog-status">Chargement...</div>
        </div>
    </div>
</div>

<script>
async function loadStatus() {
    const resp = await fetch('/telephone/api/watchdog/status');
    const data = await resp.json();
    document.getElementById('watchdog-status').innerHTML = 
        '<span class="badge bg-' + (data.enabled ? 'success' : 'secondary') + '">Watchdog ' + (data.enabled ? 'Actif' : 'Inactif') + '</span>';
}
loadStatus();
setInterval(loadStatus, 5000);
</script>

{% endblock %}