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

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

{% block content %}
  <div class="container min-vh-100 d-flex align-items-center" style="background: linear-gradient(135deg, #f0f4ff 0%, #b9caab 100%);">
    <div class="container">
      <div class="row justify-content-center align-items-center g-0">
        <!-- Branding / Welcome Side -->
        <div class="col-lg-6 d-none d-lg-block">
          <div class="pe-5">
            <div class="text-center mb-1">
              <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: 180px; height: auto;" />

              <h1 class="fw-bold text-primary mb-1" style="font-size: 2.4rem;">BanshiX Market</h1>
              <p class="lead text-muted">BanshiX</p>
            </div>

            <div class="card border-0 shadow-sm bg-white bg-opacity-75">
              <div class="card-body p-2 text-center">
                <h4 class="fw-semibold mb-2">Welcome back!</h4>
                <p class="text-muted mb-2"> Quality products • Fast delivery around the World</p>

                <div class="d-flex flex-column gap-3 mt-2">
                  <div class="d-flex align-items-center">
                    <i class="bi bi-shield-lock fs-4 text-primary me-3"></i>
                    <div>
                      <strong>Place your order</strong>
                      <p class="mb-0 small text-muted">and recieve your package delivered to your door step.</p>
                    </div>
                  </div>
                  <div class="d-flex align-items-center">
                    <i class="bi bi-calendar-check fs-4 text-primary me-3"></i>
                    <div>
                      <strong>Real-time monitoring/tracking of your order</strong>
                      <p class="mb-0 small text-muted">examinue and share your feed back</p>
                    </div>
                  </div>
                  <div class="d-flex align-items-center">
                    <i class="bi bi-book-half fs-4 text-primary me-3"></i>
                    <div>
                      <strong>Learning Resources</strong>
                      <p class="mb-0 small text-muted">Course materials & lecture notes</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Login Form Side -->
        <div class="col-12 col-md-10 col-lg-6">
          <div class="card shadow-lg border-0 overflow-hidden">
            <h4 class="card-title card-header fw-bold mb-1">Sign In</h4>
            <div class="card-body ps-4 pe-4">
              <p class="text-muted mb-2">Enter your credentials to continue</p>

              {% if form.errors %}
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                  Invalid username or password. Please try again.
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
              {% endif %}

              <form method="post" novalidate class="mt-2">
                {% csrf_token %}
                {% bootstrap_form form %}

                <div class="d-grid d-flex gap-2 justify-content-center">
                    {% bootstrap_button button_type='submit' content='Sign In' button_class='btn-primary btn-lg' %}
                    {% bootstrap_button button_type='reset' content='Cancel' button_class='btn-secondary btn-lg' %}
                </div>

              </form>

              <div class="text-center mt-4">
                <p class="mb-0 text-muted small">
                  Don't have an account yet?
                  <a href="{% url 'account_signup' %}" class="text-primary fw-medium btn btn-secondary text-decoration-none">Create account</a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}