{% extends "centered_layout.html" %}
{% from "macros/ui.html" import flash_messages, text_input %}

{% set title = 'Register – Tutortool' %}

{% block card_content %}
  <div class="text-center mb-6">
    <h1 class="text-3xl font-bold text-white mb-2">Create an Account</h1>
    <p class="text-muted text-sm">Choose a username to get started.</p>
  </div>

  {{ flash_messages() }}

  <form action="/register" method="POST" class="space-y-6">
    {{ text_input('username', 'Username', placeholder='Your unique username') }}

    <div class="bg-gray-700 p-4 rounded-lg border border-gray-600 space-y-3">
      <h3 class="text-sm font-semibold text-gray-200">Important Information</h3>
      <p class="text-xs text-gray-400">
        Your username is tied to the slides using a browser cookie. If you clear your cookies,
        you can regain access to your slides by logging in with the same username.
      </p>
      <div class="flex items-center">
        <input type="checkbox" id="acknowledge" name="acknowledge" required
               class="h-4 w-4 text-blue-500 rounded border-gray-300 focus:ring-blue-500">
        <label for="acknowledge" class="ml-2 block text-sm text-gray-400">
          I understand and agree
        </label>
      </div>
    </div>

    <button type="submit"
            class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors">
      Register
    </button>
  </form>

  <p class="text-center mt-4 text-sm text-text">
    Already have an account?
    <a href="/set_token" class="text-blue-400 hover:underline">Log In</a>
  </p>
{% endblock %}