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

{% block title %}Import punktów — {{ round.label }}{% endblock %}
{% block page_pretitle %}{{ competition.name }} · {{ round.label }}{% endblock %}
{% block page_title %}Import punktów{% endblock %}

{% block page_content %}
    <div class="card mb-3">
        <div class="card-header"><h3 class="card-title">Skąd wziąć wklejkę</h3></div>
        <div class="card-body">
            {% if competition.uefaLeagueId %}
                <p class="mb-3">
                    Liga UEFA <strong>{{ competition.uefaLeagueId }}</strong>, kolejka <strong>{{ round.number }}</strong> —
                    obie wartości są już wpisane w skrypcie, więc o nic nie zapyta.
                </p>
            {% else %}
                <div class="alert alert-warning">
                    Nie znam jeszcze numeru Twojej ligi na gaming.uefa.com, więc skrypt o niego zapyta.
                    Wpisz go raz na dole tej karty, a potem już nigdy.
                </div>
            {% endif %}

            <ol class="mb-3">
                <li>Otwórz <strong>gaming.uefa.com</strong> i upewnij się, że jesteś zalogowany.</li>
                <li>Wciśnij <kbd>F12</kbd> i przejdź na zakładkę <strong>Konsola</strong>.</li>
                <li>
                    W Firefoksie konsola najpierw każe wpisać <code>allow pasting</code> i wcisnąć Enter —
                    zrób to raz, potem już nie zapyta.
                </li>
                <li>Skopiuj poniższy skrypt, wklej do konsoli i wciśnij Enter.</li>
            </ol>

            <textarea id="uefa-script" class="form-control font-monospace" rows="4" readonly
                      onclick="this.select()">{{ uefaScript }}</textarea>

            <button type="button" class="btn btn-outline-primary mt-2" id="uefa-script-copy">Kopiuj skrypt</button>

            <script>
                document.getElementById('uefa-script-copy').addEventListener('click', function () {
                    var area = document.getElementById('uefa-script');
                    area.select();
                    document.execCommand('copy');
                    this.textContent = 'Skopiowane';
                });
            </script>

            <p class="text-secondary small mt-2 mb-3">
                Skrypt przejdzie wszystkie strony tabeli i pokaże okienko z gotową wklejką.
                Skopiuj ją stamtąd i wklej w pole poniżej.
            </p>

            <form method="post"
                  action="{{ path('app_admin_round_uefa_league', {slug: competition.slug, number: round.number}) }}"
                  class="row g-2 align-items-end">
                <div class="col-auto">
                    <label class="form-label" for="league">Numer ligi na gaming.uefa.com</label>
                    <input class="form-control" id="league" name="league"
                           value="{{ competition.uefaLeagueId }}" placeholder="np. 31513408">
                </div>
                <div class="col-auto">
                    <button class="btn btn-outline-secondary">Zapamiętaj</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            {{ form_start(form) }}
            {{ form_row(form.format) }}
            {{ form_row(form.data) }}
            <div class="d-flex gap-2">
                {{ form_widget(form.preview) }}
                {{ form_widget(form.confirm) }}
            </div>
            {{ form_end(form) }}
        </div>
    </div>

    {% if preview is not null %}
        <div class="card mt-3">
            <div class="card-header">
                <h3 class="card-title">Podgląd dopasowania</h3>
                <div class="card-actions">
                    {% if preview.clean %}
                        <span class="badge bg-green-lt">wszystko dopasowane</span>
                    {% else %}
                        <span class="badge bg-orange-lt">{{ preview.problems|length }} do sprawdzenia</span>
                    {% endif %}
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-vcenter card-table">
                    <thead>
                    <tr><th>Drużyna UEFA</th><th>Uczestnik</th><th>Klub</th><th>Punkty</th><th>Status</th></tr>
                    </thead>
                    <tbody>
                    {% for row in preview.rows %}
                        <tr class="{{ row.matched ? '' : 'bg-orange-lt' }}">
                            <td class="font-monospace">{{ row.teamName }}</td>
                            <td>{{ row.managerName ?? '—' }}</td>
                            <td>{{ row.clubName ?? '—' }}</td>
                            <td>{{ row.points ?? '—' }}</td>
                            <td>{{ row.statusLabel }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endif %}
{% endblock %}