{# GET /register — crate::pages::register::ui::RegisterPage #}
{% extends "ui/base.html" %}

{% block title %}{{ nav.tr("register-title") }}{% endblock %}

{% block content %}
<main class="login-main">
  <form class="login-card" hx-post="/register" hx-target="#register-status" hx-swap="innerHTML"
        hx-disabled-elt="button" novalidate>
    <h1>{{ nav.tr("register-title") }}</h1>
    <label>{{ nav.tr("field-username") }}<input name="username" autocomplete="username"></label>
    <label>{{ nav.tr("field-email") }}<input name="email" type="email" autocomplete="email"></label>
    <label>{{ nav.tr("login-password") }} <span>{{ nav.tr("login-optional") }}</span><input name="password" type="password" autocomplete="new-password"></label>
    <label>{{ nav.tr("register-confirm-password") }}<input name="password_confirmation" type="password" autocomplete="new-password"></label>
    {#
      The two fields the client offers suggestions for. A datalist keeps the
      lists open — the backend, not this form, decides what is accepted — while
      still showing the same choices the client's suggestion popup does.

      There is no role field: everyone registers as `guest` and an admin
      assigns a real role afterwards.
    #}
    <label>{{ nav.tr("field-timezone") }}<input name="timezone" list="timezone-options" autocomplete="off" placeholder="Europe/Bratislava"></label>
    <datalist id="timezone-options">
      {% for timezone in timezones %}<option value="{{ timezone }}"></option>{% endfor %}
    </datalist>
    <label>{{ nav.tr("field-phone-country") }}<input name="phone_country" list="phone-country-options" autocomplete="off" placeholder="SK"></label>
    <datalist id="phone-country-options">
      {% for country in phone_countries %}<option value="{{ country }}"></option>{% endfor %}
    </datalist>
    <button type="submit">{{ nav.tr("register-button-register") }}</button>
    <p class="login-alt">{{ nav.tr("register-have-account") }} <a href="/login">{{ nav.tr("login-title") }}</a></p>
    <div id="register-status" aria-live="polite"></div>
  </form>
</main>
{% endblock %}