{% extends "tasks/base.html" %}
{% block title %}Add New User — Staff Panel{% endblock %}
{% block topbar_title %}Add New Staff User{% endblock %}

{% block content %}
<div style="margin-bottom:10px;">
    <a href="{% url 'task_management:staff_access_list' %}" style="font-size:12px;color:var(--s-text3);text-decoration:none;">← Team Access</a>
</div>

<div class="s-card s-card-pad" style="max-width:560px;">
    <div style="margin-bottom:20px;">
        <div class="s-card-title" style="font-size:16px;">Create Staff Account</div>
        <div class="s-card-sub" style="margin-top:3px;">
            Create a new user who can log into the staff operations panel.
        </div>
    </div>

    {% if messages %}
    <ul class="s-messages" style="margin-bottom:16px;">
        {% for message in messages %}
        <li class="{{ message.tags }}">{{ message }}</li>
        {% endfor %}
    </ul>
    {% endif %}

    <form method="post">
        {% csrf_token %}

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
            <div class="staff-form-group">
                <label class="staff-form-label" for="id_first_name">First Name *</label>
                <input type="text" name="first_name" id="id_first_name" class="staff-input"
                       placeholder="Jane" required value="{{ request.POST.first_name }}">
            </div>
            <div class="staff-form-group">
                <label class="staff-form-label" for="id_last_name">Last Name *</label>
                <input type="text" name="last_name" id="id_last_name" class="staff-input"
                       placeholder="Smith" required value="{{ request.POST.last_name }}">
            </div>
        </div>

        <div class="staff-form-group">
            <label class="staff-form-label" for="id_email">Email Address *</label>
            <input type="email" name="email" id="id_email" class="staff-input"
                   placeholder="jane@company.com" required value="{{ request.POST.email }}">
            <div style="font-size:10px;color:var(--s-text3);margin-top:3px;">Used for login and notifications.</div>
        </div>

        <div class="staff-form-group">
            <label class="staff-form-label" for="id_username">Username *</label>
            <input type="text" name="username" id="id_username" class="staff-input"
                   placeholder="janesmith" required autocomplete="off"
                   value="{{ request.POST.username }}">
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
            <div class="staff-form-group">
                <label class="staff-form-label" for="id_password">Password *</label>
                <input type="password" name="password" id="id_password" class="staff-input"
                       placeholder="Min 8 characters" required minlength="8"
                       autocomplete="new-password">
            </div>
            <div class="staff-form-group">
                <label class="staff-form-label" for="id_password2">Confirm Password *</label>
                <input type="password" name="password2" id="id_password2" class="staff-input"
                       placeholder="Repeat password" required minlength="8"
                       autocomplete="new-password">
            </div>
        </div>

        <div class="staff-form-group">
            <label class="staff-form-label" for="id_role">Assign Role</label>
            <select name="role" id="id_role" class="staff-select">
                <option value="">— No role (view only) —</option>
                {% for role in roles %}
                <option value="{{ role.id }}" {% if request.POST.role == role.id|stringformat:"s" %}selected{% endif %}>
                    {{ role.name }}{% if role.description %} — {{ role.description|truncatewords:8 }}{% endif %}
                </option>
                {% endfor %}
            </select>
            <div style="font-size:10px;color:var(--s-text3);margin-top:3px;">
                You can change this later under Team Access → Assign Role.
            </div>
        </div>

        <div style="margin-top:4px;padding:12px;background:var(--s-bg);border:1px solid var(--s-border);border-radius:8px;">
            <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:var(--s-text2);">
                <input type="checkbox" name="is_superuser" class="staff-checkbox"
                       {% if request.POST.is_superuser %}checked{% endif %}>
                <div>
                    <div style="font-weight:600;color:var(--s-navy);">Grant Superuser Access</div>
                    <div style="font-size:11px;color:var(--s-text3);margin-top:2px;">
                        Superusers bypass all permission checks. Use sparingly.
                    </div>
                </div>
            </label>
        </div>

        <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:24px;padding-top:16px;border-top:1px solid var(--s-border);">
            <a href="{% url 'task_management:staff_access_list' %}" class="s-btn s-btn-outline">Cancel</a>
            <button type="submit" class="s-btn s-btn-primary">
                <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor"><path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"/></svg>
                Create User
            </button>
        </div>
    </form>
</div>
{% endblock %}