{% extends 'base.html' %}
{% load static %}


{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6 dark:bg-transparent dark:border-2 dark:text-white">
        <h1 class="text-2xl font-bold mb-6 text-center text-blue-600">Spieler einrichten</h1>
        
        <div class="text-center mb-6">
            <div class="inline-block bg-blue-100 rounded-lg px-4 py-2">
                <span class="text-sm text-blue-800">Spiel-Code:</span>
                <span class="font-mono font-bold text-blue-900">{{ join_code }}</span>
            </div>
        </div>

        <form method="post" class="space-y-4">
            {% csrf_token %}
            <input type="hidden" name="join_code" value="{{join_code}}">
            
            <div class="bg-gray-50 p-4 rounded-lg mb-4 dark:bg-transparent">
                <p class="text-sm text-gray-600 mb-2 dark:text-white">Wähle einen Anzeigenamen für das Spiel:</p>
                <input type="text" 
                       name="display_name" 
                       required
                       maxlength="20"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       placeholder="Dein Spielername">
                <p class="text-xs text-gray-500 mt-2 dark:text-white">Maximal 20 Zeichen</p>
            </div>

            <div class="flex justify-center space-x-4">
                <a href="/" 
                   class="px-6 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors duration-200 dark:bg-transparent dark:hover:bg-[#2a2f3a]">
                    Abbrechen
                </a>
                <button type="submit"
                        class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200">
                    Spiel beitreten
                </button>
            </div>
        </form>

        {% if error %}
        <div class="mt-4 p-4 bg-red-100 border-l-4 border-red-500 text-red-700">
            <p class="font-medium">Fehler</p>
            <p class="text-sm">{{ error }}</p>
        </div>
        {% endif %}
    </div>
</div>

<style>
    input:focus {
        outline: none;
    }
    
    .container {
        min-height: calc(100vh - 4rem);
        display: flex;
        align-items: center;
    }
</style>
{% endblock %}