{% extends 'base.html' %}

{% block title %}Apagando Dispositivo{% endblock %}

{% block content %}
<div class="shutdown-content">
    <h1>Apagando Gateway LoRaWan</h1>
    
    <div class="alert alert-warning">
        <p>{{ session.get('shutdown_message', 'El dispositivo se está apagando. Por favor, espere...') }}</p>
    </div>
    
    <div class="spinner"></div>
    
    <p>El dispositivo se apagará en breve. Podrá encenderlo manualmente cuando lo necesite.</p>
    
    <div class="countdown" id="countdown">10</div>
    
    <p class="shutdown-note">Nota: Esta página dejará de responder cuando el dispositivo se apague completamente.</p>
</div>

<script>
    // Contador regresivo
    let seconds = 10;
    const countdownElement = document.getElementById('countdown');
    
    const countdown = setInterval(() => {
        seconds--;
        countdownElement.textContent = seconds;
        
        if (seconds <= 0) {
            clearInterval(countdown);
            // No redireccionamos a ningún lado, ya que el dispositivo estará apagado
        }
    }, 1000);
</script>
{% endblock %}

{% block extra_css %}
<style>
    .shutdown-content {
        text-align: center;
        padding: 3rem 1rem;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .alert-warning {
        color: #856404;
        background-color: #fff3cd;
        border-color: #ffeeba;
        padding: 1rem;
        border-radius: 4px;
        margin: 1.5rem 0;
    }
    
    .spinner {
        border: 4px solid rgba(255, 193, 7, 0.3);
        border-radius: 50%;
        border-top: 4px solid #ffc107;
        width: 60px;
        height: 60px;
        margin: 2rem auto;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .countdown {
        font-size: 4rem;
        font-weight: bold;
        margin: 1.5rem 0;
        color: #ffc107;
    }
    
    .shutdown-note {
        font-style: italic;
        color: #6c757d;
        margin-top: 2rem;
    }
</style>
{% endblock %}