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

{% block title %}ثبت نام{% endblock %}

{% block content %}
<div style="max-width: 600px; margin: 2rem auto;">
    <div class="card">
        <div class="card-header">
            <h2>ثبت نام در سیستم</h2>
        </div>
        <div class="card-body">
            <form method="POST">
                {% csrf_token %}
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">نام</label>
                        <input type="text" class="form-control" name="first_name" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">نام خانوادگی</label>
                        <input type="text" class="form-control" name="last_name" required>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">شماره تلفن</label>
                        <input type="tel" class="form-control" name="phone" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">کد ملی</label>
                        <input type="text" class="form-control" name="national_code" required>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">شماره شناسنامه</label>
                        <input type="text" class="form-control" name="shenasnameh_code" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">استان</label>
                        <select class="form-control" name="province" required>
                            <option value="">انتخاب استان</option>
                            <option value="قزوین">قزوین</option>
                            <option value="تهران">تهران</option>
                            <option value="کرمان">کرمان</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">نوع کاربر</label>
                    <select class="form-control" name="user_type">
                        <option value="user">کاربر عادی</option>
                        <option value="inspector">بازرس</option>
                    </select>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">رمز عبور</label>
                        <input type="password" class="form-control" name="password1" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">تکرار رمز عبور</label>
                        <input type="password" class="form-control" name="password2" required>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary" style="width: 100%;">ثبت نام</button>
            </form>
            <div style="text-align: center; margin-top: 1rem;">
                <a href="{% url 'login' %}" style="color: var(--primary);">قبلاً ثبت نام کرده‌اید؟ وارد شوید</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}