{{define "base"}}
<!DOCTYPE html>
<html lang="ru" class="h-100">
<head>
    <title>{{block "title" .}}{{.Title}}{{end}}</title>
    <meta charset="utf-8">
    <meta name="description" content="{{block "metadescription" .}}{{.Meta.Description}}{{end}}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="{{block "metakeywords" .}}{{.Meta.Keywords}}{{end}}">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <style>.cursor-pointer{cursor:pointer}.cursor-help{cursor:help}</style>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
    {{block "head" .}}{{end}}
</head>
<body class="d-flex flex-column h-100 bg-dark text-light">
    <header class="sticky-top bg-dark border-bottom border-secondary">
        <nav class="navbar navbar-expand-lg navbar-dark container px-2">
            <a class="navbar-brand d-flex align-items-center gap-2" href="/" title="На главную">
                <span>{{.Title}}</span>
            </a>
            <button class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#navbarNav"
                    aria-controls="navbarNav"
            >
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    {{range .Menu}}
                    {{if .Children}}
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle d-flex align-items-center"
                           href="#"
                           role="button"
                           data-bs-toggle="dropdown"
                           aria-expanded="false"
                        >
                            {{if .Icon}}<span class="mdi mdi-{{.Icon}} me-1"></span>&nbsp;{{end}}{{.Title}}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-dark">
                            {{range .Children}}
                            <li>
                                <a class="dropdown-item d-flex align-items-center gap-2" target="_blank" href="{{.Url}}">
                                    {{if .Icon}}<span class="mdi mdi-{{.Icon}}"></span>&nbsp;{{end}}{{.Title}}
                                </a>
                            </li>
                            {{end}}
                        </ul>
                    </li>
                    {{else}}
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center" target="_blank" href="{{.Url}}">
                            {{if .Icon}}<span class="mdi mdi-{{.Icon}} me-1"></span>&nbsp;{{end}}{{.Title}}
                        </a>
                    </li>
                    {{end}}
                    {{end}}
                </ul>
            </div>
        </nav>
    </header>

    <main class="flex-grow-1 container py-4">
        {{block "header" .}}{{end}}
        <div class="content-wrapper">
            {{block "content" .}}{{end}}
        </div>
    </main>

    <footer class="bg-dark border-top border-secondary py-4">
        <div class="container text-center">
            <div class="d-flex flex-wrap justify-content-center gap-3 mb-3">
                {{range .FooterLinks}}
                <a target="_blank" href="{{.Url}}" class="text-light text-decoration-none d-flex align-items-center gap-1">
                    {{if .Icon}}<span class="mdi mdi-{{.Icon}}"></span>&nbsp;{{end}}{{.Title}}
                </a>
                {{end}}
            </div>
            <div class="small text-secondary d-inline-flex align-items-center gap-1">
                <a class="text-secondary" href="{{.RepoUrl}}/releases/tag/v{{.Version}}" target="_blank">
                    <span class="mdi mdi-tag-outline"></span>&nbsp;iptvc&nbsp;v{{.Version}}
                </a>&nbsp;Антон Аксенов &copy; 2025-2026 MIT&nbsp;License
            </div>
        </div>
    </footer>

    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div class="toast align-items-center text-bg-success border-0" role="alert" id="clipboardToast">
            <div class="d-flex">
                <div class="toast-body" id="clipboardToastBody"></div>
            </div>
        </div>
    </div>

    <script src="/static/js/bootstrap.bundle.min.js"></script>
    {{block "footer" .}}{{end}}

    <script>
        function showToast(message) {
            const toastEl = document.getElementById('clipboardToast');
            const toastBodyEl = document.getElementById('clipboardToastBody');
            toastBodyEl.innerHTML = message;
            const toast = new bootstrap.Toast(toastEl, {delay: 5000});
            toast.show();
        }

        function copyPlaylistUrl(code) {
            const url = '{{.BaseUrl}}/' + code;
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard
                    .writeText(url)
                    .then(() => showToast(`Ссылка на плейлист '${code}' скопирована в буфер обмена`))
                    .catch(err => console.error('Failed to copy:', err));
            } else {
                try {
                    const textArea = document.createElement("textarea");
                    textArea.value = url;
                    textArea.style.position = "fixed";
                    document.body.appendChild(textArea);
                    textArea.focus();
                    textArea.select();
                    const successful = document.execCommand('copy');
                    document.body.removeChild(textArea);
                    if (successful) {
                        showToast(`Ссылка на плейлист '${code}' скопирована в буфер обмена`);
                    } else {
                        showToast('Ошибка при копировании ссылки', true);
                    }
                } catch (err) {
                    console.error('Fallback copy failed:', err);
                    showToast('Ошибка при копировании ссылки', true);
                }
            }
        }
    </script>
</body>
</html>
{{end}}
