{% extends "base.html" %}

{% block title %}Segurança & Configuração de Chave SSH{% endblock %}
{% block header_title %}Assistente de Segurança & Chave SSH{% endblock %}

{% block content %}
<div style="background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 28px; margin-bottom: 32px;">
    <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 16px;">
        <div style="width: 48px; height: 48px; background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--danger);">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
        </div>
        <div>
            <h2 style="font-size: 20px; font-weight: 700; color: #fff;">Ação Recomendada: Migração de Senha para Chave SSH</h2>
            <p style="color: var(--text-muted); font-size: 14px;">Como a senha root do VPS foi informada em texto na conversa, siga estes 4 passos simples para proteger seu VPS e desabilitar autenticação por senha fixa.</p>
        </div>
    </div>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 32px;">
    <!-- Step 1 & Key Display -->
    <div style="background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px;">
        <h3 style="font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 16px;">1. Sua Chave Pública SSH (Mini Dell)</h3>
        <p style="font-size: 14px; color: var(--text-muted); margin-bottom: 16px;">Esta chave foi gerada localmente no DeployHub em <code>storage/keys/id_rsa.pub</code> e será usada para conexões seguras sem senha.</p>
        
        <div class="terminal-window" style="height: 120px; margin-bottom: 16px; word-break: break-all;">
{{ pub_key }}
        </div>

        <button class="btn btn-primary" onclick="copyToClipboard(`{{ pub_key }}`)">
            <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
            <span>COPIAR CHAVE PÚBLICA</span>
        </button>
    </div>

    <!-- Step 2, 3, 4 VPS Setup Commands -->
    <div style="background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px;">
        <h3 style="font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 16px;">2. Comandos para Executar no VPS</h3>
        
        <div style="margin-bottom: 20px;">
            <strong style="color: #fff; font-size: 14px;">Passo 2.1: Autorizar a Chave SSH no VPS</strong>
            <div class="terminal-window" style="height: 100px; margin-top: 8px;">
mkdir -p ~/.ssh && chmod 700 ~/.ssh
echo "{{ pub_key }}" >> ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys
            </div>
        </div>

        <div style="margin-bottom: 20px;">
            <strong style="color: #fff; font-size: 14px;">Passo 2.2: Alterar a Senha Root no VPS</strong>
            <div class="terminal-window" style="height: 50px; margin-top: 8px;">
passwd
            </div>
        </div>

        <div>
            <strong style="color: #fff; font-size: 14px;">Passo 2.3: Configurar Firewall UFW (Segurança Básica)</strong>
            <div class="terminal-window" style="height: 100px; margin-top: 8px;">
ufw allow 22/tcp
ufw allow 80/tcp
ufw allow 443/tcp
ufw enable
            </div>
        </div>
    </div>
</div>
{% endblock %}