{% extends "template.twig" %}

{% block title %}{{ name }} - {{ config('app.title') }}{% endblock %}

{% block head %}
    <style>.tvg-logo{max-width:100px;max-height:100px;background:white;padding:2px;border-radius:5px}.tvg-logo{background:unset}</style>
{% endblock %}

{% block header %}
    <h2>О плейлисте {{ name }}</h2>
    {% if (content.encoding.alert) %}
        <div class="alert alert-warning small" role="alert">
            Кодировка исходного плейлиста отличается от UTF-8.
            Он был автоматически с конвертирован из {{ content.encoding.name }}, чтобы отобразить здесь список каналов.
            Однако названия каналов могут отображаться некорректно, причём не только здесь, но и в плеере.
        </div>
    {% endif %}
    {% if (status.errCode > 0) %}
        <div class="alert alert-danger small" role="alert">
            Ошибка плейлиста: [{{ status.errCode }}] {{ status.errText }}
        </div>
    {% endif %}
{% endblock %}

{% block footer %}
    <script src="{{ base_url('js/list.min.js') }}"></script>
    <script>
        var list = new List('chlist',{valueNames:['chname','chindex']});
    </script>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-6">
            <table class="table table-dark table-hover small">
                <tbody>
                <tr>
                    <td class="w-25">ID</td>
                    <td>
                        <code>{{ id }}</code>&nbsp;{% if status.possibleStatus == 'online' %}
                        <span class="badge small text-dark bg-success">online</span>
                    {% elseif status.possibleStatus == 'offline' %}
                        <span class="badge small text-dark bg-danger">offline</span>
                    {% elseif status.possibleStatus == 'timeout' %}
                        <span class="badge small text-dark bg-warning">timeout</span>
                    {% elseif status.possibleStatus == 'error' %}
                        <span class="badge small text-dark bg-danger">error</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td>Описание</td>
                    <td><p>{{ desc }}</p></td>
                </tr>
                <tr>
                    <td><b>Ccылка для ТВ</b></td>
                    <td><b onclick="prompt('Скопируй адрес плейлиста', '{{ url }}')"
                           data-bs-toggle="tooltip"
                           data-bs-placement="top"
                           title="Нажми на ссылку, чтобы скопировать её в буфер обмена"
                           class="font-monospace cursor-pointer">{{ url }}</b></td>
                </tr>
                <tr>
                    <td>M3U</td>
                    <td>{{ pls }}</td>
                </tr>
                <tr>
                    <td>Источник</td>
                    <td>{{ src }}</td>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="col-md-6">
            <h4>Список каналов ({{ content.channelCount ?? 0 }})</h4>
            {% if (content.channelCount > 0) %}
            <div id="chlist">
                <input type="text" class="form-control form-control-sm bg-dark text-light mb-2 fuzzy-search" placeholder="Поиск...">
                <div class="overflow-auto" style="max-height:550px">
                    <table class="table table-dark table-hover small">
                        <tbody class="list">
                        {% for channel in content.channels %}
                            <tr class="chrow">
                                <td class="p-1" class="chindex">{{ loop.index }}</td>
                                <td class="p-1">
                                    {% if (channel.logo.base64) %}
                                        <img class="tvg-logo yes" src="{{ channel.logo.base64 }}" />
                                    {% elseif (channel.attributes['tvg-logo']) %}
                                        <img loading="lazy" class="tvg-logo" src="{{ base_url('logo?url=' ~ channel.attributes['tvg-logo']) }}" />
                                    {% else %}
                                        <img class="tvg-logo.empty" src="{{ base_url('no-tvg-logo.png') }}"/>
                                    {% endif %}
                                </td>
                                <td class="p-1 chname">{{ channel.name }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
{% endblock %}