{###########################################################################
# Copyright (c) 2025, Антон Аксенов
# This file is part of m3u.su project
# MIT License: https://git.axenov.dev/IPTV/web/src/branch/master/LICENSE
###########################################################################}

{% extends "template.twig" %}

{% block title %}[{{ playlist.code }}] {{ playlist.name }} - {{ config('app.title') }}{% endblock %}

{% block metadescription %}Смотреть бесплатный самообновляемый плейлист {{ playlist.name }}, проверить статус, {{ playlist.description }}{% endblock %}

{% block metakeywords %}самообновляемый,бесплатный,iptv-плейлист,iptv,плейлист{% if (playlist.groups|length > 1) %}{% for group in playlist.groups %},{{ group.name|lower }}{% endfor %}{% endif %},{{ playlist.tags|join(',') }}{% endblock %}

{% block head %}
    <style>
        img.tvg-logo{max-width:80px;max-height:80px;padding:2px;border-radius:5px}
        tr.chrow td{padding:3px}
        td.chindex{width:1%}
        td.chlogo{width:100px}
        div.chlist-table{max-height:550px}
        textarea.m3u-raw{font-size:.7rem}
    </style>
    <script>
        function setDefaultLogo(imgtag) {
            imgtag.onerror = null
            imgtag.src = '/no-tvg-logo.png'
        }
    </script>
{% endblock %}

{% block header %}
    <h2>О плейлисте: {{ playlist.name }}</h2>
    {% if playlist.isOnline is same as (false) %}
        <div class="alert alert-danger small" role="alert">
            Ошибка плейлиста: {{ playlist.content }}
        </div>
    {% endif %}
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-lg-7">
            <ul class="nav nav-tabs">
                <li class="nav-item small">
                    <a class="nav-link active"
                       type="button"
                       href="#tab-data"
                       data-bs-toggle="tab"
                       data-bs-target="#tab-data"
                    >
                        <ion-icon name="radio-outline"></ion-icon>&nbsp;Основные&nbsp;данные
                    </a>
                </li>
                <li class="nav-item small">
                    <a class="nav-link"
                       type="button"
                       href="#tab-raw"
                       data-bs-toggle="tab"
                       data-bs-target="#tab-raw"
                    >
                        <ion-icon name="document-text-outline"></ion-icon>&nbsp;Исходный&nbsp;текст
                    </a>
                </li>
                <li class="nav-item small">
                    <a class="nav-link"
                       type="button"
                       href="#tab-abuse"
                       data-bs-toggle="tab"
                       data-bs-target="#tab-abuse"
                    >
                        <ion-icon name="wallet-outline"></ion-icon>&nbsp;Правообладателям
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade show active" id="tab-data" tabindex="0">
                    <table class="table table-dark table-hover small mb-lg-5">
                        <tbody>
                        <tr>
                            <th class="w-25" scope="row">Код</th>
                            <th class="text-break">
                                <span class="pe-3 font-monospace">{{ playlist.code }}</span>
                                {% if playlist.isOnline is same as (true) %}
                                    <span class="cursor-help badge small text-dark bg-success"
                                          title="Вероятно, работает"
                                    >online</span>
                                {% elseif playlist.isOnline is same as (false) %}
                                    <span class="cursor-help badge small text-dark bg-danger"
                                          title="Вероятно, не работает"
                                    >offline</span>
                                {% elseif playlist.isOnline is same as (null) %}
                                    <span class="cursor-help badge small text-dark bg-secondary"
                                          title="Не проверялся"
                                    >unknown</span>
                                {% endif %}
                            </th>
                        </tr>
                        <tr>
                            <th scope="row">Описание</th>
                            <td class="text-break"><p class="mb-0">{{ playlist.description }}</p></td>
                        </tr>
                        <tr>
                            <th scope="row">Ccылка для ТВ</th>
                            <td>
                                <span onclick="copyPlaylistUrl('{{ playlist.code }}')"
                                      class="cursor-pointer"
                                      title="Нажми на ссылку, чтобы скопировать её в буфер обмена"
                                >
                                    <b class="cursor-pointer font-monospace text-break">{{ base_url(playlist.code) }}</b>
                                    <ion-icon name="copy-outline"></ion-icon>
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">Источник</th>
                            <td class="text-break">{{ playlist.source }}</td>
                        </tr>
                        <tr>
                            <th scope="row">Наполнение</th>
                            <td class="text-break">
                                {% if playlist.isOnline is same as (true) %}
                                    {% if playlist.hasTokens is same as (true) %}
                                        <span class="cursor-help badge bg-info text-dark">
                                            <ion-icon name="paw"></ion-icon>
                                        </span>&nbsp;могут быть нестабильные каналы<br>
                                    {% endif %}

                                    {% if "adult" in playlist.tags %}
                                        <span class="cursor-help badge small bg-warning text-dark">18+</span>&nbsp;есть каналы для взрослых<br>
                                    {% endif %}

                                    <ion-icon name="folder-open-outline"></ion-icon>&nbsp;группы: {{ playlist.groups|length }}<br>
                                    <ion-icon name="videocam-outline"></ion-icon>&nbsp;каналы:
                                    <span class="cursor-help text-success" title="Возможно, рабочие каналы">
                                        {{ playlist.onlineCount }} ({{ playlist.onlinePercent }}%)
                                    </span>
                                    +
                                    <span class="cursor-help text-danger" title="Возможно, НЕрабочие каналы">
                                        {{ playlist.offlineCount }} ({{ playlist.offlinePercent }}%)
                                    </span>
                                    = {{ playlist.channels|length }}
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">Возможности</th>
                            <td class="text-break">
                                {% if playlist.isOnline is same as (true) %}
                                    <ion-icon name="newspaper-outline"></ion-icon>&nbsp;Программа передач:&nbsp;{{ playlist.hasTvg ? 'есть' : 'нет' }}<br>
                                    <ion-icon name="play-back"></ion-icon>&nbsp;Перемотка&nbsp;(архив):&nbsp;{{ playlist.hasCatchup ? 'есть' : 'нет' }}
                                {% endif %}
                            </td>
                        </tr>
                        <tr class="text-secondary">
                            <th scope="row">M3U</th>
                            <td class="text-break">{{ playlist.url }}</td>
                        </tr>
                        <tr class="text-secondary">
                            <th class="w-25" scope="row">Проверка плейлиста</th>
                            <td class="text-break">
                                <span title="Фактическая метка времени окончания проверки плейлиста">
                                    {{ to_date(playlist.checkedAt) }}
                                </span>
                            </td>
                        </tr>
                        {% if playlist.isOnline is same as (false) %}
                            <tr class="text-secondary">
                                <th class="w-25" scope="row">Ошибка проверки</th>
                                <td class="text-break">{{ playlist.content }}</td>
                            </tr>
                        {% endif %}
                        </tbody>
                    </table>

                    {% if (playlist.attributes) %}
                        <h4>Дополнительные атрибуты</h4>
                        <table class="table table-dark table-hover small font-monospace">
                            <tbody>
                            {% for attribute,value in playlist.attributes %}
                                <tr>
                                    <th class="w-25" scope="row">{{ attribute }}</th>
                                    <td class="text-break">{{ value }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    {% endif %}
                </div>
                <div class="tab-pane fade" id="tab-raw" tabindex="1">
                    <button class="btn btn-sm btn-success mye-md-3"
                            id="saveM3UBtn"
                            onclick="savePlaylist('{{ playlist.code }}')"
                    >
                        <ion-icon name="download-outline"></ion-icon>&nbsp;{{ playlist.code }}.m3u8
                    </button>
                    <button class="btn btn-sm btn-outline-light my-3"
                            id="saveM3UBtn"
                            data-bs-toggle="modal"
                            data-bs-target="#qrcode-popup"
                    >
                        <ion-icon name="qr-code-outline"></ion-icon>&nbsp;QR-код
                    </button>
                    <div class="modal fade" id="qrcode-popup" tabindex="-1">
                        <div class="modal-dialog ">
                            <div class="modal-content bg-dark">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5">QR-код со ссылкой на плейлист {{ playlist.code }}</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body text-center">
                                    <img src="/api/playlists/{{ playlist.code }}/qrcode" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <textarea class="form-control bg-dark text-light font-monospace mb-3 mb-md-0 m3u-raw"
                              rows="40"
                              id="m3u-raw"
                              readonly
                    >{{ playlist.content }}</textarea>
                </div>
                <div class="tab-pane fade" id="tab-abuse" tabindex="2">
                    <p class="my-3">
                        Данные, представленные на данной странице, получены автоматически из открыто доступных в
                        интернете IPTV-плейлистов, опубликованных третьими лицами.
                        При наличии технической возможности, источник плейлиста может быть указан на вкладке "Основные
                        данные".
                    </p>
                    <p class="my-3">
                        Сервис {{ base_url() }} не размещает и не транслирует медиаконтент, не создаёт, не призывает
                        использовать и распространять плейлисты третьих лиц, а также не оказывает услуг по ретрансляции
                        телепрограмм.
                    </p>
                    <p class="my-3">
                        Подробности о проекте и о том, как здесь оказались объекты ваших прав,
                        <a href="{{ base_url('docs') }}" target="_blank">читайте здесь</a>.
                    </p>
                    <p class="my-3">
                        Информация о телеканалах (наименования, логотипы, технический статус и другие сведения)
                        формируется исключительно путём обработки содержимого самого плейлиста.
                        Вся информация носит технический и ознакомительный характер, и её достоверность не гарантируется.
                    </p>
                    <p class="my-3">
                        Все права на торговые марки и графические изображения принадлежат их законным владельцам.
                        Если вы являетесь правообладателем и считаете, что сведения на этой странице затрагивают ваши
                        права, вот какие меры вы можете предпринять прямо сейчас:
                    </p>
                    <ul>
                        <li>
                            создать pull-request в открытом репозитории проекта с удалением данных о плейлисте из файла
                            <a href="{{ config('app.repo_url') }}/playlists/src/branch/master/playlists.ini"
                               target="_blank"
                            >playlists.ini</a>, указав в комментарии к коммиту юридически значимую информацию;
                        </li>
                        <li>
                            <a href="{{ config('app.repo_url') }}/playlists/issues/new" target="_blank">создать
                            публичное обращение</a> в открытом репозитории проекта, указав юридически значимую
                            информацию;
                        </li>
                        <li>
                            направить конфиденциальное уведомление на адрес:
                            <a href="mailto:abuse@m3u.su" target="_blank">abuse@m3u.su</a>.
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-lg-5">
            <h4>Список каналов:&nbsp;<span id="chcount">{{ playlist.channels|length }}</span></h4>
            {% if (playlist.channels|length > 0) %}
                {% if (playlist.groups|length > 1) %}
                <div class="row my-3">
                    <div class="col-12">
                        {% if (playlist.channels|length >= 500) %}
                            <div class="alert alert-warning small" role="alert" id="toomuchalert">
                                <div class="spinner-border text-success spinner-border-sm" role="status">
                                    <span class="visually-hidden">Загрузка...</span>
                                </div>
                                В плейлисте очень много каналов. На загрузку их списка и логотипов потребуется некоторое время.
                            </div>
                        {% endif %}
                        <div class="input-group">
                            <select id="groupSelector"
                                    class="form-select form-select-sm border-secondary bg-dark text-light"
                                    onchange="updateFilter()"
                            >
                                <option selected value="all">Все группы</option>
                                {% for group in playlist.groups %}
                                <option value="{{ group.id }}">{{ group.name }}</option>
                                {% endfor %}
                            </select>

                            <button type="button"
                                    onclick="resetGroup()"
                                    class="btn btn-sm btn-outline-secondary"
                                    title="Сбросить группу"
                            >
                                <ion-icon name="close-outline"></ion-icon>
                            </button>
                        </div>
                    </div>
                </div>
                {% endif %}
                <div class="row my-3">
                    <div class="col-12">
                        <div class="input-group">
                            <input type="text"
                                   id="search-field"
                                   class="cursor-help form-control form-control-sm border-secondary bg-dark text-light fuzzy-search"
                                   placeholder="Поиск каналов..."
                                   title="Начни вводить название"
                            />

                            <input type="radio"
                                   class="btn-check"
                                   name="chFilter"
                                   id="chfAll"
                                   autocomplete="off"
                                   onclick="updateFilter()"
                                   checked
                            >
                            <label class="btn btn-sm btn-outline-secondary"
                                   for="chfAll"
                                   title="Выбрать все каналы"
                            >
                                <ion-icon name="radio-button-on-outline"></ion-icon>
                            </label>

                            <input type="radio"
                                   class="btn-check"
                                   name="chFilter"
                                   id="chfOnline"
                                   autocomplete="off"
                                   onclick="updateFilter()"
                            >
                            <label class="btn btn-sm btn-outline-success"
                                   for="chfOnline"
                                   title="Выбрать только онлайн каналы"
                            >
                                <ion-icon name="radio-button-on-outline"></ion-icon>{{ playlist.onlineCount }}
                            </label>

                            <input type="radio"
                                   class="btn-check"
                                   name="chFilter"
                                   id="chfOffline"
                                   autocomplete="off"
                                   onclick="updateFilter()"
                            >
                            <label class="btn btn-sm btn-outline-danger"
                                   for="chfOffline"
                                   title="Выбрать только оффлайн каналы"
                            >
                                <ion-icon name="radio-button-on-outline"></ion-icon>{{ playlist.offlineCount }}
                            </label>

                            <button type="button"
                                    class="btn btn-sm btn-outline-secondary"
                                    onclick="resetSearch()"
                                    title="Сбросить фильтрацию"
                            >
                                <ion-icon name="close-outline"></ion-icon>
                            </button>
                        </div>

                        <div class="my-3">
                            {% for tag in playlist.tags %}
                            <input type="checkbox"
                                   class="btn-check"
                                   id="btn-tag-{{ tag }}"
                                   data-tag="{{ tag }}"
                                   autocomplete="off"
                                   onclick="updateFilter()"
                            >
                            <label class="badge btn btn-sm btn-outline-secondary rounded-pill"
                                   for="btn-tag-{{ tag }}"
                                   title="Нажми для фильтрации каналов по тегу, нажми ещё раз чтобы снять фильтр"
                            >#{{ tag }}</label>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <div class="chlist-table overflow-auto">
                    <table id="chlist" class="table table-dark table-hover small">
                        <tbody class="list">
                        {% for channel in playlist.channels %}
                        <tr class="chrow"
                            data-id="{{ channel.id }}"
                            data-group="{{ channel.groupId ?? 'all' }}"
                            data-online="{{ channel.isOnline ? 1 : 0 }}"
                            data-chtags="{{ channel.tags|join('|') }}"
                            title="&#010;HTTP: {{ channel.status ?: '(неизвестно)' }}&#010;Error: {{ channel.error ?: '(нет)' }}"
                        >
                            <td class="chindex">{{ loop.index }}</td>

                            <td class="chlogo text-center">
                                {% if (channel.attributes['tvg-logo']) %}
                                <img class="tvg-logo"
                                     alt="Логотип канала '{{ channel.title }}'"
                                     title="Логотип канала '{{ channel.title }}'"
                                     src="{{ channel.attributes['tvg-logo'] }}"
                                     onerror="setDefaultLogo(this)"
                                />
                                {% else %}
                                <img class="tvg-logo"
                                     alt="Нет логотипа для канала '{{ channel.title }}'"
                                     title="Нет логотипа для канала '{{ channel.title }}'"
                                     src="/no-tvg-logo.png"
                                />
                                {% endif %}
                            </td>

                            <td class="text-break">
                                {% if channel.isOnline is same as (true) %}
                                <ion-icon name="radio-button-on-outline"
                                          class="cursor-help me-1 text-success"
                                          title="Состояние: онлайн (возможно, работает прямо сейчас)"
                                ></ion-icon>
                                {% else %}
                                <ion-icon name="radio-button-on-outline"
                                          class="cursor-help me-1 text-danger"
                                          title="Состояние: оффлайн (не работал в момент проверки или не удалось проверить)"
                                ></ion-icon>
                                {% endif %}

                                {% if "adult" in channel.tags %}
                                <span class="badge small bg-warning text-dark"
                                      title="Канал для взрослых!"
                                >18+</span>
                                {% endif %}

                                {% if channel.hasToken is same as (true) %}
                                <span class="cursor-help badge small bg-info text-dark"
                                      title="Может быть нестабилен"
                                >
                                    <ion-icon name="paw"></ion-icon>
                                </span>
                                {% endif %}

                                <span class="chname">{{ channel.title }}</span>

                                <div class="text-secondary small">
                                    {% if (channel.attributes['tvg-id']) %}
                                    <div title="Идентификатор канала для телепрограммы (tvg-id)" class="cursor-help">
                                        <ion-icon name="star-outline" class="me-1"></ion-icon>&nbsp;{{ channel.attributes['tvg-id'] }}
                                    </div>
                                    {% endif %}

                                    {% if (channel.contentType != null) %}
                                    <div title="Тип контента (mime-type)" class="cursor-help">
                                        <ion-icon name="eye-outline" class="me-1"></ion-icon>&nbsp;{{ channel.contentType }}
                                    </div>
                                    {% endif %}

                                    {% if channel.tags|length > 0 %}
                                    <ion-icon name="pricetag-outline"
                                              class="cursor-help me-1"
                                              title="Теги"
                                    ></ion-icon>
                                        {% for tag in channel.tags %}
                                        <span class="chtag">#{{ tag }}</span>
                                        {% endfor %}
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block footer %}
<script src="/js/list.min.js"></script>
<script>
    const options = {
        valueNames: [
            'chname',
            {data: ['online', 'group', 'tag', 'chtags']}
        ],
    };

    const list = new List('chlist', options)
    list.on('updated', (data) => document.getElementById('chcount').innerText = data.visibleItems.length)
    document.getElementById('search-field').addEventListener('keyup', (e) => list.search(e.target.value))

    document.addEventListener("DOMContentLoaded", () => {
        const alert = document.getElementById("toomuchalert");
        !!alert && alert.remove()
    });

    function savePlaylist() {
        const link = document.createElement("a");
        const content = document.getElementById("m3u-raw").value
        const file = new Blob([content], { type: 'text/plain' });
        link.href = URL.createObjectURL(file);
        link.download = "{{ playlist.code }}.m3u8";
        link.click();
        URL.revokeObjectURL(link.href);
    }

    function resetGroup() {
        document.getElementById('groupSelector').value = 'all'
        updateFilter()
    }

    function resetSearch() {
        list.search('')
        document.getElementById('search-field').value = ''
        document.getElementById('chfAll').checked = true
        document.querySelectorAll('input[id*="btn-tag-"]:checked').forEach(tag => tag.checked = false)
        updateFilter()
    }

    function updateFilter() {
        const groupHash = document.getElementById('groupSelector')?.value ?? 'all';
        const tagsElements = document.querySelectorAll('input[id*="btn-tag-"]:checked')
        const tagsSelected = []
        tagsElements.forEach(tag => tagsSelected.push(tag.attributes['data-tag'].value));
        const activeType = document.querySelector('input[name="chFilter"]:checked').id;
        switch (activeType) {
            case 'chfAll':
                list.filter(item => {
                    const chTags = item.values().chtags.split('|');
                    const isGroupValid = item.values().group === groupHash || groupHash === 'all';
                    const tagsIntersection = tagsSelected.filter(tagSelected => chTags.includes(tagSelected));
                    const hasValidTags = tagsIntersection.length > 0 || tagsSelected.length === 0;
                    return isGroupValid && hasValidTags;
                })
                break
            case 'chfOnline':
                list.filter(item => {
                    const isOnline = item.values().online === '1'
                    const chTags = item.values().chtags.split('|');
                    const isGroupValid = item.values().group === groupHash || groupHash === 'all';
                    const tagsIntersection = tagsSelected.filter(tagSelected => chTags.includes(tagSelected));
                    const hasValidTags = tagsIntersection.length > 0 || tagsSelected.length === 0;
                    return isGroupValid && isOnline && hasValidTags
                })
                break
            case 'chfOffline':
                list.filter(item => {
                    const isOffline = item.values().online === '0'
                    const chTags = item.values().chtags.split('|');
                    const isGroupValid = item.values().group === groupHash || groupHash === 'all';
                    const tagsIntersection = tagsSelected.filter(tagSelected => chTags.includes(tagSelected));
                    const hasValidTags = tagsIntersection.length > 0 || tagsSelected.length === 0;
                    return isGroupValid && isOffline && hasValidTags
                })
                break
        }
    }
</script>
{% endblock %}