{% extends "base.html" %}
{% block title %}New User — {{ library_name() }}{% endblock %}
{% block content %}
<nav aria-label="breadcrumb">
  <ul>
    <li><a href="/ui/users">Users</a></li>
    <li>New User</li>
  </ul>
</nav>

<h2>Create User</h2>

{% if error %}<p class="error-banner">{{ error }}</p>{% endif %}

<form method="post" action="/ui/users/new" id="user-new-form">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" required autofocus autocomplete="off">
  <label for="email">Email <small>(optional)</small></label>
  <input type="email" id="email" name="email" autocomplete="off">
  <label for="password">Password</label>
  <input type="password" id="password" name="password" required autocomplete="new-password">
  <label for="role_name">Role</label>
  <select id="role_name" name="role_name" required>
    {% for r in roles %}
    <option value="{{ r.name }}"{% if r.name == "Patron" %} selected{% endif %}>{{ r.name }}</option>
    {% endfor %}
  </select>
  <small style="color: var(--pico-color-amber-500)">Share this password with the user through a secure channel (e.g. Signal, face-to-face). They can update it after logging in.</small>

  <div id="patron-section" style="display:none; margin-top:1rem; padding:0.75rem 1rem; border:1px solid var(--pico-muted-border-color); border-radius:var(--pico-border-radius)">
    <p><strong>Patron record</strong> — a Patron-role user needs a linked patron record.</p>
    <label>
      <input type="radio" name="patron_mode" value="link"
             {% if unlinked_patrons %}checked{% endif %}
             {% if not unlinked_patrons %}disabled{% endif %}> Link an existing card-only patron
    </label>
    {% if not unlinked_patrons %}
    <small style="display:block; margin-left:1.5rem; color:var(--pico-muted-color)">No unlinked patrons available — create a new one below.</small>
    {% endif %}
    {% if unlinked_patrons %}
    <select name="link_patron_card" id="patron-link-select" style="margin-left:1.5rem; width:auto">
      {% for p in unlinked_patrons %}
      <option value="{{ p.library_card_number }}">{{ p.full_name }} ({{ p.library_card_number }})</option>
      {% endfor %}
    </select>
    {% else %}
    <select name="link_patron_card" id="patron-link-select" style="margin-left:1.5rem; width:auto; display:none" disabled></select>
    {% endif %}
    <label style="margin-top:0.5rem">
      <input type="radio" name="patron_mode" value="create"
             {% if not unlinked_patrons %}checked{% endif %}> Create a new patron record
    </label>
    <div id="patron-create-fields" style="{% if unlinked_patrons %}display:none;{% endif %}margin-left:1.5rem; margin-top:0.5rem">
      <label for="patron_full_name">Full name <span style="color:red">*</span>
        <input type="text" id="patron_full_name" name="patron_full_name" autocomplete="off">
      </label>
      <label for="patron_email">Email
        <input type="email" id="patron_email" name="patron_email" autocomplete="off">
      </label>
      <label for="patron_phone">Phone
        <input type="tel" id="patron_phone" name="patron_phone">
      </label>
      <label for="patron_expires">Card expires
        <input type="date" id="patron_expires" name="patron_expires">
      </label>
    </div>
  </div>

  <div style="margin-top:1rem; display:flex; gap:0.5rem">
    <button type="submit">Create User</button>
    <a href="/ui/users" role="button" class="outline secondary">Cancel</a>
  </div>
</form>

<script nonce="{{ csp_nonce(request) }}">
(function() {
  var roleSelect = document.getElementById('role_name');
  var patronSection = document.getElementById('patron-section');
  var patronModeRadios = document.querySelectorAll('input[name="patron_mode"]');
  var createFields = document.getElementById('patron-create-fields');
  var linkSelect = document.getElementById('patron-link-select');
  var emailInput = document.getElementById('email');
  var patronEmailInput = document.getElementById('patron_email');

  function updatePatronSection() {
    patronSection.style.display = roleSelect.value === 'Patron' ? 'block' : 'none';
  }

  function updateCreateFields() {
    if (!createFields) return;
    var mode = document.querySelector('input[name="patron_mode"]:checked');
    var isCreate = mode && mode.value === 'create';
    createFields.style.display = isCreate ? 'block' : 'none';
    if (linkSelect) linkSelect.style.display = (!isCreate) ? 'block' : 'none';
  }

  roleSelect.addEventListener('change', updatePatronSection);
  patronModeRadios.forEach(function(r) { r.addEventListener('change', updateCreateFields); });

  if (emailInput && patronEmailInput) {
    var patronEmailDirty = false;
    patronEmailInput.addEventListener('input', function() { patronEmailDirty = true; });
    emailInput.addEventListener('input', function() {
      if (!patronEmailDirty) patronEmailInput.value = emailInput.value;
    });
  }

  updatePatronSection();
  updateCreateFields();
})();
</script>
{% endblock %}