{% extends "layout.html" %}

{% block title %}Create New User - BZOD{% endblock %}

{% block active_users %}active{% endblock %}

{% block header_title %}Create New User{% endblock %}

{% block content %}
<div style="margin-bottom: 1.5rem;">
    <a href="/admin/users" class="btn btn-secondary" style="padding: 0.5rem 1rem;">
        &larr; Back to Users List
    </a>
</div>

<div class="card" style="max-width: 600px; margin: 0 auto;">
    <form action="/admin/users/create" method="POST">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        
        <h2 style="font-size: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem;">User Account Credentials</h2>
        
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" class="form-input" required autocomplete="username" placeholder="e.g. jdoe">
        </div>

        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" class="form-input" required minlength="8" autocomplete="new-password">
        </div>

        <div class="form-group">
            <label for="account_type">Account Type</label>
            <select id="account_type" name="account_type" class="form-input">
                <option value="standard" selected>Standard</option>
                <option value="admin">Admin</option>
                <option value="organization">Organization</option>
                <option value="service">Service</option>
            </select>
        </div>

        <div class="form-group">
            <label for="metadata">Metadata / Notes (optional)</label>
            <input type="text" id="metadata" name="metadata" class="form-input" placeholder="Department, team, or notes">
        </div>

        <div style="margin-top: 2rem; display: flex; gap: 0.75rem;">
            <button type="submit" class="btn" style="flex-grow: 1;">Create User</button>
            <a href="/admin/users" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}