{% extends "admin/base.html" %}
{% block title %}Profile{% endblock %}
{% block content %}
<div class="corporate-page profile-page">
  <header class="corporate-header"><div><p class="admin-eyebrow">Account and security</p><h1>Your profile</h1><p class="corporate-subtitle">Manage your identity, password, sign-in protection, and effective Admin access.</p></div><a class="corporate-button corporate-button-muted" href="{{ dashboard.url_prefix }}/"><i class="fas fa-arrow-left"></i><span>Back to dashboard</span></a></header>
  <section class="profile-identity corporate-panel"><div class="profile-avatar">{{ user.username[:1]|upper }}</div><div class="profile-identity-copy"><p class="corporate-kicker">Signed-in account</p><h2>{{ user.username }}</h2><p>{{ user.email or 'No email configured' }}</p></div><div class="profile-status-list"><span class="corporate-badge corporate-badge-success"><i class="fas fa-circle-check"></i> Active</span><span class="corporate-badge {% if email_verified %}corporate-badge-success{% else %}corporate-badge-neutral{% endif %}"><i class="fas fa-envelope"></i> {{ 'Email verified' if email_verified else 'Email not verified' }}</span><span class="corporate-badge {% if mfa_enabled %}corporate-badge-success{% else %}corporate-badge-neutral{% endif %}"><i class="fas fa-shield-halved"></i> {{ 'MFA enabled' if mfa_enabled else 'MFA not enabled' }}</span></div></section>
  {% if error %}<div class="corporate-alert corporate-alert-danger" role="alert"><i class="fas fa-circle-exclamation"></i><span>{{ error }}</span></div>{% endif %}
  <div class="profile-grid"><div class="profile-main">
    <section class="corporate-panel"><div class="corporate-panel-header"><div><p class="corporate-kicker">Personal details</p><h2>Profile information</h2><p class="corporate-muted">Your username is fixed for audit history. Update your email or password below.</p></div></div><form method="post" class="corporate-form"><input type="hidden" name="_csrf" value="{{ dashboard.csrf_token() }}"><label class="corporate-field"><span>Username</span><input value="{{ user.username }}" readonly aria-readonly="true"><small>Usernames are stable identifiers and cannot be changed here.</small></label><label class="corporate-field"><span>Email address</span><input name="email" type="email" value="{{ user.email or '' }}" maxlength="254" autocomplete="email"><small>Used for account recovery and email verification when delivery is configured.</small></label><label class="corporate-field"><span>New password</span><input name="password" type="password" minlength="8" maxlength="128" autocomplete="new-password" aria-describedby="profile-password-help"><small id="profile-password-help">Leave blank to keep your password. Use 8-128 characters with uppercase, lowercase, number, and special character.</small></label><div class="corporate-form-actions"><button class="corporate-button corporate-button-primary" type="submit"><i class="fas fa-save"></i><span>Save profile</span></button></div></form></section>
    <section class="corporate-panel"><div class="corporate-panel-header"><div><p class="corporate-kicker">Authentication</p><h2>Multi-factor protection</h2><p class="corporate-muted">Use an authenticator app for sign-in verification. Recovery codes are shown only when generated.</p></div></div>{% if mfa_enabled %}<div class="corporate-alert corporate-alert-info"><i class="fas fa-lock"></i><span>MFA is active for this account. A valid authenticator code, recovery code, trusted device, or configured security key is required at sign-in.</span></div><form method="post" class="corporate-form profile-inline-form"><input type="hidden" name="_csrf" value="{{ dashboard.csrf_token() }}"><input type="hidden" name="mfa_action" value="disable"><label class="corporate-field"><span>Authenticator or recovery code</span><input name="otp" required inputmode="numeric" autocomplete="one-time-code" placeholder="Enter a current code"></label><button class="corporate-button corporate-button-danger" type="submit"><i class="fas fa-shield-halved"></i><span>Disable MFA</span></button></form><div class="corporate-form-actions"><button type="button" class="corporate-button corporate-button-muted" id="regenerate-recovery"><i class="fas fa-rotate"></i><span>Generate new recovery codes</span></button></div><div id="recovery-output" class="corporate-code" hidden></div>{% elif mfa_uri %}<div class="corporate-alert corporate-alert-info"><i class="fas fa-mobile-screen-button"></i><span>Scan the QR code with your authenticator app, then confirm the current six-digit code.</span></div>{% if mfa_qr %}<img src="{{ mfa_qr }}" alt="Authenticator setup QR code" class="profile-mfa-qr">{% endif %}<p class="profile-secret"><strong>Manual setup key</strong><code>{{ mfa_secret }}</code></p><form method="post" class="corporate-form profile-inline-form"><input type="hidden" name="_csrf" value="{{ dashboard.csrf_token() }}"><input type="hidden" name="mfa_action" value="confirm"><label class="corporate-field"><span>Six-digit authenticator code</span><input name="otp" required inputmode="numeric" pattern="[0-9]{6}" autocomplete="one-time-code"></label><button class="corporate-button corporate-button-primary" type="submit"><i class="fas fa-check"></i><span>Confirm MFA setup</span></button></form>{% elif mfa_pending %}<div class="corporate-alert corporate-alert-info"><i class="fas fa-hourglass-half"></i><span>MFA setup is pending. Start setup again if the authenticator was not configured.</span></div>{% else %}<p class="corporate-muted">MFA is not enabled for this account.</p><form method="post" class="corporate-form-actions profile-mfa-start"><input type="hidden" name="_csrf" value="{{ dashboard.csrf_token() }}"><input type="hidden" name="mfa_action" value="enable"><button class="corporate-button corporate-button-primary" type="submit"><i class="fas fa-shield-halved"></i><span>Set up authenticator MFA</span></button></form>{% endif %}{% if mfa_recovery_codes %}<div class="corporate-alert corporate-alert-warning"><i class="fas fa-triangle-exclamation"></i><span><strong>Save these recovery codes now.</strong><br>Each code works once and will not be shown again.<br><code>{{ mfa_recovery_codes|join(', ') }}</code></span></div>{% endif %}</section>
    <section class="corporate-panel"><div class="corporate-panel-header"><div><p class="corporate-kicker">Email security</p><h2>Verification status</h2></div></div><div class="profile-verification-row"><span class="corporate-badge {% if email_verified %}corporate-badge-success{% else %}corporate-badge-neutral{% endif %}"><i class="fas fa-envelope"></i> {{ 'Verified' if email_verified else 'Not verified' }}</span>{% if not email_verified and user.email %}<form method="post"><input type="hidden" name="_csrf" value="{{ dashboard.csrf_token() }}"><input type="hidden" name="email_action" value="send_verification"><button class="corporate-button corporate-button-muted" type="submit"><i class="fas fa-paper-plane"></i><span>Send verification email</span></button></form>{% elif not user.email %}<span class="corporate-muted">Add an email address above to enable verification.</span>{% else %}<span class="corporate-muted">Your email is verified.</span>{% endif %}</div></section>
  </div><aside class="profile-aside">
    <section class="corporate-panel"><div class="corporate-panel-header"><div><p class="corporate-kicker">Access overview</p><h2>Roles and capabilities</h2></div></div><div class="profile-role-list">{% for item in role_details %}<article class="profile-role"><div><strong>{{ item.name|replace('_', ' ')|title }}</strong><p>{{ item.description or 'Assigned Admin role' }}</p></div><span class="corporate-badge corporate-badge-neutral">{{ item.permissions|length }} capabilities</span></article>{% else %}<p class="corporate-muted">No role assignments.</p>{% endfor %}</div><details class="corporate-details"><summary>View effective capabilities ({{ effective_permissions|length }})</summary><div class="profile-permission-list">{% for permission in effective_permissions %}<code>{{ permission }}</code>{% else %}<span class="corporate-muted">No capabilities assigned.</span>{% endfor %}</div></details></section>
    <section class="corporate-panel"><div class="corporate-panel-header"><div><p class="corporate-kicker">Session</p><h2>Sign-in session</h2></div></div><dl class="profile-meta-list"><div><dt>Session storage</dt><dd>{{ session_backend }}</dd></div><div><dt>Remember me</dt><dd>30 days when selected</dd></div><div><dt>Cookie protection</dt><dd>HttpOnly, SameSite=Lax</dd></div></dl><p class="corporate-note"><i class="fas fa-circle-info"></i><span>Use &quot;Keep me signed in&quot; only on a trusted device. Log out when using a shared computer.</span></p></section>
    <section class="corporate-panel"><div class="corporate-panel-header"><div><p class="corporate-kicker">Trusted devices</p><h2>Recognized browsers</h2></div></div><div id="trusted-devices" class="profile-device-list"><p class="corporate-muted">Loading trusted devices...</p></div></section>
  </aside></div>
