{% extends "template.twig" %}

{% block header %}
    <p class="text-muted small">
        Обновлено:&nbsp;{{ updated_at }}&nbsp;МСК<br/>
        Плейлистов в списке:&nbsp;<strong>{{ count }}</strong>
    </p>
    <hr/>
{% endblock %}

{% block content %}
<div class="table-responsive">
    <table class="table table-responsive table-dark table-hover small">
        <thead>
        <tr>
            <th>ID</th>
            <th>Информация о плейлисте</th>
            <th>Каналов</th>
            <th class="d-none d-sm-table-cell">Ссылка для ТВ</th>
        </tr>
        </thead>
        <tbody>
        {% for id, playlist in playlists %}
            <tr class="pls" data-playlist-id="{{ id }}">
                <td class="text-center id">
                    <strong>{{ id }}</strong>
                </td>
                <td class="info">
                    <span class="badge small bg-secondary text-dark status">loading</span>
                    <strong>{{ playlist.name }}</strong>
                    <div class="small mt-2">
                        {% if playlist.desc|length > 0 %}
                            <p class="my-1 d-none d-lg-block">{{ playlist.desc }}</p>
                        {% endif %}
                        <a href="{{ base_url(id ~ '/details') }}" class="text-light">Подробнее...</a>
                    </div>
                </td>
                <td class="text-center count">
                    <div class="spinner-border text-success" role="status">
                        <span class="visually-hidden">загрузка...</span>
                    </div>
                </td>
                <td class="col-3 d-none d-sm-table-cell">
                    <span onclick="prompt('Скопируй адрес плейлиста', '{{ playlist.url }}')"
                          data-bs-toggle="tooltip"
                          data-bs-placement="top"
                          title="Нажми на ссылку, чтобы скопировать её в буфер обмена"
                          class="font-monospace cursor-pointer">
                        {{ playlist.url }}
                    </span>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% if pages.count > 0 %}
    <div aria-label="pages">
        <ul class="pagination justify-content-center">
            {% for page in range(1, pages.count) %}
                {% if page == pages.current %}
                    <li class="page-item active" aria-current="page">
                        <span class="page-link">{{ page }}</span>
                    </li>
                {% else %}
                    <li class="page-item">
                        <a class="page-link bg-dark border-secondary text-light" href="{{ base_url('page/' ~ page) }}">{{ page }}</a>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block footer %}
    <script>
        document.querySelectorAll('tr.pls').forEach((tr) => {
            const id = tr.attributes['data-playlist-id'].value
            const xhr = new XMLHttpRequest()
            xhr.responseType = 'json'
            xhr.timeout = 60000 // ms = 1 min
            let el_status = tr.querySelector('span.status')
            let el_count = tr.querySelector('td.count')
            xhr.onreadystatechange = () => {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    console.log('[' + id + '] DONE', xhr.response)
                    el_status.classList.remove('bg-secondary')
                    el_status.innerText = xhr.response.status.possibleStatus
                    el_count.innerText = xhr.response?.content.channelCount ?? 0
                    switch (xhr.response.status.possibleStatus) {
                        case 'online':
                            el_status.classList.add('bg-success')
                            break
                        case 'timeout':
                            el_status.classList.add('bg-warning')
                            break
                        default:
                            el_status.classList.add('bg-danger')
                            break
                    }
                    if (xhr.response.error) {
                        el_status.title = '[' + xhr.response.error.code + '] ' + xhr.response.error.message
                    }
                }
            }
            xhr.onerror = () => {
                console.log('[' + id + '] ERROR', xhr.response)
                el_status.classList.add('bg-danger')
                el_status.innerText = 'error'
                el_count.innerText = 0
            }
            xhr.onabort = () => {
                console.log('[' + id + '] ABORTED', xhr.response)
                el_status.classList.add('bg-secondary')
                el_count.innerText = 0
            }
            xhr.ontimeout = () => {
                console.log('[' + id + '] TIMEOUT', xhr.response)
                el_status.classList.add('bg-secondary')
                el_status.innerText = 'timeout'
                el_count.innerText = 0
            }
            xhr.open('GET', '/' + id + '/json')
            xhr.send()
        })
    </script>
{% endblock %}