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

{% block title %}Register{% 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>Register</h1>
    <label>Username<input name="username" autocomplete="username"></label>
    <label>Email<input name="email" type="email" autocomplete="email"></label>
    <label>Password <span>(optional)</span><input name="password" type="password" autocomplete="new-password"></label>
    <label>Confirm password<input name="password_confirmation" type="password" autocomplete="new-password"></label>
    {#
      The three 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.
    #}
    <label>Role<input name="role" list="role-options" autocomplete="off"></label>
    <datalist id="role-options">
      {% for role in roles %}<option value="{{ role }}"></option>{% endfor %}
    </datalist>
    <label>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>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">Register</button>
    <p class="login-alt">Already have an account? <a href="/login">Sign in</a></p>
    <div id="register-status" aria-live="polite"></div>
  </form>
</main>
{% endblock %}