{% extends 'tournaments/broadcast_base.html' %}

{% block head_title %}Convocations{% endblock %}
{% block first_title %}{{ tournament.name }}{% endblock %}
{% block second_title %}Convocations{% endblock %}

{% block content %}

{% load static %}


<div x-data="{
        paginatedMatches: null,
        active: 1,
        retrieveMatches() {
            fetch('/tournament/{{ tournament.id }}/summons/json/')
                .then(res => res.json())
                .then((data) => {

                let pageSize = 20
                this.paginatedMatches = this.paginate(data, pageSize)

                const splitGroups = [];
                this.paginatedMatches.forEach(group => {
                    const firstHalf = group.slice(0, pageSize / 2);
                    const secondHalf = group.slice(pageSize / 2);
                    if (secondHalf.length > 0) {
                        splitGroups.push([firstHalf, secondHalf]);
                    } else {
                        splitGroups.push([firstHalf]);
                    }
                });
                this.paginatedMatches = splitGroups;

                })
        },
        paginate(array, pageSize) {
            let paginatedArray = [];
            for (let i = 0; i < array.length; i += pageSize) {
                paginatedArray.push(array.slice(i, i + pageSize));
            }
            return paginatedArray;
        },
        loop() {
            this.retrieveMatches()
            setInterval(() => {
                this.retrieveMatches()
                this.active = this.active === this.paginatedMatches.length ? 1 : this.active+1
            }, 15000)
        }

    }" x-init="loop()">


    <div class="grid-x">
        <template x-for="i in paginatedMatches.length" >
            <template x-for="column in paginatedMatches[i-1]" >
                <div class="cell medium-6 large-6 topblock my-block" x-show="active === i">
                    <div class="bubble">
                        <template x-for="summon in column" >
                            <div class="table-row-4-colums bottom-border">
                                <div class="table-cell table-cell-large semibold">
                                    <template x-for="i in summon.names.length">
                                        <div x-text="summon.names[i-1]"></div>
                                    </template>
                                </div>

                                <div class="table-cell center"><span x-text="summon.weight"></span></div>
                                <div class="table-cell large center"><span x-text="summon.date"></span></div>
                                <div class="table-cell"><div class="mybox center"><span x-text="summon.stage"></span></div></div>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
        </template>
    </div>
</div>






{% endblock %}