<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Falha na Comunicacao - 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/erro.css') }}">
</head>
<body>
    <div class="app-container">
        <div class="control-panel">
            <header class="app-header">
                <div class="app-logo">
                    <img src="{{ url_for('static', filename='img/logo.png') }}" alt="Logo">
                </div>
                <h1 class="app-title">Controle de Acesso</h1>
                <p class="app-subtitle">Sistema de abertura remota para equipamentos ControlID</p>
            </header>

            <div class="error-icon"></div>
            <h1 class="error-title">Falha na comunicacao</h1>
            <p class="error-message">
                Nao foi possivel executar o comando no equipamento selecionado.
            </p>

            <div class="troubleshooting-section">
                <h3 class="troubleshooting-title">Verificacoes recomendadas</h3>

                <div class="troubleshooting-list">
                    <div class="troubleshooting-item">
                        <div class="item-icon">1</div>
                        <div class="item-content">
                            <strong>Rede</strong>
                            <span>Confirme se o computador esta na mesma rede do ControlID.</span>
                        </div>
                    </div>

                    <div class="troubleshooting-item">
                        <div class="item-icon">2</div>
                        <div class="item-content">
                            <strong>Credenciais</strong>
                            <span>Revise login, senha, IP e porta cadastrados.</span>
                        </div>
                    </div>

                    <div class="troubleshooting-item">
                        <div class="item-icon">3</div>
                        <div class="item-content">
                            <strong>Acionamento</strong>
                            <span>Verifique se os parametros da acao correspondem a saida correta do equipamento.</span>
                        </div>
                    </div>
                </div>

                <div class="ip-info">
                    <div class="ip-label">Equipamento selecionado:</div>
                    {% if device %}
                        <div class="ip-address">{{ device.device_ip }}:{{ device.device_port }}</div>
                        <div class="ip-hint">{{ device.name }}</div>
                    {% else %}
                        <div class="ip-address">Nenhum equipamento ativo</div>
                        <div class="ip-hint">Cadastre um ControlID antes de tentar abrir a porta.</div>
                    {% endif %}
                    {% if error_detail %}
                        <div class="error-detail">{{ error_detail }}</div>
                    {% endif %}
                </div>
            </div>

            <div class="action-section">
                <a href="{{ url_for('index') }}" class="retry-button">Tentar novamente</a>
                <a href="{{ url_for('configuracoes') }}" class="back-button">Configurar</a>
            </div>
        </div>
    </div>

    <script>
        function createErrorParticle() {
            const particle = document.createElement('div');
            const colors = ['#ff4757', '#ff6b35', '#ff3838'];
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            particle.style.cssText = `
                position: fixed;
                width: 4px;
                height: 4px;
                background: ${randomColor};
                border-radius: 50%;
                pointer-events: none;
                z-index: 1;
                left: ${Math.random() * 100}vw;
                top: 100vh;
                animation: errorFloat ${3 + Math.random() * 4}s linear forwards;
                opacity: 0.7;
            `;
            document.body.appendChild(particle);
            setTimeout(() => particle.remove(), 7000);
        }

        const style = document.createElement('style');
        style.textContent = `
            @keyframes errorFloat {
                to {
                    transform: translateY(-100vh) rotate(-360deg);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);
        setInterval(createErrorParticle, 4000);
    </script>
</body>
</html>
