<!DOCTYPE html>
<html lang="en">
<head>
    <title>Create New User</title>
    <style>
        {% include "_user_form_styles.html" %}
    </style>
</head>
<body>
    <div class="nav-links">
        <a href="/admin/users">← Back to Users</a>
        <a href="/admin">Admin Panel</a>
        <a href="/logout">Logout</a>
        <div style="float: right; font-size: 12px; color: #666;">👤 {{ handler.get_display_username() }}</div>
    </div>
    
    <h2>Create New User</h2>
    
    {% if error %}
        <div class="error">{{ escape(error) }}</div>
    {% end %}
    
    <div class="section">
        <form method="POST">
            {% raw xsrf_form_html() %}
            
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required 
                       pattern="[a-zA-Z0-9_-]+" 
                       title="Username can only contain letters, numbers, underscores, and hyphens"
                       minlength="3" maxlength="50">
                <div class="help-text">3-50 characters, letters, numbers, underscore, and hyphen only</div>
            </div>
            
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
                <div class="help-text">Check admin settings for password complexity requirements</div>
            </div>
            
            <div class="form-group">
                <label for="role">Role:</label>
                <select id="role" name="role">
                    <option value="user">User</option>
                    <option value="admin">Admin</option>
                </select>
                <div class="help-text">Admin users can manage other users and system settings</div>
            </div>
            
            <div class="form-group">
                <span></span>
                <input type="submit" value="Create User" class="btn btn-primary">
                <a href="/admin/users" class="btn">Cancel</a>
            </div>
        </form>
    </div>
    
    <div class="section">
        <h3>User Roles Explained</h3>
        <ul>
            <li><strong>User:</strong> Can access files, upload, download, and use all file management features based on system settings</li>
            <li><strong>Admin:</strong> All user permissions plus ability to manage other users, modify system settings, and access admin panel</li>
        </ul>
    </div>
</body>
</html>