{% extends "base.html" %}
{% load bootstrap5 %}
{% load static %}

{% block content %}
<div style="min-height: 70vh; display: flex; align-items: center; justify-content: center;">
  <div style="width: 100%; max-width: 420px;">

    <div style="text-align: center; margin-bottom: 32px;">
      <img src="{% static 'stemmaGR.png' %}" alt="Stemma" style="height: 64px; margin-bottom: 16px;">
      <h1 style="font-size: 22px; font-weight: 700; color: var(--primary); margin: 0 0 6px;">Cedole Librarie</h1>
      <p style="color: var(--text-muted); font-size: 13.5px; margin: 0;">Servizi Educativi — Comune di Grosseto</p>
    </div>

    <div class="card">
      <div class="card-body" style="padding: 32px;">

        {% if form.errors %}
          <div class="alert alert-danger" style="border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 20px;">
            <i class="fa-solid fa-triangle-exclamation me-2"></i>Credenziali non valide. Riprovare.
          </div>
        {% endif %}

        <form method="post" action="{% url 'login' %}">
          {% csrf_token %}

          <div style="margin-bottom: 18px;">
            <label class="form-label">Nome utente</label>
            <div style="position: relative;">
              <i class="fa-solid fa-user" style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px;"></i>
              {{ form.username }}
            </div>
          </div>

          <div style="margin-bottom: 28px;">
            <label class="form-label">Password</label>
            <div style="position: relative;">
              <i class="fa-solid fa-lock" style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px;"></i>
              {{ form.password }}
            </div>
          </div>

          <input type="hidden" name="next" value="{{ next }}">
          <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center; padding: 11px;">
            <i class="fa-solid fa-right-to-bracket"></i> Accedi
          </button>
        </form>

      </div>
    </div>

    <p style="text-align: center; margin-top: 24px; font-size: 12px; color: var(--text-muted);">
      Per assistenza contattare l'amministratore di sistema.
    </p>

  </div>
</div>

<style>
  #id_username, #id_password {
    padding-left: 36px !important;
    width: 100%;
  }
</style>
{% endblock %}