{block title}Logy{/block}

{block content}

<div class="platno">
    <header class="lista">
        <div>
            <h1 class="lista-nadpis">Logy</h1>
            <p class="lista-popis">Záznamy za {$nazevMesice} {$rok}.</p>
        </div>
    </header>

    <section class="panel">
        <div class="filtry logy-filtry">
            <label class="razeni">
                <span class="razeni-popisek">Měsíc</span>
                <select class="razeni-vyber" aria-label="Měsíc" onchange="location.href = this.value">
                    <option n:foreach="$mesice as $polozka" value="{$polozka->url}" n:attr="selected: $polozka->aktivni">{$polozka->nazev}</option>
                </select>
            </label>
            <label class="razeni">
                <span class="razeni-popisek">Rok</span>
                <select class="razeni-vyber" aria-label="Rok" onchange="location.href = this.value">
                    <option n:foreach="$roky as $polozka" value="{$polozka->url}" n:attr="selected: $polozka->aktivni">{$polozka->rok}</option>
                </select>
            </label>
        </div>

        <table class="tabulka" n:if="$pocet > 0">
            <thead>
                <tr>
                    <th scope="col">Datum</th>
                    <th scope="col">Uživatel</th>
                    <th scope="col">Text</th>
                </tr>
            </thead>
            <tbody id="logy-radky">
                {include radky.latte, logy: $logy}
            </tbody>
        </table>
        <p class="prazdno" n:if="$pocet === 0">V tomto měsíci není žádný záznam.</p>
        <p class="lista-popis logy-pocet" id="logy-pocet" n:if="$pocet > 0" data-pocet="{$pocet}">{$pocetText}</p>

        <div class="logy-dalsi" n:if="$dalsi">
            <button type="button" class="tlacitko" id="logy-dalsi" data-url="{$dalsiUrl}">Načíst dalších 100 logů</button>
        </div>
    </section>
</div>

<script n:if="$dalsi">
    (function () {
        var tlacitko = document.getElementById('logy-dalsi');
        var telo = document.getElementById('logy-radky');
        var pocet = document.getElementById('logy-pocet');
        if (!tlacitko || !telo) {
            return;
        }

        function textPoctu(n) {
            var jednotky = n % 10;
            var desitky = n % 100;
            if (jednotky === 1 && desitky !== 11) {
                return 'Zobrazen ' + n + ' záznam.';
            }
            if (jednotky >= 2 && jednotky <= 4 && (desitky < 12 || desitky > 14)) {
                return 'Zobrazeny ' + n + ' záznamy.';
            }
            return 'Zobrazeno ' + n + ' záznamů.';
        }

        tlacitko.addEventListener('click', function () {
            var url = tlacitko.getAttribute('data-url');
            var puvodni = tlacitko.textContent;
            tlacitko.disabled = true;
            tlacitko.textContent = 'Načítám…';
            fetch(url, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                credentials: 'same-origin'
            }).then(function (response) {
                if (!response.ok) {
                    throw new Error();
                }
                return response.json();
            }).then(function (data) {
                telo.insertAdjacentHTML('beforeend', data.html || '');
                if (pocet) {
                    var n = parseInt(pocet.getAttribute('data-pocet') || '0', 10) + (data.pocet || 0);
                    pocet.setAttribute('data-pocet', String(n));
                    pocet.textContent = textPoctu(n);
                }
                if (data.dalsi && data.url) {
                    tlacitko.setAttribute('data-url', data.url);
                    tlacitko.disabled = false;
                    tlacitko.textContent = puvodni;
                } else {
                    tlacitko.parentElement.remove();
                }
            }).catch(function () {
                tlacitko.disabled = false;
                tlacitko.textContent = puvodni;
            });
        });
    })();
</script>
{/block}