{% extends "layout.html" %}

{% block content %}
  <section class="mx-auto max-w-xl ui-pane p-8">
    <div class="mb-6">
      <p class="ui-eyebrow">Access</p>
      <h1 class="ui-page-title">Sign in to Governor</h1>
      <p class="ui-page-subtitle">Use your email and password to continue.</p>
    </div>

    {% if error %}
      <div class="mb-4 ui-alert border-rose-300 dark:border-rose-500/60 bg-rose-50 dark:bg-rose-500/10 text-rose-600 dark:text-rose-200">
        {{ error }}
      </div>
    {% endif %}

    <form class="space-y-4" method="post" action="/login">
      <div>
        <label class="ui-form-label" for="email">Email</label>
        <input
          class="ui-form-input mt-2 px-4 py-2.5"
          type="email"
          name="email"
          id="email"
          placeholder="you@example.com"
          required
        />
      </div>
      <div>
        <label class="ui-form-label" for="password">Password</label>
        <input
          class="ui-form-input mt-2 px-4 py-2.5"
          type="password"
          name="password"
          id="password"
          placeholder="Your password"
          required
        />
      </div>
      <button
        class="w-full ui-btn-primary hover:bg-brand-600 dark:hover:bg-brand-200 transition-colors"
        type="submit"
      >
        Continue
      </button>
    </form>
  </section>
{% endblock %}