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

{% block title %}{{ club.name }} — {{ competition.name }}{% endblock %}
{% block description %}{{ club.name }} w rozgrywkach {{ competition.name }} · mecze, bilans i punkty{% endblock %}
{% block page_pretitle %}{{ competition.name }}{% endblock %}
{% block page_title %}{{ club.name }}{% endblock %}

{% block page_content %}
    {% if not summary %}
        <div class="alert alert-info">
            Rozgrywki jeszcze się nie zaczęły — tabela i bilans pojawią się po pierwszej rozliczonej kolejce.
        </div>
    {% endif %}

    {% if summary %}
        <div class="row row-cards mb-3">
            <div class="col-3">
                <div class="card"><div class="card-body text-center py-3">
                    <div class="h1 mb-0">{{ summary.position }}<span class="text-secondary fs-4">. miejsce</span></div>
                    <div class="text-secondary">{{ summary.points }} pkt</div>
                </div></div>
            </div>
            <div class="col-3">
                <div class="card"><div class="card-body text-center py-3">
                    <div class="h1 mb-0 text-green">{{ summary.won }}</div>
                    <div class="text-secondary">wygrane</div>
                </div></div>
            </div>
            <div class="col-3">
                <div class="card"><div class="card-body text-center py-3">
                    <div class="h1 mb-0 text-yellow">{{ summary.drawn }}</div>
                    <div class="text-secondary">remisy</div>
                </div></div>
            </div>
            <div class="col-3">
                <div class="card"><div class="card-body text-center py-3">
                    <div class="h1 mb-0 text-red">{{ summary.lost }}</div>
                    <div class="text-secondary">przegrane</div>
                </div></div>
            </div>
        </div>
    {% endif %}

    <div class="row row-cards">
        <div class="col-lg-4">
            {% if summary %}
                <div class="card">
                    <div class="card-header"><h3 class="card-title">Miejsca w tabeli</h3></div>
                    <div class="card-body">
                        <div id="chart-table-positions"></div>
                    </div>
                </div>
            {% endif %}
        </div>

        <div class="col-lg-8">
            <div class="row row-cards">
                {% for fixture in fixtures %}
                    <div class="col-12">
                        {% include 'public/_fixture_card.html.twig' with {showRound: true} %}
                    </div>
                {% else %}
                    <div class="col-12">
                        <div class="empty"><p class="empty-title">Ten klub nie rozegrał jeszcze meczu</p></div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    {% if summary %}
        <script src="{{ asset('js/apexcharts.js') }}"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                if (!window.ApexCharts) {
                    return;
                }

                var primary = getComputedStyle(document.documentElement)
                    .getPropertyValue('--tblr-primary').trim() || '#206bc4';

                new ApexCharts(document.getElementById('chart-table-positions'), {
                    chart: {
                        type: 'line',
                        fontFamily: 'inherit',
                        height: 240,
                        parentHeightOffset: 0,
                        toolbar: { show: false },
                        animations: { enabled: false },
                    },
                    fill: { opacity: 1 },
                    stroke: {
                        width: 2,
                        lineCap: 'round',
                        curve: 'stepline',
                    },
                    series: [{
                        name: 'Pozycja',
                        data: {{ chartPositions|json_encode|raw }},
                    }],
                    tooltip: { theme: 'dark' },
                    grid: {
                        padding: { top: -20, right: 0, left: -4, bottom: -4 },
                        strokeDashArray: 4,
                    },
                    xaxis: {
                        labels: { padding: 0 },
                        tooltip: { enabled: false },
                    },
                    yaxis: {
                        min: 1,
                        max: {{ clubCount }},
                        reversed: true,
                        labels: { padding: 4 },
                    },
                    labels: {{ chartRounds|json_encode|raw }},
                    colors: [primary],
                    legend: { show: false },
                }).render();
            });
        </script>
    {% endif %}
{% endblock %}