{% extends "base.html" %}
{% block title %}New User{% endblock %}
{% block page_title %}New User{% endblock %}
{% block topbar_actions %}<a href="/users" class="btn btn-secondary btn-sm">Cancel</a>{% endblock %}

{% block content %}
<div class="card" style="max-width:440px">
  {% set error = request.query_params.get('error') %}
  {% if error %}<div class="alert alert-error" style="margin-bottom:1rem">{{ error }}</div>{% endif %}

  <form method="post" action="/users">
    <div class="form-group" style="margin-bottom:1rem">
      <label for="username">Username *</label>
      <input type="text" id="username" name="username" required autofocus autocomplete="off">
    </div>
    <div class="form-group" style="margin-bottom:1rem">
      <label for="password">Password *</label>
      <input type="password" id="password" name="password" required autocomplete="new-password">
    </div>
    <div class="form-group" style="margin-bottom:1rem">
      <label for="role">Role</label>
      <select id="role" name="role">
        {% for r in roles %}
          <option value="{{ r }}">{{ r }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group" style="margin-bottom:1.5rem">
      <label for="employee_id">Linked Employee</label>
      <select id="employee_id" name="employee_id">
        <option value="">— None —</option>
        {% for emp in employees %}
          <option value="{{ emp.id }}">{{ emp.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div style="display:flex;gap:.5rem">
      <button type="submit" class="btn btn-primary">Create User</button>
      <a href="/users" class="btn btn-secondary">Cancel</a>
    </div>
  </form>
</div>
{% endblock %}