{% extends 'public_frontend/base.html' %}
{% load i18n %}
{% block title %}{% trans "Login" %}{% endblock %}

{% block content %}
<div class="max-w-md mx-auto">
  <h1 class="text-2xl font-semibold mb-4">{% trans "Login" %}</h1>
  <div class="bg-white rounded shadow p-4">
    <form method="post" action="" class="grid gap-4">
      {% csrf_token %}
      {% if form.non_field_errors %}
        <div class="text-sm text-rose-700">{{ form.non_field_errors }}</div>
      {% endif %}
      <div>
        <label class="block text-sm font-medium mb-1" for="id_username">{% trans "Username" %}</label>
        <input type="text" name="username" id="id_username" value="{{ form.username.value|default:'' }}" required class="w-full border rounded px-3 py-2">
        {% if form.username.errors %}<div class="text-sm text-rose-700 mt-1">{{ form.username.errors|join:', ' }}</div>{% endif %}
      </div>
      <div>
        <label class="block text-sm font-medium mb-1" for="id_password">{% trans "Password" %}</label>
        <input type="password" name="password" id="id_password" required class="w-full border rounded px-3 py-2">
        {% if form.password.errors %}<div class="text-sm text-rose-700 mt-1">{{ form.password.errors|join:', ' }}</div>{% endif %}
      </div>
      {% if next %}<input type="hidden" name="next" value="{{ next }}" />{% endif %}
      <div>
        <button class="btn-primary" type="submit">{% trans "Sign In" %}</button>
      </div>
    </form>
    <p class="text-sm text-gray-600 mt-3">{% trans "Don't have an account?" %} <a href="{% url 'public_frontend:register' %}" class="text-blue-700 hover:underline">{% trans "Register" %}</a></p>
  </div>
</div>
<style>
  .btn-primary{background:#1d4ed8;color:#fff;padding:.5rem .75rem;border-radius:.375rem}
</style>
{% endblock %}

