{% extends "template.twig" %}

{% block title %}[{{ id }}] {{ name }} - {{ config('app.title') }}{% 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}
    </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-lg-7">
            <table class="table table-dark table-hover small mb-lg-5">
                <tbody>
                <tr>
                    <th class="w-25" scope="row">ID</th>
                    <td class="text-break">
                        <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>
                    <th scope="row">Описание</th>
                    <td class="text-break"><p>{{ desc }}</p></td>
                </tr>
                <tr>
                    <th scope="row">Ccылка для ТВ</th>
                    <td><b onclick="prompt('Скопируй адрес плейлиста', '{{ url }}')"
                           data-bs-toggle="tooltip"
                           data-bs-placement="top"
                           title="Нажми на ссылку, чтобы скопировать её в буфер обмена"
                           class="font-monospace cursor-pointer text-break">{{ url }}</b></td>
                </tr>
                <tr>
                    <th scope="row">M3U</th>
                    <td class="text-break">{{ pls }}</td>
                </tr>
                <tr>
                    <th scope="row">Источник</th>
                    <td class="text-break">{{ src }}</td>
                </tr>
                </tbody>
            </table>

            {% if (content.attributes) %}
            <h4>Дополнительные атрибуты</h4>
            <table class="table table-dark table-hover small">
                <tbody>
                {% for attribute,value in content.attributes %}
                    <tr>
                        <th class="w-25" scope="row">{{ attribute }}</th>
                        <td class="text-break">{{ value }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% endif %}
        </div>

        <div class="col-lg-5">
            <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="chlist-table overflow-auto">
                    <table class="table table-dark table-hover small">
                        <tbody class="list">
                        {% for channel in content.channels %}
                            <tr class="chrow">
                                <td class="chindex">{{ loop.index }}</td>
                                <td class="chlogo text-center">
                                    <img class="tvg-logo"
                                    {% if (channel.logo.base64) %}
                                        src="{{ channel.logo.base64 }}"
                                    {% elseif (channel.attributes['tvg-logo']) %}
                                        src="{{ base_url('logo?url=' ~ channel.attributes['tvg-logo']) }}"
                                        loading="lazy"
                                    {% else %}
                                        src="{{ base_url('no-tvg-logo.png') }}"
                                    {% endif %}
                                        alt="Логотип канала '{{ channel.name }}'"
                                        title="Логотип канала '{{ channel.name }}'"
                                    />
                                </td>
                                <td class="chname text-break">{{ channel.name }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
{% endblock %}