{% 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-shield-lock-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="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>

            <button type="submit" class="btn-gold" style="width: 100%; justify-content: center; margin-top: 1rem;">
                <i class="bi bi-shield-check"></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:register' %}" style="color: var(--gold-light); font-weight: 600;">ثبت‌نام کنید</a>
        </div>
    </div>
</div>
{% endblock %}