{% extends "base.html" %}
{% block title %}Sign in · School Finder{% endblock %}
{% block body %}
<main class="login-shell">
  <form method="post" action="{{ url('login') }}" class="login-form">
    {{ csrf_input }}
    <h1 class="mb-2 text-[30px] leading-[1.08] tracking-[-0.04em]">School Finder</h1>
    <p class="mb-5 text-mute">Sign in to see the schools shared with you.</p>
    {% if form.errors %}<p class="mb-2 text-warn" role="alert">Wrong username or password. Try again.</p>{% endif %}
    <label for="id_username" class="mb-1 mt-3.5 block text-[13px] font-semibold text-mute">Username</label>
    <input class="w-full rounded-[10px] border border-line bg-card-strong px-3 py-2.5 text-ink" id="id_username" name="username" type="text" autocomplete="username" autofocus required>
    <label for="id_password" class="mb-1 mt-3.5 block text-[13px] font-semibold text-mute">Password</label>
    <input class="w-full rounded-[10px] border border-line bg-card-strong px-3 py-2.5 text-ink" id="id_password" name="password" type="password" autocomplete="current-password" required>
    <input type="hidden" name="next" value="{{ next }}">
    <button class="mt-5 w-full rounded-xl border-0 bg-gradient-to-br from-acc to-acc-dark px-4 py-3 font-bold text-acc-ink shadow-lg" type="submit">Sign in</button>
  </form>
</main>
{% endblock %}