{% extends "base.html" %}

{% block title %}Security · {{ assistant }}{% endblock %}

{% block main_class %}form{% endblock %}

{% block content %}
<div class="page-title">
  <div><div class="label">Settings</div><h1>Profile and security</h1></div>
</div>

<div class="settings-layout">
<section class="panel" aria-labelledby="profile-title">
  <div class="panel-header"><h2 class="label" id="profile-title">Profile</h2></div>
  <form method="post" action="/settings/profile" class="panel-section form">
    {% if saved %}<div class="alert alert-success" role="status"><span class="alert-tag">✓ DONE</span><span>The profile was saved.</span></div>{% endif %}
    <div class="field">
      <label class="label" for="profile-name">Your name</label>
      <input class="input" id="profile-name" name="name" value="{{ name }}" autocomplete="given-name" maxlength="40" placeholder="Shown in the greeting, e.g. “Good morning, Tony”">
    </div>
    <div class="field">
      <label class="label" for="profile-assistant">Your assistant's name</label>
      <input class="input" id="profile-assistant" name="assistant" value="{{ assistant_name }}" maxlength="40" autocomplete="off" spellcheck="false" placeholder="e.g. J.A.R.V.I.S., Iris, HAL 9000">
      <span class="muted" style="font-size: 12.5px">Shown in the middle of the orb and in the header, and the brief is written as it. Write it as you want to see it, e.g. with dots.</span>
    </div>
    <fieldset class="field color-field">
      <legend class="label">Your assistant's color</legend>
      <div class="color-swatches">
        {% for key, (label, hue, swatch) in colors.items() %}
        <label class="color-swatch" title="{{ label }}">
          <input type="radio" name="color" value="{{ key }}" {% if key == assistant_color %}checked{% endif %}>
          <span class="color-dot" style="--swatch: {{ swatch }}" aria-hidden="true"></span>
          <span>{{ label }}</span>
        </label>
        {% endfor %}
      </div>
      <span class="muted" style="font-size: 12.5px">The color of the orb on the welcome screen.</span>
    </fieldset>
    <div class="actions"><button type="submit" class="btn btn-primary">Save</button></div>
  </form>
</section>

<div class="settings-column">
<section class="panel" aria-labelledby="passkeys-title">
  <div class="panel-header"><h2 class="label" id="passkeys-title">Passkeys</h2></div>
  <div class="panel-section">
    <p class="muted" style="margin: 0">Sign in with Face ID, Touch ID, Windows Hello or a security key instead of your password.</p>
    {% if passkeys %}
    <ul class="list">
      {% for passkey in passkeys %}
      <li class="row spread">
        <span style="min-width: 0">
          <span style="display: block; font-weight: 500">{{ passkey.name }}</span>
          <span class="label">Added {{ passkey.created_at | localtime("%-d %b %Y") }}{% if passkey.last_used_at %} · last used {{ passkey.last_used_at | localtime("%-d %b %Y") }}{% endif %}</span>
        </span>
        <form method="post" action="/settings/security/passkeys/{{ passkey.id }}/delete">
          <button type="submit" class="btn btn-danger">Remove</button>
        </form>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="label" style="margin: 0">○ No passkeys yet</p>
    {% endif %}
  </div>
  <form class="panel-section form" data-passkey-register hx-boost="false">
    <div class="field">
      <label class="label" for="passkey-name">Name</label>
      <input class="input" id="passkey-name" type="text" name="name" maxlength="100" placeholder="e.g. MacBook, iPhone" required>
    </div>
    <div class="actions"><button type="submit" class="btn btn-primary">Add a passkey</button></div>
    <div class="alert alert-error" role="alert" data-passkey-error hidden></div>
  </form>
</section>

<section class="panel" aria-labelledby="password-title">
  <div class="panel-header"><h2 class="label" id="password-title">Password</h2></div>
  <form method="post" action="/settings/security/password" class="panel-section form">
    <p class="muted" style="margin: 0">Changing the password signs you out on all other devices.</p>
    {% if changed %}<div class="alert alert-success" role="status"><span class="alert-tag">✓ DONE</span><span>The password was changed.</span></div>{% endif %}
    {% if error %}<div class="alert alert-error" role="alert"><span class="alert-tag">✕ ERROR</span><span>{{ error }}</span></div>{% endif %}
    <div class="field">
      <label class="label" for="current-password">Current password</label>
      <input class="input" id="current-password" type="password" name="current_password" autocomplete="current-password" required>
    </div>
    <div class="field">
      <label class="label" for="new-password">New password</label>
      <input class="input" id="new-password" type="password" name="password" autocomplete="new-password" minlength="{{ min_password_length }}" required>
    </div>
    <div class="field">
      <label class="label" for="new-password-confirmation">Confirm new password</label>
      <input class="input" id="new-password-confirmation" type="password" name="password_confirmation" autocomplete="new-password" minlength="{{ min_password_length }}" required>
    </div>
    <div class="actions"><button type="submit" class="btn btn-primary">Change password</button></div>
  </form>
</section>
</div>
</div>
{% endblock %}