{% extends "base.html" %}
{% block title %}Account{% endblock %}
{% block content %}
<div class="section-head">
  <div>
    <span class="section-tag">// account › security</span>
    <h1>{{ current_user.username }}</h1>
    <p class="lead">{{ current_user.email }} · role <span class="role-badge role-{{ current_user.role }}">{{ current_user.role }}</span></p>
  </div>
</div>

<div style="display:grid; grid-template-columns: 1fr 1fr; gap: 20px;">
  <section class="panel">
    <header class="panel-header"><h3>Change password</h3></header>
    <div class="panel-body">
      <form method="post" action="{{ url_for('auth.change_password') }}" class="form" novalidate>
        {{ password_form.csrf_token }}
        <div>{{ password_form.current_password.label }}{{ password_form.current_password(autocomplete="current-password") }}</div>
        <div>{{ password_form.new_password.label }}{{ password_form.new_password(autocomplete="new-password") }}</div>
        <div>{{ password_form.confirm.label }}{{ password_form.confirm(autocomplete="new-password") }}</div>
        {{ password_form.submit(class_="btn btn-primary") }}
      </form>
    </div>
  </section>

  <section class="panel">
    <header class="panel-header">
      <h3>Multi-factor authentication</h3>
      <span class="status-badge {{ 'status-active' if current_user.mfa_enabled else 'status-inactive' }}">
        <span class="led"></span>{{ 'enabled' if current_user.mfa_enabled else 'disabled' }}
      </span>
    </header>
    <div class="panel-body">
      {% if current_user.mfa_enabled %}
        <p>MFA is currently <strong>active</strong> on your account. You'll be prompted for a 6-digit code on every sign-in.</p>
        <form method="post" action="{{ url_for('auth.mfa_disable') }}" class="inline-form" data-confirm="Disable MFA? This reduces your account security.">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-danger">Disable MFA</button>
        </form>
      {% else %}
        <p>MFA is currently <strong>not configured</strong>. Strongly recommended for admin accounts.</p>
        <a href="{{ url_for('auth.mfa_setup') }}" class="btn btn-primary">Set up MFA now</a>
      {% endif %}
    </div>
  </section>
</div>
<style>@media (max-width: 720px) { div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } }</style>
{% endblock %}