{% extends 'base.html' %}
{% load static django_bootstrap5 socialaccount %}

{% block title %}Login - BanshiX{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
{% endblock %}

{% block extra_js %}
{% providers_media_js %}
{% endblock %}

{% block content %}
<div class="container min-vh-100 d-flex align-items-center py-5" 
     style="background: linear-gradient(135deg, #f0f4ff 0%, #e6f0d8 100%);">

    <div class="container">
        <div class="row justify-content-center g-5 align-items-center">
            
            <!-- Left Side - Branding -->
            <div class="col-lg-6 d-none d-lg-block">
                <div class="text-center text-lg-start">
                    <img src="{% static 'image/WhatsApp Image 2026-04-13 at 16.22.23.jpeg' %}" 
                         alt="BanshiX Logo" class="img-fluid mb-4" style="max-width: 220px;">
                    
                    <h1 class="display-5 fw-bold text-primary mb-3">BanshiX Market</h1>
                    <p class="lead text-muted mb-4">Quality products • Global delivery</p>

                    <div class="row g-4 text-start">
                        <div class="col-12 d-flex align-items-start">
                            <i class="bi bi-truck fs-3 text-success me-3"></i>
                            <div>
                                <strong>Fast Worldwide Delivery</strong>
                            </div>
                        </div>
                        <div class="col-12 d-flex align-items-start">
                            <i class="bi bi-shield-check fs-3 text-success me-3"></i>
                            <div>
                                <strong>Secure Shopping</strong>
                            </div>
                        </div>
                        <div class="col-12 d-flex align-items-start">
                            <i class="bi bi-headset fs-3 text-success me-3"></i>
                            <div>
                                <strong>24/7 Customer Support</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Login Form -->
            <div class="col-12 col-md-10 col-lg-6">
                <div class="card shadow-xl border-0 rounded-4">
                    <div class="card-body p-5">
                        <h3 class="card-title text-center fw-bold mb-2">Welcome Back</h3>
                        <p class="text-center text-muted mb-4">Sign in to continue shopping</p>

                        <!-- Social Logins -->
                        <div class="mb-4">
                            {% include "socialaccount/snippets/provider_list.html" with process="login" %}
                        </div>

                        <div class="d-flex align-items-center my-4">
                            <hr class="flex-grow-1">
                            <span class="px-3 text-muted small">OR</span>
                            <hr class="flex-grow-1">
                        </div>

                        <form method="post" novalidate>
                            {% csrf_token %}
                            {% bootstrap_form form %}

                            <div class="d-grid mt-4">
                                <button type="submit" class="btn btn-primary btn-lg fw-semibold">
                                    Sign In
                                </button>
                            </div>
                        </form>

                        <div class="text-center mt-4">
                            <a href="{% url 'account_signup' %}" class="text-primary fw-medium">
                                Don't have an account? Create one
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}