{% extends "base.html" %}

{% block title %}ثبت نام - {{ settings.site_name }}{% endblock %}

{% block content %}

<section style="padding:60px 0;min-height:60vh;display:flex;align-items:center;">
    <div class="container">
        <div style="max-width:500px;margin:0 auto;background:white;padding:40px;border-radius:15px;box-shadow:0 5px 30px rgba(0,0,0,0.1);">
            <div style="text-align:center;margin-bottom:30px;">
                <i class="fas fa-user-plus" style="font-size:60px;color:#0d1b6b;"></i>
                <h2 style="color:#0d1b6b;margin-top:10px;">ثبت نام</h2>
                <p style="color:#888;font-size:14px;">ایجاد حساب کاربری جدید</p>
            </div>
            
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div style="padding:12px;border-radius:8px;margin-bottom:15px;background:{% if category == 'success' %}#d4edda;color:#155724;{% elif category == 'danger' %}#f8d7da;color:#721c24;{% else %}#fff3cd;color:#856404;{% endif %}">
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
            
            <form method="POST">
                <div style="margin-bottom:15px;">
                    <label style="display:block;font-weight:500;margin-bottom:5px;">نام و نام خانوادگی</label>
                    <input type="text" name="fullname" placeholder="نام کامل خود را وارد کنید" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:16px;" required>
                </div>
                <div style="margin-bottom:15px;">
                    <label style="display:block;font-weight:500;margin-bottom:5px;">شماره تماس</label>
                    <input type="tel" name="phone" placeholder="مثال: 09121234567" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:16px;" required>
                </div>
                <div style="margin-bottom:15px;">
                    <label style="display:block;font-weight:500;margin-bottom:5px;">ایمیل (اختیاری)</label>
                    <input type="email" name="email" placeholder="ایمیل خود را وارد کنید" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:16px;">
                </div>
                <div style="margin-bottom:20px;">
                    <label style="display:block;font-weight:500;margin-bottom:5px;">رمز عبور</label>
                    <input type="password" name="password" placeholder="حداقل ۶ کاراکتر" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:16px;" required>
                </div>
                <button type="submit" style="width:100%;background:#0d1b6b;color:white;padding:14px;border:none;border-radius:8px;font-size:18px;font-weight:700;cursor:pointer;">
                    ثبت نام
                </button>
            </form>
            
            <div style="text-align:center;margin-top:20px;padding-top:20px;border-top:1px solid #eee;">
                <span style="color:#888;">قبلاً ثبت نام کرده‌اید؟</span>
                <a href="{{ url_for('login') }}" style="color:#e53935;font-weight:500;">ورود</a>
            </div>
        </div>
    </div>
</section>

{% endblock %}