{% extends "layouts/dashboard.html" %}

{% block title %}Add New User - Retoor's Cloud Solutions{% endblock %}

{% block dashboard_head %}
    <link rel="stylesheet" href="/static/css/components/order.css">
{% endblock %}

{% block page_title %}Add New User{% endblock %}

{% block dashboard_content %}
<div class="order-management-layout">
    <section class="quota-overview-card">
        <h2>Create New User Account</h2>
        <p class="subtitle">Add a new user to your team.</p>

        {% if errors %}
        <div class="alert alert-error">
            <ul>
            {% for field, error in errors.items() %}
                <li>{{ error }}</li>
            {% endfor %}
            </ul>
        </div>
        {% endif %}

        <form action="/users/add" method="post" class="order-form">
            <div class="form-group">
                <label for="full_name">Full Name</label>
                <input type="text" id="full_name" name="full_name" required class="form-input" value="{{ form_data.full_name if form_data else '' }}">
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required class="form-input" value="{{ form_data.email if form_data else '' }}">
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required class="form-input">
            </div>
            <div class="form-group">
                <label for="confirm_password">Confirm Password</label>
                <input type="password" id="confirm_password" name="confirm_password" required class="form-input">
            </div>
            <div class="form-group">
                <label for="storage_quota_gb">Storage Quota (GB)</label>
                <custom-slider min="1" max="1000" value="{{ form_data.storage_quota_gb if form_data and form_data.storage_quota_gb else 10 }}" step="1" name="storage_quota_gb"></custom-slider>
            </div>
            <div style="display: flex; gap: 10px; margin-top: 20px;">
                <button type="submit" class="btn-primary">Add User</button>
                <a href="/users" class="btn-outline">Cancel</a>
            </div>
        </form>
    </section>
</div>
{% endblock %}