{% extends "base.html" %}
{% block title %}Register — KI Context Tool{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center">
  <div class="w-full max-w-md bg-copilot-panel border border-copilot-border rounded-2xl p-8 shadow-2xl">
    <div class="flex items-center gap-3 mb-8">
      <svg class="w-8 h-8 text-copilot-accent" fill="currentColor" viewBox="0 0 24 24">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"/>
      </svg>
      <h1 class="text-2xl font-bold text-copilot-text">KI Context Tool</h1>
    </div>
    <h2 class="text-lg font-semibold mb-6 text-copilot-muted">Create an account</h2>

    <form method="POST" class="space-y-5">
      {{ form.hidden_tag() }}

      <div>
        <label class="block text-sm font-medium mb-1 text-copilot-muted">{{ form.username.label.text }}</label>
        {{ form.username(class="w-full bg-copilot-bg border border-copilot-border rounded-lg px-4 py-2.5 text-copilot-text focus:outline-none focus:border-copilot-accent transition", placeholder="johndoe") }}
        {% for err in form.username.errors %}
          <p class="text-copilot-danger text-xs mt-1">{{ err }}</p>
        {% endfor %}
      </div>

      <div>
        <label class="block text-sm font-medium mb-1 text-copilot-muted">{{ form.email.label.text }}</label>
        {{ form.email(class="w-full bg-copilot-bg border border-copilot-border rounded-lg px-4 py-2.5 text-copilot-text focus:outline-none focus:border-copilot-accent transition", placeholder="you@example.com") }}
        {% for err in form.email.errors %}
          <p class="text-copilot-danger text-xs mt-1">{{ err }}</p>
        {% endfor %}
      </div>

      <div>
        <label class="block text-sm font-medium mb-1 text-copilot-muted">{{ form.password.label.text }}</label>
        {{ form.password(class="w-full bg-copilot-bg border border-copilot-border rounded-lg px-4 py-2.5 text-copilot-text focus:outline-none focus:border-copilot-accent transition", placeholder="Min. 8 characters") }}
        {% for err in form.password.errors %}
          <p class="text-copilot-danger text-xs mt-1">{{ err }}</p>
        {% endfor %}
      </div>

      <div>
        <label class="block text-sm font-medium mb-1 text-copilot-muted">{{ form.confirm.label.text }}</label>
        {{ form.confirm(class="w-full bg-copilot-bg border border-copilot-border rounded-lg px-4 py-2.5 text-copilot-text focus:outline-none focus:border-copilot-accent transition", placeholder="Repeat password") }}
        {% for err in form.confirm.errors %}
          <p class="text-copilot-danger text-xs mt-1">{{ err }}</p>
        {% endfor %}
      </div>

      {{ form.submit(class="w-full bg-copilot-accent hover:bg-copilot-accentHover text-copilot-bg font-semibold py-2.5 rounded-lg transition cursor-pointer") }}
    </form>

    <p class="text-center text-copilot-muted text-sm mt-6">
      Already have an account?
      <a href="{{ url_for('auth.login') }}" class="text-copilot-accent hover:underline">Login</a>
    </p>
  </div>
</div>
{% endblock %}