{% extends "base.html" %}

{% block title %}Acceso POS | Restaurante{% endblock %}
{% block meta_description %}Acceso seguro para Admin, Mesero y Cocina dentro del POS del restaurante.{% endblock %}

{% block content %}
<main class="container-xxl py-5">
  <div class="row justify-content-center">
    <div class="col-lg-5 col-xl-4">
      <section class="card border-0 shadow-lg rounded-4 p-4 p-md-5 bg-white">
        <span class="text-uppercase fw-semibold small text-muted">Acceso seguro</span>
        <h1 class="mt-2 mb-3" style="font-family: Manrope, sans-serif;">Iniciar sesión</h1>
        <p class="text-secondary mb-4">Usa tu cuenta para entrar como Admin, Mesero o Cocina.</p>

        <form method="post" novalidate>
          {% csrf_token %}
          <div class="mb-3">
            <label class="form-label" for="id_username">{{ form.username.label }}</label>
            {{ form.username }}
          </div>
          <div class="mb-3">
            <label class="form-label" for="id_password">{{ form.password.label }}</label>
            {{ form.password }}
          </div>
          {% if form.errors %}
          <div class="alert alert-danger">Usuario o contraseña incorrectos.</div>
          {% endif %}
          {% if next %}
          <input type="hidden" name="next" value="{{ next }}">
          {% endif %}
          <button type="submit" class="btn btn-dark w-100 btn-lg rounded-4">Entrar al POS</button>
        </form>

        <div class="mt-4 pt-3 border-top text-secondary small">
          <div><strong>JWT API:</strong> <code>/api/auth/token/</code></div>
          <div><strong>Perfil actual:</strong> <code>/api/auth/me/</code></div>
        </div>
      </section>
    </div>
  </div>
</main>
{% endblock %}