{% extends "base.html" %}

{% block title %}Login - SporeDB{% endblock %}

{% block content %}
<div class="flex items-center justify-center min-h-[80vh]">
  <div class="w-full max-w-md">
    {# Logo / brand #}
    <div class="text-center mb-8">
      <h1 class="text-3xl font-bold text-gray-900">SporeDB</h1>
      <p class="text-sm text-gray-500 mt-1">Bioprocess Dashboard</p>
    </div>

    {# Login card #}
    <div class="bg-white shadow-lg rounded-lg p-8 border border-gray-200">
      <h2 class="text-xl font-semibold mb-6">Sign in to your account</h2>

      {% if error %}
      <div class="mb-4 p-3 rounded bg-red-50 border border-red-200 text-red-700 text-sm">
        {{ error }}
      </div>
      {% endif %}

      <form method="POST" action="/dash/login" class="space-y-4">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token | default('') }}">
        <input type="hidden" name="next" value="{{ next | default('/dash/batches') }}">

        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 mb-1">
            Email address
          </label>
          <input
            type="email"
            id="email"
            name="email"
            required
            autocomplete="email"
            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm
                   focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          >
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
            Password
          </label>
          <input
            type="password"
            id="password"
            name="password"
            required
            autocomplete="current-password"
            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm
                   focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          >
        </div>

        <div>
          <label for="tenant_slug" class="block text-sm font-medium text-gray-700 mb-1">
            Organization
          </label>
          <input
            type="text"
            id="tenant_slug"
            name="tenant_slug"
            required
            autocomplete="organization"
            placeholder="your-org-slug"
            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm
                   focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          >
        </div>

        <button
          type="submit"
          class="w-full py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white font-medium
                 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500
                 focus:ring-offset-2 transition-colors"
        >
          Sign in
        </button>
      </form>
    </div>
  </div>
</div>
{% endblock %}