<!DOCTYPE html>
<html lang="en">
<head style="height: 100%">
    <meta charset="UTF-8">
    <title>rpi - {{ title }}</title>
    <link rel="icon" type="image/png" href="/static/images/icon.png" sizes="32x32">
    <link href="/static/video-js-7.7.5/video-js.css" rel="stylesheet">
    <link href="/static/videojs-resolution-switcher.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/bootstrap.min.css">
    <link rel="stylesheet" href="/static/w3.css">
    <link rel="stylesheet" href="/static/style.css">
    <script src='/static/video-js-7.7.5/video.js'></script>
    <script src="/static/videojs-resolution-switcher.js"></script>
    {% block head %}
    {% endblock %}
<style>
    * {
        box-sizing: border-box;
    }
</style>
</head>

<body style="height: 100vh;display: flex; flex-direction: column; margin: 0">
<div style="flex: 1 0 auto">
<div class="sticky-top">
<nav class="navbar navbar-expand navbar-light bg-secondary">
    <a class="navbar-brand" href="{{ url_for("home") }}">
        <img src="/static/images/icon.png" height="40px" alt="">
    </a>
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link" href="{{ url_for("home") }}">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ url_for("comics.index") }}">Comics</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ url_for("tv_movies.index") }}">Tv & Movies</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ url_for("games.index") }}">Games</a>
        </li>
    </ul>
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="{{ url_for("login") }}">
                Login
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ url_for("logout") }}">
                Logout
            </a>
        </li>
    </ul>
</nav>
    {% block nav %}
    {% endblock %}
</div>
{% block content %}
    <p>Hello World!</p>
{% endblock %}
</div>

<script>
    var page_num = {% if page %}{{ page }}{% else %}1{% endif %};
    var max_items = {% if max_items %}{{ max_items }}{% else %}1{% endif %};
    var item_count = {% if item_count %}{{ item_count }}{% else %}1{% endif %};
    var start = max_items*(page_num-1);
    var end;
    if (item_count < max_items*page_num) {
        end = item_count;
    } else {
        end = max_items * page_num;
    }
    var page_container = document.getElementById("page-container");

    function go_to_page(pagenumber) {
        let url = new URL(document.location)
        url.searchParams.set("page", pagenumber)
        window.history.replaceState(null, null, url.toString())
        {#document.location.search = search#}
        page_num = pagenumber;
        start = max_items*(page_num-1);
        if (item_count < max_items*page_num) {
            end = item_count;
        } else {
            end = max_items * page_num;
        }
        populate_page()
        var page_count = Math.ceil(item_count/max_items);
        if (page_count > 1) {
            var min = 1 + page_num - 6;
            var max = page_num + 6;
            var prev = page_num - 1;
            var next = page_num + 1;
            if (min <= 1) {
                min = 2;
            }
            if (max >= page_count) {
                max = page_count;
            }
            var pagination_bars = document.getElementsByClassName("pagination");
            for (let i = 0; i < pagination_bars.length; i++) {
                pagination_bars[i].innerHTML = "";

                if (page_num != 1) {
                    var prev_item = `<li class="page-item"><button name="page" value="${prev}" class="page-link" onclick="offset_page(-1)"><img src="/static/svg/chevron-left.svg"></button></li>`;
                    pagination_bars[i].innerHTML += prev_item;
                }
                first_active = "";
                if (page_num == 1) {first_active = "active"}
                var first_item = `<li class="page-item ${first_active}"><button name="page" value="1" class="page-link" onclick="go_to_page(1)">1</button></li>`;
                pagination_bars[i].innerHTML += first_item;
                if (min > 2) {pagination_bars[i].innerHTML += "...";}

                for (x = min; x < max; x++) {
                    active = "";
                    if (page_num == x) {active = "active"}
                    var item = `<li class="page-item ${active}"><button name="page" value="${x}" class="page-link" onclick="go_to_page(${x})">${x}</button></li>`;
                    pagination_bars[i].innerHTML += item;
                }

                if (max < page_count) {pagination_bars[i].innerHTML += "...";}
                last_active = "";
                if (page_num == page_count) {last_active = "active"}
                var last_item = `<li class="page-item ${last_active}"><button name="page" value="1" class="page-link" onclick="go_to_page(${page_count})">${page_count}</button></li>`;
                pagination_bars[i].innerHTML += last_item;
                if (page_num != page_count) {
                    var next_item = `<li class="page-item"><button name="page" value="${next}" class="page-link" onclick="offset_page(1)"><img src="/static/svg/chevron-right.svg"></button></li>`;
                    pagination_bars[i].innerHTML += next_item;
                }
            }
        }
        window.scrollTo(0, 0)
    }

    function offset_page(i) {
        go_to_page(page_num += i);
    }
</script>
{% block footer %}
    <footer class="bg-secondary" style="flex-shrink: 0; padding: 20px;">
        {% block footer_content %}
        {% endblock footer_content %}
    </footer>
{% endblock footer %}
<script>


</script>
</body>
</html>
