{% extends "base.html" %}

{% block title %}ورود | {{ site_name }} - مرجع تخصصی تجهیزات صنعتی{% endblock %}

{% block meta_description %}ورود به حساب کاربری {{ site_name }} - خرید تجهیزات صنعتی، ابزارآلات و قطعات صنعتی با بهترین قیمت{% endblock %}

{% block meta_keywords %}ورود, حساب کاربری, {{ site_name }}, تجهیزات صنعتی, ابزارآلات{% endblock %}

{% block og_title %}ورود به {{ site_name }} | حساب کاربری{% endblock %}

{% block og_description %}به حساب کاربری خود وارد شوید و از خرید آسان و تخفیف‌های ویژه {{ site_name }} بهره‌مند شوید{% endblock %}

{% block content %}

<!-- ============================================================
     HERO LOGIN
     ============================================================ -->
<section style="
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #2563eb 100%);
    padding: 40px 0 30px;
    color: white;
    border-radius: 0 0 40px 40px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
">
    <div style="position: absolute; top: -50%; right: -20%; width: 500px; height: 500px; background: rgba(37,99,235,0.1); border-radius: 50%;"></div>
    <div style="position: absolute; bottom: -30%; left: -10%; width: 400px; height: 400px; background: rgba(37,99,235,0.08); border-radius: 50%;"></div>
    
    <div class="container position-relative">
        <div class="row align-items-center">
            <div class="col-lg-8 col-md-10 col-12">
                <div style="display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;">
                    <span style="background: rgba(34,197,94,0.2); color: #4ade80; padding: 4px 14px; border-radius: 50px; font-size: 12px; font-weight: 600; border: 1px solid rgba(34,197,94,0.2);">
                        <i class="fas fa-shield-alt me-1"></i> امنیت بالا
                    </span>
                    <span style="background: rgba(96,165,250,0.2); color: #60a5fa; padding: 4px 14px; border-radius: 50px; font-size: 12px; font-weight: 600; border: 1px solid rgba(96,165,250,0.2);">
                        <i class="fas fa-clock me-1"></i> ورود سریع
                    </span>
                </div>
                
                <h1 style="font-size: 38px; font-weight: 900; line-height: 1.2;">
                    خوش 
                    <span style="background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
                        آمدید
                    </span>
                </h1>
                <p style="font-size: 17px; opacity: 0.9; margin: 12px 0 0; max-width: 500px;">
                    برای دسترسی به حساب کاربری، سفارشات و تخفیف‌های ویژه وارد شوید
                </p>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     LOGIN FORM
     ============================================================ -->
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-5 col-md-7 col-12">
            <div class="card shadow-sm border-0" style="border-radius: var(--radius-lg); overflow: hidden;">
                <!-- ===== هدر کارت ===== -->
                <div style="
                    background: linear-gradient(135deg, #0f172a, #1e293b);
                    padding: 24px 30px;
                    color: white;
                    border-bottom: 3px solid var(--primary);
                ">
                    <div style="display: flex; align-items: center; gap: 14px;">
                        <div style="
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            background: rgba(37,99,235,0.2);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 24px;
                            color: var(--primary);
                        ">
                            <i class="fas fa-sign-in-alt"></i>
                        </div>
                        <div>
                            <h3 style="margin: 0; font-weight: 700; font-size: 20px;">ورود به حساب</h3>
                            <p style="margin: 0; opacity: 0.7; font-size: 13px;">{{ site_name }}</p>
                        </div>
                    </div>
                </div>
                
                <!-- ===== فرم ===== -->
                <div class="card-body" style="padding: 30px;">
                    <form method="POST" action="{{ url_for('login') }}">
                        <!-- ===== نام کاربری / ایمیل / موبایل ===== -->
                        <div style="margin-bottom: 18px;">
                            <label style="font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; color: var(--gray-700);">
                                <i class="fas fa-user text-primary me-1"></i> نام کاربری / ایمیل / موبایل <span class="text-danger">*</span>
                            </label>
                            <input 
                                type="text" 
                                name="username" 
                                class="form-control" 
                                placeholder="نام کاربری، ایمیل یا شماره موبایل خود را وارد کنید" 
                                required 
                                style="border-radius: var(--radius-md); padding: 12px 16px; border: 2px solid var(--gray-200); transition: var(--transition);"
                            >
                            <small style="font-size: 12px; color: var(--gray-400);">
                                <i class="fas fa-info-circle me-1"></i> می‌توانید با نام کاربری، ایمیل یا شماره موبایل وارد شوید
                            </small>
                        </div>
                        
                        <!-- ===== رمز عبور ===== -->
                        <div style="margin-bottom: 16px;">
                            <label style="font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; color: var(--gray-700);">
                                <i class="fas fa-lock text-primary me-1"></i> رمز عبور <span class="text-danger">*</span>
                            </label>
                            <div style="position: relative;">
                                <input 
                                    type="password" 
                                    name="password" 
                                    id="password"
                                    class="form-control" 
                                    placeholder="رمز عبور خود را وارد کنید" 
                                    required 
                                    style="border-radius: var(--radius-md); padding: 12px 16px; border: 2px solid var(--gray-200); transition: var(--transition);"
                                >
                                <button 
                                    type="button" 
                                    onclick="togglePassword()" 
                                    style="
                                        position: absolute;
                                        left: 12px;
                                        top: 50%;
                                        transform: translateY(-50%);
                                        background: none;
                                        border: none;
                                        color: var(--gray-400);
                                        cursor: pointer;
                                        font-size: 16px;
                                    "
                                    aria-label="نمایش/مخفی کردن رمز عبور"
                                >
                                    <i class="fas fa-eye" id="toggleIcon"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- ===== گزینه‌ها ===== -->
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; flex-wrap: wrap; gap: 8px;">
                            <div style="display: flex; align-items: center; gap: 6px;">
                                <input type="checkbox" name="remember" id="remember" style="width: 18px; height: 18px; accent-color: var(--primary);">
                                <label for="remember" style="font-size: 13px; color: var(--gray-600);">مرا به خاطر بسپار</label>
                            </div>
                            <a href="#" style="font-size: 13px; color: var(--primary); font-weight: 500; text-decoration: none;">
                                فراموشی رمز عبور؟
                            </a>
                        </div>
                        
                        <!-- ===== دکمه ورود ===== -->
                        <button type="submit" class="btn w-100" style="
                            background: linear-gradient(135deg, var(--primary), #7c3aed);
                            color: white;
                            border: none;
                            border-radius: var(--radius-md);
                            padding: 14px;
                            font-weight: 700;
                            font-size: 16px;
                            transition: var(--transition);
                            box-shadow: 0 4px 20px rgba(37,99,235,0.3);
                        ">
                            <i class="fas fa-sign-in-alt me-2"></i> ورود
                        </button>
                    </form>
                    
                    <!-- ===== لینک ثبت‌نام ===== -->
                    <div style="text-align: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gray-200);">
                        <p style="color: var(--gray-500); font-size: 14px; margin: 0;">
                            حساب کاربری ندارید؟ 
                            <a href="{{ url_for('register') }}" style="color: var(--primary); font-weight: 600; text-decoration: none;">
                                ثبت‌نام کنید <i class="fas fa-arrow-left me-1"></i>
                            </a>
                        </p>
                    </div>
                    
                    <!-- ===== یا ===== -->
                    <div style="text-align: center; margin-top: 16px; position: relative;">
                        <div style="border-top: 1px solid var(--gray-200);"></div>
                        <span style="
                            background: white;
                            padding: 0 16px;
                            color: var(--gray-400);
                            font-size: 12px;
                            position: relative;
                            top: -10px;
                        ">یا</span>
                    </div>
                    
                    <!-- ===== ورود با شبکه‌های اجتماعی ===== -->
                    <div style="display: flex; gap: 12px; justify-content: center; margin-top: 8px;">
                        <a href="#" style="
                            width: 48px;
                            height: 48px;
                            border-radius: 50%;
                            background: #1877f2;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: white;
                            font-size: 20px;
                            transition: var(--transition);
                            text-decoration: none;
                        ">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" style="
                            width: 48px;
                            height: 48px;
                            border-radius: 50%;
                            background: #1da1f2;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: white;
                            font-size: 20px;
                            transition: var(--transition);
                            text-decoration: none;
                        ">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" style="
                            width: 48px;
                            height: 48px;
                            border-radius: 50%;
                            background: #db4437;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: white;
                            font-size: 20px;
                            transition: var(--transition);
                            text-decoration: none;
                        ">
                            <i class="fab fa-google"></i>
                        </a>
                        <a href="#" style="
                            width: 48px;
                            height: 48px;
                            border-radius: 50%;
                            background: #000;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: white;
                            font-size: 20px;
                            transition: var(--transition);
                            text-decoration: none;
                        ">
                            <i class="fab fa-apple"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================
     CTA
     ============================================================ -->
<section style="margin: 50px 0;">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div style="background: linear-gradient(135deg, #0f172a, #1e293b); padding: 40px; border-radius: var(--radius-lg); text-align: center; position: relative; overflow: hidden;">
                    <div style="position: absolute; right: -30px; bottom: -30px; font-size: 120px; opacity: 0.03;">
                        <i class="fas fa-shopping-bag"></i>
                    </div>
                    <div style="position: relative; z-index: 1;">
                        <h3 style="color: white; font-weight: 700; font-size: 24px; margin-bottom: 8px;">
                            <i class="fas fa-store text-primary me-2"></i>
                            عضو نشده‌اید؟
                        </h3>
                        <p style="color: var(--gray-400); max-width: 500px; margin: 0 auto 20px;">
                            ثبت‌نام کنید و از مزایای ویژه {{ site_name }} بهره‌مند شوید
                        </p>
                        <a href="{{ url_for('register') }}" style="
                            display: inline-flex;
                            align-items: center;
                            gap: 10px;
                            background: linear-gradient(135deg, #22c55e, #16a34a);
                            color: white;
                            padding: 12px 30px;
                            border-radius: 50px;
                            font-weight: 700;
                            font-size: 16px;
                            transition: var(--transition);
                            text-decoration: none;
                            box-shadow: 0 4px 20px rgba(34,197,94,0.3);
                        ">
                            <i class="fas fa-user-plus"></i>
                            ثبت‌نام کنید
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
function togglePassword() {
    const password = document.getElementById('password');
    const icon = document.getElementById('toggleIcon');
    
    if (password.type === 'password') {
        password.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        password.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}
</script>

{% endblock %}

{% block extra_css %}
<style>
    .form-control:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 4px rgba(37,99,235,0.1) !important;
    }
    
    .social-btn:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    }
    
    @media (max-width: 768px) {
        h1 {
            font-size: 28px !important;
        }
        .card-body {
            padding: 20px !important;
        }
        section {
            margin-bottom: 30px !important;
        }
        .social-btn {
            width: 40px !important;
            height: 40px !important;
            font-size: 16px !important;
        }
    }
    
    @media (max-width: 576px) {
        h1 {
            font-size: 22px !important;
        }
        .btn {
            font-size: 14px !important;
            padding: 12px !important;
        }
        .form-control {
            font-size: 14px !important;
            padding: 10px 14px !important;
        }
        .social-btn {
            width: 36px !important;
            height: 36px !important;
            font-size: 14px !important;
        }
    }
</style>
{% endblock %}