{% extends "base.html" %}
{% block title %}
	{{board.title}} - {{show.name}} Discussions - Episodes.Community
{% endblock %}
{% load markdown %}
{% block content %}
<div class="container mb-5 mt-5">
	<nav aria-label="breadcrumb">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="/show/{{show.abbr}}">{{show.name}}</a></li>
			<li class="breadcrumb-item"><a href="/show/{{show.abbr}}/discuss">Discussions</a></li>
			<li class="breadcrumb-item active" aria-current="page">{{board.title}}</li>
		</ol>
	</nav>
	<div class="row">
		<h1 class="col">{{board.title}}</h1>
		<div class="col-2">
			<div class="d-flex flex-row-reverse mt-2">
				{% if board.locked %}
				<p>This board is locked</p>
				{% else %}
				{% if user.is_authenticated %}
				<a href="/show/{{show.abbr}}/discuss/board/reply/{{board.pk}}" class="btn btn-primary"><i class="fa fa-fw fa-pencil"></i>&nbsp;Reply</a>
				{% else %}
				<p><a href="/login">Log in</a> to reply</p>
				{% endif %}
				{% endif %}
			</div>
		</div>
	</div>
	<p class="timestamp text-muted font-weight-light">Created {{board.timestamp}} by {{board.user.display_name}}</p>
	{% for reply in replies %}
	<div class="reply border-bottom mb-4" id="reply-{{forloop.counter}}">
		<div class="row">
			<div class="avatar">
				<img src="https://icynet.eu/api/avatar/{{reply.user.icy_id}}" class="m-auto d-block">
				<p class="text-center font-weight-bold">{{reply.user.display_name}}</p>
			</div>
			<div class="col border-left d-flex flex-column">
				<p class="timestamp text-muted font-weight-light">Submitted {{board.timestamp}}</p>
				<div class="user-content mb-auto">{{reply.body|markdown|safe}}</div>
				<div class="actions d-flex flex-row-reverse">
					<div class="vote-btns">
						<form method="POST" class="d-inline" action="/show/{{show.abbr}}/discuss/vote/{{reply.id}}/1">
							{% csrf_token %}
							<button href="#" class="btn btn-link text-success">
								<i class="fa fa-fw fa-thumbs-up"></i>&nbsp;{{reply.positives}}
							</button>
						</form>
						<form method="POST" class="d-inline" action="/show/{{show.abbr}}/discuss/vote/{{reply.id}}/0">
							{% csrf_token %}
							<button href="#" class="btn btn-link text-danger">
								<i class="fa fa-fw fa-thumbs-down"></i>&nbsp;{{reply.negatives}}
							</button>
						</form>
					</div>
					<!--<a href="#" class="btn btn-secondary mr-1">Quote</a>-->
				</div>
			</div>
		</div>
	</div>
	{% empty %}
	<h3>Nobody has replied to this board!</h3>
	{% endfor %}
	{% if replies.has_other_pages %}
	<nav aria-label="Boards navigation">
		<ul class="pagination">
			{% if replies.has_previous %}
			<li class="page-item">
				<a href="?page={{ replies.previous_page_number }}" class="page-link">Previous</a>
			</li>
			{% else %}
			<li class="page-item disabled">
				<a class="page-link" href="#" tabindex="-1">Previous</a>
			</li>
			{% endif %}
			{% for i in replies.paginator.page_range %}
			{% if replies.number == i %}
			<li class="page-item active">
				<span class="page-link">{{ i }} <span class="sr-only">(current)</span></span>
			</li>
			{% else %}
			<li class="page-item">
				<a class="page-link" href="?page={{ i }}">{{ i }}</a>
			</li>
			{% endif %}
			{% endfor %}
			{% if replies.has_next %}
			<li class="page-item">
				<a href="?page={{ replies.next_page_number }}" class="page-link">Next</a>
			</li>
			{% else %}
			<li class="page-item disabled">
				<a class="page-link" href="#" tabindex="-1">Next</a>
			</li>
			{% endif %}
		</ul>
	</nav>
	{% endif %}
	{% if user.is_authenticated and not board.locked %}
	<h2>Quick Reply</h2>
	<div class="reply-box">
		<form class="form-horizontal" role="form" action="/show/{{show.abbr}}/discuss/board/reply/{{board.pk}}" method="post">
			{% include "form.html" %}
			<div class="form-group">
				<button type="submit" class="btn btn-primary">Reply</button>
			</div>
			<script type="text/javascript">
				var simplemde = new SimpleMDE({ element: document.getElementById("id_body"), forceSync: true });
			</script>
		</form>
	</div>
	{% endif %}
</div>
{% endblock %}