<!DOCTYPE html>
{% load static %}
{% load qr_code %}
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="{% static 'tournaments/css/foundation.min.css' %}" />
        <link rel="stylesheet" href="{% static 'tournaments/css/basics.css' %}" />
        <link rel="stylesheet" href="{% static 'tournaments/css/style.css' %}" />
        <link rel="stylesheet" href="{% static 'tournaments/css/broadcast.css' %}" />

        <link rel="icon" type="image/png" href="{% static 'tournaments/images/favicon.png' %}" />

        <title>Matchs</title>

        <script src="{% static 'tournaments/js/alpine.min.js' %}"></script>
        <!-- Matomo -->
        <script>
          var _paq = window._paq = window._paq || [];
          /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
          _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
          _paq.push(["setDoNotTrack", true]);
          _paq.push(['trackPageView']);
          _paq.push(['enableLinkTracking']);
          (function() {
            var u="//matomo.padelclub.app/";
            _paq.push(['setTrackerUrl', u+'matomo.php']);
            _paq.push(['setSiteId', '1']);
            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
            g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
          })();
        </script>
        <!-- End Matomo Code -->

    </head>

    <body x-data="{
        paginatedMatches: null,
        active: 1,
        retrieveMatches() {
            fetch('/tournament/{{ tournament.id }}/matches/json/')
              .then(res => res.json())
              .then((data) => {
                this.paginatedMatches = this.paginate(data, 8)
              })
        },
        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()">


        <header>
            <div id="header">
                <div class="left-content bubble">
                    <img src="{% static 'tournaments/images/PadelClub_logo_512.png' %}" alt="logo" class="logo">
                    <div class="left-margin">
                        <h1 class="club">{{ tournament.broadcast_event_display_name }}</h1>
                        <h1 class="event">Matchs {{ tournament.broadcast_display_name }}</h1>
                    </div>
                </div>
                <div class="right-content">{% qr_from_text qr_code_url options=qr_code_options %}</div>
            </div>
        </header>

        <div class="wrapper">
            <main>

                <div class="grid-x padding-bottom">

                    <template x-for="i in paginatedMatches.length" >
                        <template x-for="match in paginatedMatches[i-1]" >

                            <div class="cell medium-6 large-3 my-block" x-show="active === i">

                                {% include 'tournaments/broadcast/broadcasted_match.html' %}

                            </div>

                        </template>
                    </template>

                </div>

            </main>
        </div>
    </body>
</html>