</div>
{% endblock %}
{% block extra_scripts %}
<script>
(() => {
  const csrf = '{{ dashboard.csrf_token() }}'; const api = '{{ dashboard.url_prefix }}'; const deviceList = document.getElementById('trusted-devices');
  const escapeHtml = value => String(value ?? '').replace(/[&<>"']/g, char => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[char]));
  async function loadDevices() { try { const response = await fetch(api + '/profile/trusted-devices', {credentials: 'same-origin'}); const data = await response.json(); const items = data.items || []; deviceList.innerHTML = items.length ? items.map(item => `<div class="profile-device"><span><strong>${escapeHtml(item.label || 'Browser')}</strong><small>Last used ${item.last_used_at ? new Date(item.last_used_at * 1000).toLocaleString() : 'Not yet'}</small></span><button type="button" class="corporate-icon-button" data-revoke="${escapeHtml(item.id)}" title="Revoke trusted device" aria-label="Revoke trusted device"><i class="fas fa-trash"></i></button></div>`).join('') : '<p class="corporate-muted">No trusted devices have been registered.</p>'; deviceList.querySelectorAll('[data-revoke]').forEach(button => button.addEventListener('click', async () => { const result = await fetch(api + '/profile/trusted-devices/' + encodeURIComponent(button.dataset.revoke), {method: 'DELETE', credentials: 'same-origin', headers: {'X-CSRF-Token': csrf}}); if (result.ok) loadDevices(); })); } catch (_) { deviceList.innerHTML = '<p class="corporate-muted">Trusted devices are unavailable.</p>'; } }
  const regenerate = document.getElementById('regenerate-recovery'); if (regenerate) regenerate.addEventListener('click', async () => { if (!confirm('Generate new recovery codes? Existing codes will stop working.')) return; const response = await fetch(api + '/profile/mfa/recovery-codes', {method: 'POST', credentials: 'same-origin', headers: {'Content-Type': 'application/json', 'X-CSRF-Token': csrf}, body: JSON.stringify({count: 10})}); const data = await response.json(); const output = document.getElementById('recovery-output'); if (response.ok) { output.hidden = false; output.textContent = (data.codes || []).join(', '); } });
  loadDevices();
})();
</script>
{% endblock %}