{% extends "admin/base.html" %}
{% load i18n static tz %}

{% block title %}{% trans "Admin Login" %}{% endblock %}

{% block extrastyle %}
  {{ block.super }}
  <style>
    body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    .login-container {
      width: 100%;
      max-width: 500px;
      padding: 1rem;
    }

    .login-card {
      background-color: white;
      border-radius: 0.75rem;
      box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
      overflow: hidden;
    }

    .login-header {
      background: linear-gradient(135deg, #000000ff 0%, #0b0b0bff 100%);
      padding: 1.572rem;
      text-align: center;
      color: white;
    }

    .login-header .logo {
      font-size: 2.25rem;
      margin-bottom: .25rem;
    }

    .login-header h1 {
      font-size: 1.5rem;
      font-weight: 700;
      margin: 0;
      margin-bottom: 0.5rem;
    }

    .login-header p {
      margin: 0;
      font-size: 0.95rem;
      opacity: 0.9;
    }

    .login-body {
      padding: 1.5rem;
    }

    .login-form {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .form-group {
      display: flex;
      flex-direction: column;
    }

    .form-group label {
      font-weight: 600;
      color: #212529;
      margin-bottom: 0.5rem;
      font-size: 0.95rem;
    }

    .form-group input {
      padding: 0.75rem 1rem;
      border: 2px solid #e9ecef;
      border-radius: 0.5rem;
      font-size: 0.95rem;
      transition: all 0.2s ease;
      background-color: #f8f9fa;
    }

    .form-group input:focus {
      outline: none;
      border-color: #151515ff;
      background-color: white;
      box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.1);
    }

    .login-button {
      padding: 0.85rem 1.5rem;
      background: black ;
      color: white;
      border: none;
      border-radius: 0.5rem;
      font-weight: 700;
      font-size: 0.95rem;
      cursor: pointer;
      transition: all 0.2s ease;
      width: 100%;
    }

    .login-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 0.5rem 1rem rgba(102, 126, 234, 0.3);
    }

    .login-button:active {
      transform: translateY(0);
    }

    .login-footer {
      text-align: center;
      padding: 1rem 2rem;
      background-color: #f8f9fa;
      border-top: 1px solid #e9ecef;
      font-size: 0.85rem;
      color: #6c757d;
    }

    .login-footer p {
      margin: 0;
      line-height: 1.6;
    }

    .login-footer a {
      color: #667eea;
      text-decoration: none;
      font-weight: 600;
    }

    .login-footer a:hover {
      text-decoration: underline;
    }

    .hidden {
      display: none;
    }
  </style>
{% endblock %}

{% block body %}
<div class="login-container">
  <div class="login-card">
    <div class="login-header">
      <div class="logo">
        <i class="bi bi-shield-lock"></i>
      </div>
      <h1>{% trans site_title|default:"Admin Login" %}</h1>
      <p>{% trans "Log in your admin panel" %}</p>
    </div>

    <div class="login-body">
      {% if form.errors %}
        {% for field, errors in form.errors.items %}
          {% for error in errors %}
            <div class="alert py-1 small mx-0 alert-warning d-flex align-items-center gap-3">
              <h2 class="bi bi-exclamation-triangle"> </h2>
              <span class="flex-1"> {{ error }} </span>
            </div>
          {% endfor %}
        {% endfor %}
      {% endif %}

      <form method="post" class="login-form">
        {% csrf_token %}

        <div class="form-group">
          <label for="id_username">
            <i class="bi bi-person-fill"></i> {% trans "Username" %}
          </label>
          <input
            type="text"
            id="id_username"
            name="username"
            placeholder="{% trans "Enter your username" %}"
            autofocus
            autocapitalize="none"
            autocomplete="username"
            maxlength="150"
            required
          >
        </div>

        <div class="form-group">
          <label for="id_password">
            <i class="bi bi-lock-fill"></i> {% trans "Password" %}
          </label>
          <input
            type="password"
            id="id_password"
            name="password"
            placeholder="{% trans "Enter your password" %}"
            autocomplete="current-password"
            required
          >
        </div>

        <button type="submit" class="login-button">
          {% trans "Sign In" %}
        </button>
      </form>

        <div class="mt-3">
          <p> {% trans "Forgot password? " %} <a href="{% url 'palette_admin:password_reset' %}">{% trans "Reset it here." %}</a> </p>
        </div>
    </div>

    {% if site_footer %}
      <div class="login-footer">
        <p>{{ site_footer }}</p>
      </div>
    {% else %}
      <div class="login-footer">
        <p>&copy; {% now 'Y' %} Django Palette. {% trans "All rights reserved." %}</p>
      </div>
    {% endif %}
  </div>
</div>
{% endblock body %}