{% extends "default.html" %}

{% block title %}
<title>{{SITE_NAME}}</title>

{% endblock %}

{% block content %}

{% if thing %}

<h1 class="mt-2">Info</h1>
<p><a href="{{thing.permalink}}">{{thing.permalink}}</a></p>
<p><b>Author:</b> <a href="{{thing.author.url}}">@{{thing.author.username}}</a></p>
<p><b>Author Created At:</b> <span data-time="{{thing.author.created_utc}}"></span></p>
<p><b>Author Truescore:</b> {{"{:,}".format(thing.author.truescore)}}</p>
<p><b>Upvotes: </b>{{ups | length}}</p>
<p><b>Downvotes: </b>{{downs | length}}</p>

<h2>Upvotes</h2>
<div class="overflow-x-auto">
	<table class="table table-striped mb-5">
		<thead class="bg-primary text-white">
			<tr>
				<th>#</th>
				<th>User</th>
				<th onclick="sort_table(2)">User Truescore</th>
				<th onclick="sort_table(3)">Vote Time</th>
			</tr>
		</thead>

		{% for vote in ups %}
			<tr>
				<td>{{loop.index}}</td>
				<td>
					{% with user=vote.user %}
						{% include "user_in_table.html" %}
					{% endwith %}
				</td>
				<td>{{"{:,}".format(vote.user.truescore)}}</td>
				<td {% if vote.created_utc > 1599343262 %}data-time="{{vote.created_utc}}"{% endif %}></td>
			</tr>
		{% endfor %}
	</table>
</div>

<h2>Downvotes</h2>
<div class="overflow-x-auto">
	<table class="table table-striped mb-5">
		<thead class="bg-primary text-white">
			<tr>
				<th>#</th>
				<th>User</th>
				<th onclick="sort_table(1)">User Truescore</th>
				<th onclick="sort_table(2)">Vote Time</th>
			</tr>
		</thead>

		{% for vote in downs %}
			<tr>
				<td>{{loop.index}}</td>
				<td>
					{% with user=vote.user %}
						{% include "user_in_table.html" %}
					{% endwith %}
				</td>
				<td>{{"{:,}".format(vote.user.truescore)}}</td>
				<td {% if vote.created_utc > 1599343262 %}data-time="{{vote.created_utc}}"{% endif %}></td>
			</tr>
		{% endfor %}
	</table>
</div>

<script defer src="{{'js/sort_table.js' | asset}}"></script>

{% endif %}


{% endblock %}