{% 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>

<section class="panel" style="margin-bottom: 20px;">
  <header class="panel-header"><h3>Profile avatar</h3></header>
  <div class="panel-body">
    <div class="avatar-row">
      <div class="avatar-preview">
        {% if current_user.has_avatar %}
          <img src="{{ url_for('auth.avatar', user_id=current_user.id) }}?v={{ range(1,100000)|random }}" alt="Current avatar">
        {% else %}
          <span class="avatar-initials">{{ current_user.initials }}</span>
        {% endif %}
      </div>
      <div class="avatar-actions">
        <form method="post" action="{{ url_for('auth.avatar_upload') }}" enctype="multipart/form-data" class="form">
          {{ avatar_form.csrf_token }}
          <div>{{ avatar_form.avatar.label }}{{ avatar_form.avatar(accept="image/*") }}</div>
          <div class="help">PNG, JPG, GIF or WebP. Squared and resized to {{ 256 }}×{{ 256 }} automatically. Max 2&nbsp;MB.</div>
          <div class="btn-row">
            {{ avatar_form.submit(class_="btn btn-primary") }}
            {% if current_user.has_avatar %}
              <button type="submit" form="avatar-remove-form" class="btn btn-ghost">Remove avatar</button>
            {% endif %}
          </div>
        </form>
        {% if current_user.has_avatar %}
        <form method="post" action="{{ url_for('auth.avatar_remove') }}" id="avatar-remove-form" class="inline-form" data-confirm="Remove your avatar?">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        </form>
        {% endif %}
      </div>
    </div>
  </div>
</section>

<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 %}