{% extends "default.html" %}

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

{% endblock %}

{% block content %}

{% if thing %}

<pre>

</pre>
<h1>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.truecoins)}}</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(1)">User Truescore</th>
				<th onclick="sort_table(2)">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.truecoins)}}</td>
				<td data-time="{{vote.created_utc}}"></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.truecoins)}}</td>
				<td data-time="{{vote.created_utc}}"></td>
			</tr>
		{% endfor %}
	</table>
</div>

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

{% endif %}


{% endblock %}