{% extends 'base.html.twig' %}

{% block title %}Wybierz klub — {{ competition.name }}{% endblock %}
{% block page_pretitle %}{{ competition.name }} · kod {{ code.code }}{% endblock %}
{% block page_title %}Wybierz swój klub{% endblock %}

{% block page_content %}
    <form method="post">
        <input type="hidden" name="_token" value="{{ csrf_token('join-' ~ code.code) }}">

        <div class="row row-cards">
            {% for club in offer %}
                {% set wolny = club.managers|length < competition.mode.managersPerClub %}
                <div class="col-md-4">
                    <label class="card h-100 {{ wolny ? 'card-link cursor-pointer' : 'opacity-50' }}">
                        <div class="card-body text-center">
                            {% if club.logo %}
                                <img src="{{ asset('images/clubs/' ~ club.logo) }}" alt=""
                                     style="height: 5rem; object-fit: contain;" class="mb-3">
                            {% endif %}
                            <div class="h3 mb-3">{{ club.name }}</div>
                            {% if wolny %}
                                <label class="form-selectgroup-item">
                                    <input type="radio" name="club" value="{{ club.id }}" class="form-check-input" required>
                                    <span class="ms-2">Biorę ten</span>
                                </label>
                            {% else %}
                                <span class="badge bg-secondary-lt">zajęty w międzyczasie</span>
                            {% endif %}
                        </div>
                    </label>
                </div>
            {% endfor %}
        </div>

        <div class="card mt-3">
            <div class="card-body">
                {% set pary = competition.mode.managersPerClub > 1 %}

                {% for numer in 0..(competition.mode.managersPerClub - 1) %}
                    <div class="mb-3">
                        <label class="form-label" for="uefaTeamName{{ numer }}">
                            {% if pary %}
                                Nazwa drużyny {{ numer == 0 ? 'pierwszego' : 'drugiego' }} gracza na gaming.uefa.com
                            {% else %}
                                Nazwa Twojej drużyny na gaming.uefa.com
                            {% endif %}
                        </label>
                        <input type="text" id="uefaTeamName{{ numer }}" name="uefaTeamName[]" class="form-control"
                               value="{{ uefaTeamNames[numer] ?? '' }}" required autocomplete="off">
                    </div>
                {% endfor %}

                <div class="form-hint">
                    {% if pary %}
                        Kod bierze klub dla całej pary, więc podaj obie nazwy naraz. Muszą zgadzać się
                        co do znaku z nazwami w grze UEFA — po nich dopinane są punkty w każdej kolejce.
                    {% else %}
                        Musi zgadzać się co do znaku z nazwą w grze UEFA — po niej dopinamy Twoje punkty w każdej kolejce.
                    {% endif %}
                </div>

                <button type="submit" class="btn btn-primary mt-3">Rezerwuję klub</button>
                <div class="form-hint mt-2">Wyboru nie da się cofnąć — kod jest jednorazowy.</div>
            </div>
        </div>
    </form>
{% endblock %}