{% extends 'layouts/base.html' %}

{% block content %}

<div class="panel form-card">
    <h1>Create User</h1>

    <form method="post" class="form-grid">
        <div class="form-group">
            <label>Full Name</label>
            <input name="name" required>
        </div>

        <div class="form-group">
            <label>Email</label>
            <input name="email" type="email" required>
        </div>

        <div class="form-group">
            <label>Phone</label>
            <input name="phone">
        </div>

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

        <div class="form-group">
            <label>Role</label>
            <select name="role">
                <option value="user">User - assigned records only</option>
                <option value="super_admin">Super Admin - full access</option>
            </select>
        </div>

        <div class="form-group">
            <label>Status</label>
            <select name="status">
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
            </select>
        </div>

        <div class="form-group">
            <label>External Access</label>
            <select name="external_access" required>
                <option value="yes" {% if request.form.get('external_access', 'yes') == 'yes' %}selected{% endif %}>Yes - login from any IP</option>
                <option value="no" {% if request.form.get('external_access') == 'no' %}selected{% endif %}>No - use locked Super Admin IP</option>
            </select>
        </div>

        <div class="form-group">
            <label>UI Theme</label>
            <select name="ui_theme">
                <option value="default">Default</option>
                <option value="dark">Dark Brown</option>
                <option value="midnight">Midnight Blue</option>
                <option value="light">Light</option>
                <option value="forest">Forest</option>
                <option value="graphite">Graphite</option>
                <option value="sunrise">Sunrise</option>
                <option value="red">Red</option>
                <option value="bold">Bold Font</option>
                <option value="red-bold">Red + Bold</option>
                <option value="ocean">Ocean</option>
                <option value="plum">Plum</option>
                <option value="rose">Rose</option>
                <option value="slate">Slate</option>
                <option value="aqua">Aqua</option>
                <option value="teal">Teal</option>
            </select>
        </div>

        <label class="check full-width">
            <input type="checkbox" name="can_approve_sales" value="1">
            Allow this user to approve or reject sales orders
        </label>

        <div class="form-actions full-width">
            <button class="btn" type="submit">Save User</button>
        </div>
    </form>
</div>

{% endblock %}