{% extends 'base.html' %}

{% block title %}ساخت حساب | آکادمی مهبد نتاج{% endblock %}

{% block content %}
<div class="auth-wrapper">
    <div class="auth-card">
        <div style="margin-bottom: 1.5rem;">
            <i class="bi bi-person-plus-fill" style="font-size: 3rem; color: var(--gold-light);"></i>
        </div>
        <h2>ساخت <span>حساب کاربری</span></h2>
        <p style="color: var(--text-muted); font-size: 0.95rem; margin-bottom: 2rem;">
            به جمع یادگیرندگانی بپیوندید که برای رشد حرفه‌ای خود قدم برداشته‌اند.
        </p>

        <form method="POST">
            {% csrf_token %}
            {{ form.non_field_errors }}
            <div class="form-group">
                <label for="name">نام و نام خانوادگی</label>
                <div style="position: relative;">
                    <i class="bi bi-person" style="position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-dim);"></i>
                    <input type="text" id="name" name="name" value="{{ form.name.value|default:'' }}" placeholder="نام و نام خانوادگی" class="form-control" autocomplete="name" required>
                </div>
            </div>

            <div class="form-group">
                <label for="phone">شماره موبایل</label>
                <div style="position: relative;">
                    <i class="bi bi-phone" style="position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-dim);"></i>
                    <input type="tel" id="phone" name="phone" value="{{ form.phone.value|default:'' }}" placeholder="09123456789" class="form-control" inputmode="tel" autocomplete="tel" required>
                </div>
                {{ form.phone.errors }}
            </div>

            <div class="form-group">
                <label for="email">ایمیل (اختیاری)</label>
                <div style="position: relative;">
                    <i class="bi bi-envelope" style="position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-dim);"></i>
                    <input type="email" id="email" name="email" value="{{ form.email.value|default:'' }}" placeholder="name@example.com" class="form-control" autocomplete="email">
                </div>
            </div>

            <button type="submit" class="btn-gold" style="width: 100%; justify-content: center; margin-top: 1rem;">
                <i class="bi bi-phone"></i> دریافت کد تأیید
            </button>
        </form>

        <div style="margin-top: 2rem; border-top: 1px solid var(--border-subtle); padding-top: 1.5rem; font-size: 0.9rem; color: var(--text-muted);">
            قبلاً ثبت‌نام کرده‌اید؟ <a href="{% url 'courses:login' %}" style="color: var(--gold-light); font-weight: 600;">وارد شوید</a>
        </div>
    </div>
</div>
{% endblock %}