{% 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 class="text-center">ID</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 font-monospace id">{{ id }}</td>
                <td class="info">
                    <a href="{{ base_url(id ~ '/details') }}" class="text-light fw-bold text-decoration-none">{{ playlist.name }}</a>
                    <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="col-3 d-none d-sm-table-cell">
                    <span onclick="prompt('Скопируй адрес плейлиста', '{{ playlist.url }}')"
                          title="Нажми на ссылку, чтобы скопировать её в буфер обмена"
                          class="font-monospace cursor-pointer">
                        {{ playlist.url }}
                    </span>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% if pageCount > 0 %}
    <div aria-label="pages">
        <ul class="pagination justify-content-center">
            {% for page in range(1, pageCount) %}
                {% if page == pageCurrent %}
                    <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 %}
{% endblock %}