{% extends 'layouts/default/page.html' %}
{% load bootstrap4 %}
{% load i18n %}
{% load static %}

<link rel="stylesheet" href="{% static 'css/ui-updates.css' %}">

{% block content %}
<main class="content d-flex align-items-center justify-content-center min-vh-100"
      style="background: #f8fafc; font-family: 'Poppins', sans-serif;">

  <div class="container">
    <div class="row justify-content-center align-items-center">
      <div class="col-12 col-md-8 col-lg-5">
        <div class="card shadow-lg border-0" 
             style="border-radius: 14px; background: #ffffff;">
          <div class="card-header text-center border-0 bg-white pt-4">
            <img src="{% static 'img/logo.png' %}" alt="Logo" width="80" class="mb-3">
            <h3 class="fw-bold mb-1 text-primary">{% trans 'Welcome Back' %}</h3>
            <p class="text-muted">{% trans 'Sign in to continue' %}</p>
          </div>

          <div class="card-body px-4 pb-4">
            <form method="post" class="needs-validation" novalidate>
              {% csrf_token %}
              <div class="form-group mb-3">
                {% bootstrap_form form %}
              </div>

              <div class="d-flex justify-content-between align-items-center mb-3">
                <a href="{% url 'accounts:restore_password' %}" class="text-primary small text-decoration-none">
                  <i class="fas fa-key me-1"></i> {% trans 'Forgot password?' %}
                </a>
              </div>

              <button type="submit" class="btn btn-primary w-100 py-2 fw-semibold"
                      style="border-radius: 10px; background: linear-gradient(90deg, #2563eb, #4f46e5); border: none;">
                {% trans 'Log in' %}
              </button>
            </form>

            <div class="text-center mt-4">
              <p class="text-muted mb-1">{% trans "Don't have an account?" %}</p>
              <a href="{% url 'accounts:sign_up' %}" class="text-primary fw-semibold text-decoration-none">
                <i class="fas fa-user-plus me-1"></i> {% trans 'Create Account' %}
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

<!-- Custom Styles -->
<style>
  body {
    background-color: #f8fafc !important;
  }

  .card {
    transition: all 0.4s ease;
  }

  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);
  }

  .form-control {
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 10px 12px !important;
    transition: all 0.3s ease;
  }

  .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  }

  .btn-primary {
    background: linear-gradient(90deg, #2563eb, #4f46e5);
    border: none;
    font-weight: 600;
    letter-spacing: 0.3px;
  }

  .btn-primary:hover {
    background: linear-gradient(90deg, #1d4ed8, #4338ca);
    transform: translateY(-2px);
  }

  a.text-primary:hover {
    color: #1d4ed8 !important;
    text-decoration: underline;
  }
</style>

{% endblock %}