<!DOCTYPE html>
<html>
<head>
<title>burgercat</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
</head>
<body>
<div class="navbar">
<h1>burgercat</h1>
<a class="selected" href="/">home</a>
<a href="/post">post</a>
{% if userdata %}
<a href="/settings/logout" class="right r">log out</a>
<a href="/settings" class="right">{{ userdata.username }}</a>
{% else %}
<a href="/signup" class="right r">sign up</a>
<a href="/login" class="right">log in</a>
{% endif %}
</div>
<script>
let timeStampElement
let unixTime
</script>
<div class="postDiv">
{% for post in posts %}
<div class="post" id="post">
<p><a href='/@{{ getUser(post["creator"])["username"] }}' class="username usernamelink">{{ getUser(post["creator"])["username"] }}</a></p>
<p class="date" id='timestamp_{{post["id"]}}'> </p>
{% if userdata %}
{% if userdata.administrator == 1 %}
<a class="date" href='/remove/{{post["id"]}}'>Remove post</a>
<br><br>
{% endif %}
{% endif %}
{% if userdata %}
<p class="hidden" id="usernameElement">{{ userdata.username }}</p>
{% endif %}
<img loading="lazy" src='{{ post["imageurl"] }}'>
<p class="text">{{ post["textstr"] }}</p>
{% if getComments(post["id"]) | length > 0 %}
<div id="commentBurgerDiv" class="commentsdiv">
{% for comment in getComments(post["id"]) %}
<p>{{ getUser(comment["creator"])["username"] }}: {{ comment.textstr }}</p>
{% endfor %}
</div>
{% else %}
<div id="commentBurgerDiv" class="hidden commentsdiv"></div>
{% endif %}
<p id="commentId" class="hidden">{{ post.id }}</p>
<button id="commentButton" class="comment">comment</button>
<div id="commentDiv" class="commentdiv hidden">
{% if userdata %}
<input id="commentBox" type="text" placeholder="content">
<button id="commentDivSave">save</button>
<button id="commentDivCancel">cancel</button>
{% else %}
<a href="/login">Log in</a>, or <a href="/signup">create an account</a> to <b>comment</b>, post, and more!
<input id="commentBox" class="hidden" type="text" placeholder="content">
<button id="commentDivSave" class="hidden">save</button>
<button id="commentDivCancel" class="hidden">cancel</button>
{% endif %}
</div>
<script>
function time2TimeAgo(ts) {
var d = new Date();
var nowTs = Math.floor(d.getTime() / 1000);
var seconds = nowTs - ts;
var interval = seconds / 31536000;
if (interval > 1) {
return Math.floor(interval) + " years ago";
}
interval = seconds / 2592000;
if (interval > 1) {
return Math.floor(interval) + " months ago";
}
interval = seconds / 86400;
if (interval > 1) {
return Math.floor(interval) + " days ago";
}
interval = seconds / 3600;
if (interval > 1) {
return Math.floor(interval) + " hours ago";
}
interval = seconds / 60;
if (interval > 1) {
return Math.floor(interval) + " minutes ago";
}
return Math.floor(seconds) + " seconds ago";
}
timeStampElement = document.getElementById('timestamp_{{post["id"]}}')
unixTime = '{{post["created"]}}'
timeStampElement.innerHTML = time2TimeAgo(unixTime)
</script>
</div>
{% endfor %}
</div>
<script src="/static/js/main.js"></script>
</body>
</html>