{% extends "_partials/_app_shell.html" %}
{% block title %}Settings — allowthem{% endblock %}

{% block pagetitle %}Settings{% endblock %}
{% block crumbs %}Account · Settings{% endblock %}

{% block content %}
  <div class="wf-panel wf-shrink-0">
    <div class="wf-panel-head">
      <div class="wf-panel-title">Profile</div>
    </div>
    <div class="wf-panel-body">
      {% if profile_error %}<div class="wf-alert err"><div class="wf-alert-bar"></div>{{ profile_error }}</div>{% endif %}
      {% if profile_success %}<div class="wf-alert ok"><div class="wf-alert-bar"></div>{{ profile_success }}</div>{% endif %}
      <form method="post" action="/settings" class="wf-f wf-col wf-gap-5">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <div class="wf-field">
          <label class="wf-label" for="email">Email</label>
          <input class="wf-input" type="email" id="email" name="email" value="{{ email }}" required autocomplete="email">
        </div>
        <div class="wf-field">
          <label class="wf-label" for="username">Username</label>
          <input class="wf-input" type="text" id="username" name="username" value="{{ username }}" autocomplete="username">
        </div>
        <div class="wf-f wf-jc-e">
          <button class="wf-btn primary" type="submit">Save profile</button>
        </div>
      </form>
    </div>
  </div>

  <div class="wf-panel wf-shrink-0">
    <div class="wf-panel-head">
      <div class="wf-panel-title">Change password</div>
    </div>
    <div class="wf-panel-body">
      {% if password_error %}<div class="wf-alert err"><div class="wf-alert-bar"></div>{{ password_error }}</div>{% endif %}
      {% if password_success %}<div class="wf-alert ok"><div class="wf-alert-bar"></div>{{ password_success }}</div>{% endif %}
      <form method="post" action="/settings/password" class="wf-f wf-col wf-gap-5">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <div class="wf-field">
          <label class="wf-label" for="current_password">Current password</label>
          <input class="wf-input" type="password" id="current_password" name="current_password" required autocomplete="current-password">
        </div>
        <div class="wf-field">
          <label class="wf-label" for="new_password">New password</label>
          <input class="wf-input" type="password" id="new_password" name="new_password" required minlength="8" autocomplete="new-password">
        </div>
        <div class="wf-field">
          <label class="wf-label" for="new_password_confirm">Confirm new password</label>
          <input class="wf-input" type="password" id="new_password_confirm" name="new_password_confirm" required minlength="8" autocomplete="new-password">
        </div>
        <div class="wf-f wf-jc-e">
          <button class="wf-btn primary" type="submit">Change password</button>
        </div>
      </form>
    </div>
  </div>

  <div class="wf-panel wf-shrink-0">
    <div class="wf-panel-head">
      <div class="wf-panel-title">Two-factor authentication</div>
    </div>
    <div class="wf-panel-body">
      {% if mfa_enabled %}
        <p>MFA is <span class="wf-tag ok"><span class="dot"></span>Enabled</span>.
          {{ mfa_recovery_remaining }} of 10 recovery codes remaining.</p>
        <form method="post" action="/settings/mfa/disable">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <button class="wf-btn danger" type="submit">Disable 2FA</button>
        </form>
      {% else %}
        <p>MFA is <span class="wf-tag">Not configured</span>.</p>
        <a class="wf-btn primary" href="/settings/mfa/setup">Enable 2FA</a>
      {% endif %}
    </div>
  </div>

  <div class="wf-panel wf-shrink-0">
    <div class="wf-panel-head">
      <div class="wf-panel-title">Linked accounts</div>
    </div>
    <div class="wf-panel-body">
      {% if oauth_accounts %}
        <dl class="wf-dl flush">
          {% for account in oauth_accounts %}
            <div class="wf-dl-row">
              <dt>{{ account.provider }}</dt>
              <dd>{{ account.email }}</dd>
            </div>
          {% endfor %}
        </dl>
      {% else %}
        <div class="wf-empty dense">
          <div class="wf-empty-title">No linked accounts</div>
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}