{% extends "base.html" %}

{% block content %}
<div class="max-w-2xl mx-auto">
    
    <div class="win-card mb-6 animate-bounce-in">
        <h2 class="text-xl font-bold text-slate-800 border-b pb-4 mb-6">تعریف کاربر جدید</h2>
        
        <form method="POST" action="">
            <div class="space-y-4">
                
                <!-- Name -->
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="form-label">نام</label>
                        <input type="text" name="first_name" class="form-input" required>
                    </div>
                    <div>
                        <label class="form-label">نام خانوادگی</label>
                        <input type="text" name="last_name" class="form-input" required>
                    </div>
                </div>

                <!-- Account Info -->
                <div>
                    <label class="form-label">نام کاربری (انگلیسی)</label>
                    <input type="text" name="username" class="form-input text-left" dir="ltr" required>
                </div>

                <div>
                    <label class="form-label">رمز عبور</label>
                    <input type="password" name="password" class="form-input text-left" dir="ltr" required>
                </div>

                <!-- Role Selection -->
                <div>
                    <label class="form-label">نقش کاربری</label>
                    <select name="role" class="form-input">
                        <option value="admin">مدیر سیستم (Admin)</option>
                        <option value="design">طراحی (Design)</option>
                        <option value="warehouse">انباردار (Warehouse)</option>
                        <option value="accounting">حسابداری (Accounting)</option>
                        <option value="printhouse">چاپخانه (Printhouse)</option>
                    </select>
                </div>

                <!-- Submit -->
                <div class="pt-4 flex justify-end gap-3">
                    <button type="button" onclick="history.back()" class="btn-secondary">انصراف</button>
                    <button type="submit" class="btn-primary w-32">ثبت کاربر</button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}