{% extends 'base.html' %}

{% block content %}
<div class="max-w-md mx-auto mt-20 p-6 bg-white rounded-xl shadow-md dark:bg-gray-800">
  <h1 class="text-2xl font-bold mb-6 text-center text-gray-900 dark:text-white">{{ title }}</h1>
  <form method="post" class="space-y-4">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div>
      <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Username</label>
      <input name="username" id="username" required
        class="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm focus:ring-blue-500 focus:border-blue-500">
    </div>
    <div>
      <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Password</label>
      <input type="password" name="password" id="password" required
        class="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm focus:ring-blue-500 focus:border-blue-500">
    </div>
    <input type="submit" value="{{ 'Log In' if title == 'Log In' else 'Register' }}"
      class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded">
  </form>
  <p class="mt-4 text-center text-sm text-gray-600 dark:text-gray-300">
    Don't have an account?
    <a href="{{ url_for('auth.register') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Register here</a>
  </p>
</div>
{% endblock %}
