{# settings/user_new.html — add an account that signs in with a Steward password (#5336). #}
{% extends "base.html" %}
{% from "_macros.html" import crumbs, page_header %}
{% from "settings/_tabs.html" import settings_tabs %}
{% block title %}Add user — Settings — Steward{% endblock %}
{% block section_tabs %}{{ settings_tabs("users") }}{% endblock %}
{% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Users", "/settings/users/"), ("Add user", "")]) }}{% endblock %}
{% block content %}
{{ page_header("Add user", "Signs in with a Steward password.") }}
{% if error %}<div class="alert alert-error" role="alert">{{ error }}</div>{% endif %}

<form method="post" action="/settings/users/new" class="form-page">{{ csrf_field() }}
  <section class="card form-section" aria-labelledby="new-account">
    <h2 id="new-account" class="section-title">Account</h2>
    <div class="form-pair">
      <div class="field">
        <label class="field-label" for="new-username">Username</label>
        <input class="input" id="new-username" type="text" name="username" maxlength="64"
               value="{{ form.get('username', '') }}" required autocomplete="off">
      </div>
      <div class="field">
        <label class="field-label" for="new-email">Email</label>
        <input class="input" id="new-email" type="email" name="email" maxlength="255"
               value="{{ form.get('email', '') }}" required autocomplete="off">
      </div>
    </div>
    <div class="field">
      <label class="field-label" for="new-role">Role</label>
      <select class="input" id="new-role" name="role">
        {% for r in roles %}<option value="{{ r.value }}" {% if form.get('role', 'viewer') == r.value %}selected{% endif %}>{{ r.value|capitalize }}</option>{% endfor %}
      </select>
      <span class="field-hint">A viewer reads; an operator also runs playbooks and changes monitors, hosts and alerts; an admin also changes Settings and users.</span>
    </div>
  </section>
  <section class="card form-section" aria-labelledby="new-password">
    <h2 id="new-password" class="section-title">Password</h2>
    <div class="form-pair">
      <div class="field">
        <label class="field-label" for="new-pw">Password</label>
        <input class="input" id="new-pw" type="password" name="password" minlength="{{ min_password }}" required autocomplete="new-password">
        <span class="field-hint">At least {{ min_password }} characters. Give it to them yourself; Steward sends no email for it.</span>
      </div>
      <div class="field">
        <label class="field-label" for="new-pw2">Again</label>
        <input class="input" id="new-pw2" type="password" name="confirm" required autocomplete="new-password">
      </div>
    </div>
  </section>
  <div class="form-actions">
    <button type="submit" class="btn">Add user</button>
    <a href="/settings/users/" class="btn btn-ghost">Cancel</a>
  </div>
</form>
{% endblock %}