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

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

    {#
      Tabs are radio inputs plus sibling selectors: no JavaScript, and the
      chosen tab survives a re-render because the browser keeps the checked
      state. Each panel is a real fragment of the page, not a fetch.
    #}
    <div class="tabs">
      <div class="tabs__bar" role="tablist">
        <input class="visually-hidden" type="radio" name="settings-tab" id="tab-account" checked>
        <label class="tabs__tab" for="tab-account">{{ icon("user", "icon--sm") }} Account</label>

        <input class="visually-hidden" type="radio" name="settings-tab" id="tab-models">
        <label class="tabs__tab" for="tab-models">{{ icon("sliders", "icon--sm") }} Models</label>

        <input class="visually-hidden" type="radio" name="settings-tab" id="tab-appearance">
        <label class="tabs__tab" for="tab-appearance">{{ icon("sun", "icon--sm") }} Appearance</label>

        <input class="visually-hidden" type="radio" name="settings-tab" id="tab-security">
        <label class="tabs__tab" for="tab-security">{{ icon("key", "icon--sm") }} Security</label>
      </div>

      <div class="tabs__body">
        <div class="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 %}

          {# --- Account --- #}
          <section class="tabs__panel" data-tab="tab-account">
            <div class="card">
              <h2 class="card__title">Account</h2>
              <dl class="detail-list">
                <dt>Name</dt><dd>{{ user.name }}</dd>
                <dt>Email</dt><dd class="mono">{{ user.email }}</dd>
                <dt>Role</dt>
                <dd><span class="badge {{ 'badge--gold' if user.is_admin }}">{{ user.role }}</span></dd>
                <dt>Groups</dt>
                <dd>
                  {% if user.groups %}
                    {% for group in user.groups %}<span class="badge">{{ group.name }}</span> {% endfor %}
                  {% else %}
                    <span class="faint">None</span>
                  {% endif %}
                </dd>
              </dl>
            </div>

            <div class="card">
              <h2 class="card__title">What you can do</h2>
              <p class="card__lede">
                {% if user.is_admin %}
                  You are an administrator, so every permission applies.
                {% else %}
                  From the instance baseline plus whatever your groups add.
                {% endif %}
              </p>
              <ul class="perm-list">
                {% for key, granted in can.items() %}
                <li class="perm-list__item">
                  <span class="perm-list__state {{ 'is-on' if granted }}">
                    {{ icon("check" if granted else "x", "icon--sm") }}
                  </span>
                  <code>{{ key }}</code>
                </li>
                {% endfor %}
              </ul>
            </div>
          </section>

          {# --- Models --- #}
          <section class="tabs__panel" data-tab="tab-models">
            <div class="card">
              <h2 class="card__title">Default model</h2>
              <p class="card__lede">
                What a new chat starts with. Existing chats keep their model.
              </p>
              {% if models %}
              <form method="post" action="/api/preferences/default-model">
                <div class="field">
                  <select class="select" name="model_id" aria-label="Default model">
                    <option value="">Use the instance default</option>
                    {% for model in models %}
                    <option value="{{ model.model_id }}"
                            {{ 'selected' if model.model_id == user.settings_json.get('default_model') }}>
                      {{ model.label }}
                    </option>
                    {% endfor %}
                  </select>
                </div>
                <button class="btn btn--primary" type="submit">Save</button>
              </form>
              {% else %}
              <p class="muted text-sm">No models are available to you yet.</p>
              {% endif %}
            </div>

            {% if models %}
            <div class="card">
              <h2 class="card__title">Available to you</h2>
              <p class="card__lede">In the order an administrator arranged them.</p>
              <ul class="model-list">
                {% for model in models %}
                <li class="model-list__item">
                  <div class="row" style="gap: var(--sp-2); min-width: 0">
                    {{ model_avatar(model, cls="nav-item__avatar") }}
                    <div style="min-width: 0">
                      <strong>{{ model.label }}</strong>
                      {% if model.description %}
                      <div class="text-xs faint">{{ model.description }}</div>
                      {% endif %}
                    </div>
                  </div>
                  <div class="btn-row">
                    {% for name, on in (model.capabilities_json or {}).items() %}
                      {% if on %}<span class="badge badge--gold">{{ name }}</span>{% endif %}
                    {% endfor %}
                    {% if model.pinned %}<span class="badge">pinned</span>{% endif %}
                  </div>
                </li>
                {% endfor %}
              </ul>
            </div>
            {% endif %}
          </section>

          {# --- Appearance --- #}
          <section class="tabs__panel" data-tab="tab-appearance">
            <div class="card">
              <h2 class="card__title">Theme</h2>
              <p class="card__lede">
                Saved to this browser and to your account, so it follows you.
              </p>
              <div class="btn-row">
                <button class="btn" type="button" onclick="window.lembas.applyTheme('moria')">
                  {{ icon("moon", "icon--sm") }} Moria — dark
                </button>
                <button class="btn" type="button" onclick="window.lembas.applyTheme('shire')">
                  {{ icon("sun", "icon--sm") }} Shire — light
                </button>
              </div>
            </div>
          </section>

          {# --- Security --- #}
          <section class="tabs__panel" data-tab="tab-security">
            <div class="card">
              <h2 class="card__title">Change password</h2>
              <p class="card__lede">
                Every other session is signed out when the password changes.
                You stay signed in here.
              </p>
              <form method="post" action="/api/preferences/password">
                <div class="grid grid--2">
                  <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"></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>
                </div>
                <button class="btn btn--primary" type="submit">Change password</button>
              </form>
            </div>

            <div 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>
            </div>
          </section>
        </div>
      </div>
    </div>
  </main>
</div>
{% endblock %}