{% extends "base.html" %}
{% load static %}
{% block title %}Sign In — Fossilrepo{% endblock %}

{% block content %}
<div class="flex min-h-[80vh] items-center justify-center">
  <div class="w-full max-w-sm space-y-8">
    <div class="flex flex-col items-center">
      <img src="{% static 'img/fossilrepo-logo-dark.png' %}" alt="Fossilrepo" class="h-12 w-auto mb-6">
      <h2 class="text-center text-3xl font-bold tracking-tight text-gray-100">Sign in</h2>
      <p class="mt-2 text-center text-sm text-gray-400">Fossilrepo Django + HTMX</p>
    </div>

    {% if form.errors %}
    <div class="rounded-md bg-red-900/50 border border-red-700 p-4">
      <p class="text-sm text-red-300">Invalid username or password.</p>
    </div>
    {% endif %}

    <form method="post" class="space-y-6">
      {% csrf_token %}
      <div>
        <label for="id_username" class="block text-sm font-medium text-gray-300">Username</label>
        <div class="mt-1">{{ form.username }}</div>
      </div>
      <div>
        <label for="id_password" class="block text-sm font-medium text-gray-300">Password</label>
        <div class="mt-1">{{ form.password }}</div>
      </div>
      <button type="submit"
              class="w-full rounded-md bg-brand px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand">
        Sign in
      </button>
    </form>
  </div>
</div>
{% endblock %}