<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Basics -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
    <!-- Title -->
    <title>Yark{% if title %} · {{ title }}{% endif %}</title>
</head>

<body>
    <!-- Styling -->
    <style>
        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
        }

        nav {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        #nav-title {
            margin-left: 3rem;
            font-size: 110%;
        }

        #nav-content {
            margin-right: 1.5rem;
            display: flex;
        }

        #nav-content>a,
        .channel-link {
            color: #424242;
            margin-right: 1.5rem;
        }

        input[type=text],
        input[type=submit],
        button {
            background-color: white;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 1px solid rgba(0, 0, 0, 0.20);
        }

        #error {
            max-width: 12.5rem;
            background-color: rgb(193, 55, 55);
            color: white;
            border-radius: 0.5rem;
            padding: 0.5rem;
            font-size: 0.8rem;
            position: fixed;
            bottom: 0.5rem;
            right: 0.5rem;
        }

        .hero {
            margin-top: 10vh;
            font-size: 2.75rem;
            text-align: center;
        }

        #content {
            margin-left: 10vw;
            width: 80vw;
        }

        .channel-link {
            margin-left: 0.5rem;
            font-size: 95%;
        }

        @media (prefers-color-scheme: dark) {
            body {
                background-color: rgb(21, 20, 22);
                color: rgb(238, 238, 238);
            }

            nav {
                border-bottom: none;
            }

            input[type=text],
            input[type=submit],
            button {
                background-color: transparent;
                border: 1px solid rgba(255, 255, 255, 0.12);
            }

            input[type=text],
            input[type=submit],
            button,
            #nav-content>a,
            .channel-link {
                color: rgb(200, 200, 200);
            }
        }
    </style>
    {% block styling %}{% endblock %}
    <!-- Navbar -->
    <nav>
        <p id="nav-title"><a href="{{ url_for('routes.index') }}">Yark</a></p>
        <div id="nav-content">
            <a title="View the source code of Yark" href="https://github.com/owez/yark">source</a>
            <a title="See more from the author of Yark" href="https://ogriffiths.com">portfolio</a>
        </div>
    </nav>
    <!-- Content -->
    {% block content %}{% endblock %}
    <!-- Flask SSR error -->
    {% if error %}
    <div id="error">{{ error }}</div>
    {% endif %}
    <!-- Global script -->
    <script>
        // Adds an error which will automatically be deleted 
        function addError(msg) {
            let error = document.createElement("div")
            error.setAttribute("id", "error")
            error.innerText = msg
            document.body.appendChild(error)
            deleteError()
        }

        // Starts timer and then automatically deletes element
        function deleteError() {
            let err = document.getElementById("error")
            if (err) {
                setTimeout(
                    function () {
                        err.remove()
                    }, 4000
                )
            }
        }

        // Adds the current channel name to nav title if present 
        function addChannelNav() {
            const path = window.location.pathname
            if (path.startsWith("/channel/")) {
                const channelName = path.split("/")[2]
                let navTitle = document.getElementById("nav-title")
                let channelLink = document.createElement("a")
                channelLink.title = `Go (back) to ${channelName}`
                channelLink.href = `/channel/${channelName}/videos`
                channelLink.appendChild(document.createTextNode(`· ${channelName}`))
                channelLink.classList.add("channel-link")
                navTitle.appendChild(channelLink)
            }
        }

        // Add to nav
        addChannelNav()

        // Flask SSR error deletion
        {% if error %}
        deleteError()
        {% endif %}
    </script>
    <!-- Page-specific scripts -->
    {% block scripts %}{% endblock %}
</body>

</html>