{% extends "layout.html" %}
{% block title %}Add User – {{ admin_title }}{% endblock %}
{% block content %}
<div class="max-w-md">
<h1 class="text-xl font-semibold text-zinc-900 mb-6">Add User</h1>
{% if error %}
<div class="mb-4 px-4 py-3 rounded-md bg-red-50 border border-red-200 text-red-700 text-sm">
{{ error }}
</div>
{% endif %}
<form method="post" action="/admin/users/new" class="space-y-4"
x-data="{ isSuperuser: false }">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
<div>
<label class="block text-sm font-medium text-zinc-700 mb-1">Username</label>
<input type="text" name="username" required
class="w-full px-3 py-2 border border-zinc-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-zinc-900" />
</div>
<div>
<label class="block text-sm font-medium text-zinc-700 mb-1">Password</label>
<input type="password" name="password" required
class="w-full px-3 py-2 border border-zinc-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-zinc-900" />
</div>
<div x-show="!isSuperuser">
<label class="block text-sm font-medium text-zinc-700 mb-1">Role</label>
<select name="role"
class="w-full px-3 py-2 border border-zinc-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-zinc-900">
<option value="admin">Admin</option>
<option value="viewer">Viewer</option>
</select>
</div>
<div class="flex items-center gap-2">
<input type="checkbox" name="is_superuser" id="is_superuser" value="on"
x-model="isSuperuser"
class="rounded border-zinc-300" />
<label for="is_superuser" class="text-sm font-medium text-zinc-700">Superuser</label>
</div>
<button type="submit"
class="px-4 py-2 bg-zinc-900 text-white text-sm font-medium rounded-md hover:bg-zinc-700 transition-colors">
Create user
</button>
</form>
</div>
{% endblock %}