{{define "security.html"}}
{{template "partials/header.html" .}}

<style>
    .security-card {
        max-width: 600px;
    }
    .status-enabled {
        color: #16a34a;
        font-weight: 500;
    }
    .status-disabled {
        color: #dc2626;
        font-weight: 500;
    }
    .backup-count {
        font-size: 0.9rem;
        color: var(--pico-muted-color);
    }
    .warning-box {
        background: #fffbeb;
        border: 1px solid #fde68a;
        color: #92400e;
        padding: 0.75rem 1rem;
        border-radius: var(--pico-border-radius);
        margin-bottom: 1rem;
        font-size: 0.9rem;
    }
</style>

<h1>Sécurité</h1>

<p class="user-info">
    Paramètres de sécurité pour <strong>{{.User.Username}}</strong>
</p>

{{if .Error}}
<div class="error-message" style="background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:0.75rem 1rem;border-radius:var(--pico-border-radius);margin-bottom:1rem;">
    {{.Error}}
</div>
{{end}}

{{if .Info}}
<div style="background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;padding:0.75rem 1rem;border-radius:var(--pico-border-radius);margin-bottom:1rem;">
    {{.Info}}
</div>
{{end}}

<article class="security-card">
    <header>
        <strong>Authentification à deux facteurs (2FA)</strong>
    </header>

    <p>
        Statut :
        {{if .TwoFAEnabled}}
        <span class="status-enabled">Activé</span>
        {{else}}
        <span class="status-disabled">Désactivé</span>
        {{end}}
    </p>

    {{if .TwoFAEnabled}}
    <p class="backup-count">
        Codes de secours restants : <strong>{{.BackupCount}}</strong>
    </p>

    {{if .TwoFARequired}}
    <div class="warning-box">
        Le 2FA est obligatoire pour votre rôle. Vous ne pouvez pas le désactiver.
    </div>
    {{else}}
    <form action="/admin/2fa/disable" method="post" onsubmit="return confirm('Êtes-vous sûr de vouloir désactiver le 2FA ?');">
        <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">

        <label for="password">
            Mot de passe (confirmation)
            <input type="password" id="password" name="password" required placeholder="Votre mot de passe">
        </label>

        <button type="submit" class="secondary">Désactiver le 2FA</button>
    </form>
    {{end}}

    {{else}}

    {{if .TwoFARequired}}
    <div class="warning-box">
        Le 2FA est obligatoire pour votre rôle. Veuillez l'activer.
    </div>
    {{end}}

    <p>
        Protégez votre compte avec une couche de sécurité supplémentaire.
        Vous aurez besoin d'une application d'authentification (Google Authenticator, Authy, etc.).
    </p>

    <a href="/admin/2fa/setup" role="button">Activer le 2FA</a>

    {{end}}
</article>

<article class="security-card" style="margin-top: 1rem;">
    <header>
        <strong>Informations de connexion</strong>
    </header>
    <dl>
        <dt>Nom d'utilisateur</dt>
        <dd>{{.User.Username}}</dd>
        <dt>Email</dt>
        <dd>{{.User.Email}}</dd>
        <dt>Rôle</dt>
        <dd>{{.User.Role}}</dd>
    </dl>
</article>

{{template "partials/footer.html" .}}
{{end}}
