{% extends "base.html" %}
{% block title %}
	{{board.title}} - {{show.name}} Discussions - Episodes.Community
{% endblock %}
{% load markdown %}
{% load guardian_tags %}
{% block content %}
{% get_obj_perms request.user for show as "show_perms" %}
<div class="container mb-5 mt-5">
	<nav aria-label="breadcrumb">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="{{showurl}}">{{show.name}}</a></li>
			<li class="breadcrumb-item"><a href="{{showurl}}/discuss">Discussions</a></li>
			<li class="breadcrumb-item active" aria-current="page">{{board.title}}</li>
		</ol>
	</nav>
	<div class="row">
		<h1 class="col">{% if board.locked %}<i class="fa fa-fw fa-lock"></i>{% endif %}{% if board.pinned %}<i class="fa fa-fw fa-thumb-tack"></i>{% endif %}{{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="{{showurl}}/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">
					<a href="{{showurl}}/discuss/board/report/{{reply.id}}" class="btn btn-secondary ml-1" title="Report" aria-label="Report"><i class="fa fa-fw fa-flag"></i></a>
					<div class="vote-btns">
						<form method="POST" class="d-inline" action="{{showurl}}/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="{{showurl}}/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="{{showurl}}/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 %}
	{% if user.is_authenticated %}
	<h4>Board Tools</h4>
	<ul>
		{% if not board.locked %}
		<li><a href="{{showurl}}/discuss/board/reply/{{board.pk}}">Reply to the board</a></li>
		{% endif %}
		{% if "can_moderate_board" in show_perms or board.user == user and not board.locked %}
		<li><a href="{{showurl}}/discuss/board/lock/{{board.pk}}">Lock the board from further replies</a></li>
		{% endif %}
		{% if "can_moderate_board" in show_perms %}
		<li><a href="{{showurl}}/discuss/board/pin/{{board.pk}}">{% if board.pinned %}Unpin the board{% else %}Pin the board at the top{% endif %}</a></li>
		<li><a href="{{showurl}}/discuss/board/delete/{{board.pk}}">Delete the board</a></li>
		{% endif %}
	</ul>
	{% endif %}
</div>
{% endblock %}