{% extends "ui/templates/base/layout.html" %}
{% block content %}
  <div class="max-w-md rounded-2xl bg-white border p-6">
    <h1 class="text-2xl font-semibold">Professional Login</h1>
    <p class="text-slate-600 mt-1 text-sm">For system administrators, firm administrators, partners, managers, staff and consultants.</p>

    <form method="post" action="/login" class="mt-5 grid gap-3">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />

      <label class="grid gap-1">
        <span class="text-sm text-slate-600">Email</span>
        <input class="border rounded-xl px-3 py-2" name="email" type="email" autocomplete="username" required />
      </label>

      <label class="grid gap-1">
        <span class="text-sm text-slate-600">Password</span>
        <input class="border rounded-xl px-3 py-2" name="password" type="password" autocomplete="current-password" required />
      </label>

      <button class="rounded-xl bg-slate-900 text-white px-4 py-2 text-sm mt-2" type="submit">Sign in</button>
    </form>

    <div class="mt-4 flex flex-wrap items-center justify-between gap-3 text-sm">
      <a class="text-brand-700 underline" href="/forgot-password">Forgot password?</a>
      <a class="font-semibold text-brand-700 underline" href="/client/login">Client Login</a>
    </div>
  </div>
{% endblock %}