{% extends "base.html" %}
{% block title %}Log in — Kavosh{% endblock %}
{% block content %}
<div class="max-w-sm mx-auto mt-16 sm:mt-24">
  <div class="text-center mb-6">
    <h1 class="font-display font-bold text-2xl tracking-tight">Kavosh</h1>
    <p class="text-sm text-muted dark:text-muted-dark mt-1">Sign in to view your site's traffic</p>
  </div>
  <div class="bg-surface dark:bg-surface-dark border border-line dark:border-line-dark rounded-xl p-6 shadow-sm">
    {% for message in get_flashed_messages() %}
      <p class="text-danger dark:text-danger-dark text-sm mb-3 bg-danger/10 dark:bg-danger-dark/10 rounded-md px-3 py-2">{{ message }}</p>
    {% endfor %}
    <form method="post">
      {{ form.hidden_tag() }}
      <div class="mb-4">
        {{ form.email.label(class="block text-sm font-medium text-muted dark:text-muted-dark mb-1") }}
        {{ form.email(class="w-full border border-line dark:border-line-dark rounded-md px-3 py-2 bg-paper dark:bg-paper-dark text-ink dark:text-ink-dark focus:outline-none focus:ring-2 focus:ring-accent dark:focus:ring-accent-dark", autofocus=true) }}
      </div>
      <div class="mb-5">
        {{ form.password.label(class="block text-sm font-medium text-muted dark:text-muted-dark mb-1") }}
        {{ form.password(class="w-full border border-line dark:border-line-dark rounded-md px-3 py-2 bg-paper dark:bg-paper-dark text-ink dark:text-ink-dark focus:outline-none focus:ring-2 focus:ring-accent dark:focus:ring-accent-dark") }}
      </div>
      {{ form.submit(class="w-full bg-accent dark:bg-accent-dark text-white dark:text-paper-dark font-medium rounded-md px-4 py-2 hover:opacity-90 transition-opacity cursor-pointer") }}
    </form>
  </div>
</div>
{% endblock %}