{% extends 'base.html' %}

{% block content %}
<div class="text-center py-8">
    <h1 class="text-4xl font-extrabold mb-2 text-gray-900 tracking-tight">GhostBoard</h1>
    <p class="text-lg text-gray-500">Anonyme & Sans Friction.</p>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 max-w-5xl mx-auto px-4">
    {% for board in boards %}
    <a href="{{ url_for('board', slug=board.slug) }}" class="block p-5 bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-md hover:border-blue-200 transition-all duration-200 active:scale-95">
        <h2 class="text-xl font-bold text-blue-600 mb-1">/{{ board.slug }}/</h2>
        <h3 class="text-lg text-gray-900 font-semibold">{{ board.name }}</h3>
        <p class="text-gray-500 text-sm mt-1">{{ board.description }}</p>
    </a>
    {% endfor %}
</div>

<!-- Nickname Modal -->
<div id="nickname-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-40 backdrop-blur-sm p-4">
    <div class="absolute inset-0" onclick="closeNicknameModal()"></div>
    <div class="bg-white w-full max-w-sm rounded-2xl shadow-2xl transform transition-all relative z-10 overflow-hidden">
        <div class="p-6 text-center">
            <h3 class="text-xl font-bold text-gray-900 mb-4">Comment voulez-vous être appelé ?</h3>
            <p class="text-sm text-gray-600 mb-6">Choisissez un pseudo pour vos posts. Il sera enregistré et réutilisé automatiquement.</p>

            <form onsubmit="setNickname(event)" class="space-y-4">
                <div>
                    <input
                        type="text"
                        id="nickname-input"
                        placeholder="Votre pseudo..."
                        maxlength="50"
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-center text-lg"
                        required
                    >
                </div>
                <button
                    type="submit"
                    class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors"
                >
                    Commencer
                </button>
            </form>

            <p class="text-xs text-gray-500 mt-4">
                Vous pourrez changer votre pseudo plus tard.
            </p>
        </div>
    </div>
</div>
{% endblock %}