{% extends "layout.html" %}
{% block content %}

<section class="ui-shell">
<div class="space-y-5 max-w-lg">

  <div>
    <p class="ui-eyebrow">Admin / <a href="/admin/users" class="hover:underline">Users</a></p>
    <h1 class="ui-page-title mt-0">New User</h1>
    <p class="ui-page-subtitle">Create a new Governor account.</p>
  </div>

  <div class="ui-pane p-6">
    {% if error %}
    <div class="mb-5 rounded px-4 py-3 text-sm border border-rose-300 dark:border-rose-700 bg-rose-50 dark:bg-rose-950/40 text-rose-700 dark:text-rose-300">
      {{ error }}
    </div>
    {% endif %}

    <form method="post" action="/admin/users/new" class="ui-form-scope space-y-5">

      <div>
        <label class="ui-form-label" for="display_name">Display Name</label>
        <input class="ui-form-input mt-2 px-4 py-3 w-full"
               type="text" id="display_name" name="display_name"
               value="{{ form.display_name if form else '' }}"
               placeholder="Jane Smith" required autofocus />
      </div>

      <div>
        <label class="ui-form-label" for="email">Email</label>
        <input class="ui-form-input mt-2 px-4 py-3 w-full"
               type="email" id="email" name="email"
               value="{{ form.email if form else '' }}"
               placeholder="jane@example.com" required />
      </div>

      <div>
        <label class="ui-form-label" for="password">Password</label>
        <input class="ui-form-input mt-2 px-4 py-3 w-full"
               type="password" id="password" name="password"
               placeholder="Min. 8 characters" required />
      </div>

      <div class="flex items-center gap-3">
        <input type="checkbox" id="is_admin" name="is_admin" value="true"
               {% if form and form.is_admin %}checked{% endif %}
               class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 text-brand-500 focus:ring-brand-500/30" />
        <label for="is_admin" class="text-sm text-slate-700 dark:text-slate-300">
          Grant admin access
        </label>
      </div>

      <div class="flex items-center gap-3 pt-1">
        <button type="submit" class="ui-btn-primary">Create User</button>
        <a href="/admin/users" class="text-sm text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 transition-colors">
          Cancel
        </a>
      </div>

    </form>
  </div>

</div>
</section>
{% endblock %}