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