<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acesso Liberado - Painel de Controle</title>
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
    <link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sucesso.css') }}">
</head>
<body>
    <div class="success-container">
        <div class="success-icon"></div>
        <h1 class="success-title">Acesso liberado</h1>
        <p class="success-message">
            O comando de abertura foi enviado com sucesso para o equipamento ativo.
        </p>

        <div class="status-details">
            <div class="status-item">
                <span>Status da operacao:</span>
                <span class="status-value">Concluida</span>
            </div>
            <div class="status-item">
                <span>Equipamento:</span>
                <span class="status-value">{{ device.name }}</span>
            </div>
            <div class="status-item">
                <span>Endereco:</span>
                <span class="status-value">{{ device.device_ip }}:{{ device.device_port }}</span>
            </div>
            <div class="status-item">
                <span>Horario:</span>
                <span class="status-value" id="currentTime">--:--:--</span>
            </div>
        </div>

        <a href="{{ url_for('index') }}" class="return-button">Voltar ao painel</a>
    </div>

    <script>
        function updateTime() {
            const now = new Date();
            document.getElementById('currentTime').textContent = now.toLocaleTimeString('pt-BR', {
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
        }
        updateTime();

        function createSuccessParticle() {
            const particle = document.createElement('div');
            const colors = ['#00ff88', '#00d4ff', '#ff6b35'];
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            particle.style.cssText = `
                position: fixed;
                width: 6px;
                height: 6px;
                background: ${randomColor};
                border-radius: 50%;
                pointer-events: none;
                z-index: 1000;
                left: ${Math.random() * 100}vw;
                top: -10px;
                animation: confettiFall ${2 + Math.random() * 3}s linear forwards;
            `;
            document.body.appendChild(particle);
            setTimeout(() => particle.remove(), 5000);
        }

        const style = document.createElement('style');
        style.textContent = `
            @keyframes confettiFall {
                to {
                    transform: translateY(100vh) rotate(720deg);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);

        const confettiInterval = setInterval(createSuccessParticle, 200);
        setTimeout(() => clearInterval(confettiInterval), 3000);
    </script>
</body>
</html>
