<!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">
<script src='/static/video-js-7.7.5/video.js'></script>
<link rel="stylesheet" href="/static/bootstrap.min.css">
<link rel="stylesheet" href="/static/w3.css">
<link rel="stylesheet" href="/static/style.css">
{% 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 = {{ max_items }};
var item_count = {{ item_count }};
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>