{% extends "base.html" %}
{% from "_macros.html" import icon %}

{% block title %}Your settings - LLeMbas{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
{% endblock %}

{% block body_attrs %} data-authenticated="true"{% endblock %}

{% block body %}
<div class="shell">
  {% include "partials/sidebar.html" %}

  <main class="main">
    <header class="topbar">
      <h1 class="topbar__title">Your settings</h1>
    </header>

    <div class="admin-scroll">
      <div class="admin-page">
        {% if error %}
        <div class="alert alert--error" role="alert">
          {{ icon("warning", "alert__icon") }} <span>{{ error }}</span>
        </div>
        {% endif %}
        {% if saved %}
        <div class="alert alert--success" role="status">
          {{ icon("check", "icon--sm") }} <span>{{ saved }}</span>
        </div>
        {% endif %}

        <section class="card">
          <h2 class="card__title">Account</h2>
          <div class="field">
            <span class="field__label">Name</span>
            <p>{{ user.name }}</p>
          </div>
          <div class="field">
            <span class="field__label">Email</span>
            <p class="mono text-sm">{{ user.email }}</p>
          </div>
          <div class="field">
            <span class="field__label">Role</span>
            <p>
              <span class="badge {{ 'badge--gold' if user.is_admin }}">{{ user.role }}</span>
            </p>
          </div>
        </section>

        <section class="card">
          <h2 class="card__title">Appearance</h2>
          <div class="row" style="gap: var(--sp-3)">
            <button class="btn" type="button" onclick="window.lembas.applyTheme('moria')">
              {{ icon("moon", "icon--sm") }} Moria
            </button>
            <button class="btn" type="button" onclick="window.lembas.applyTheme('shire')">
              {{ icon("sun", "icon--sm") }} Shire
            </button>
          </div>
          <p class="field__hint" style="margin-top: var(--sp-3)">
            Moria is the dark theme, Shire the light one. Your choice is saved
            to this browser and to your account.
          </p>
        </section>

        <section class="card">
          <h2 class="card__title">Change password</h2>
          <form method="post" action="/api/preferences/password">
            <div class="field">
              <label class="field__label" for="current-password">Current password</label>
              <input class="input" type="password" id="current-password"
                     name="current_password" required autocomplete="current-password">
            </div>
            <div class="field">
              <label class="field__label" for="new-password">New password</label>
              <input class="input" type="password" id="new-password" name="new_password"
                     required minlength="8" autocomplete="new-password">
              <p class="field__hint">At least 8 characters.</p>
            </div>
            <div class="field">
              <label class="field__label" for="confirm-password">Confirm new password</label>
              <input class="input" type="password" id="confirm-password"
                     name="confirm_password" required minlength="8"
                     autocomplete="new-password">
            </div>
            <button class="btn btn--primary" type="submit">Change password</button>
            <p class="field__hint" style="margin-top: var(--sp-3)">
              Every other session is signed out when the password changes. You
              stay signed in here.
            </p>
          </form>
        </section>

        <section class="card">
          <h2 class="card__title">Session</h2>
          <form method="post" action="/auth/logout">
            <button class="btn btn--danger" type="submit">
              {{ icon("logout", "icon--sm") }} Sign out
            </button>
          </form>
        </section>
      </div>
    </div>
  </main>
</div>
{% endblock %}