{% extends "settings.html" %}
{% block pagetitle %}Block Settings - {{SITE_TITLE}}{% endblock %}
{% block content %}

<script src="{{ 'js/settings_blocks.js' | asset }}"></script>
<div class="row">
	<div class="col">
		{% if error %}
		<div class="alert alert-danger alert-dismissible fade show my-3" role="alert">
			<i class="fas fa-exclamation-circle my-auto"></i>
			<span>
				{{error}}
			</span>
			<button class="close" data-bs-dismiss="alert" aria-label="Close">
				<span aria-hidden="true"><i class="far fa-times"></i></span>
			</button>
		</div>
		{% endif %}
	</div>
</div>
<div class="row">
	<div class="col">
		<div class="d-md-flex justify-content-between mb-3">
			<div>
				<h2 class="h5">Users you block</h2>
				<p class="text-small text-muted mb-md-0">You have blocked the following users. They cannot notify you or send you messages and their comments are hidden.</p>
			</div>
			<div class="mt-auto">
				<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#blockmodal">Block user</button>
			</div>
		</div>

	{% if v.blocking.first() %}
	<div class="card mb-5">
		<div class="overflow-x-auto"><table class="table table-hover rounded mb-0">
			<thead class="thead-dark">
				<tr>
					<th scope="col">User</th>
					<th scope="col">Blocked since</th>
					<th scope="col"></th>
				</tr>
			</thead>
			<tbody class="text-muted">
				{% for block in v.blocking %}
				<tr>
					<td>
						<a href="{{block.target.permalink}}">
							<img loading="lazy" src="{{block.target.profile_url}}" class="pp20 align-top mr-2">@{{block.target.username}}</a>
					</td>
					<td>{{block.created_date}}</td>
						<td>
							<div class="dropdown float-right dropdown-actions">
								<a role="button" id="dropdownMoreLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="line-height: 0;">
									<i class="fas fa-ellipsis-h text-muted"></i>
								</a>
								<div class="dropdown-menu border-0 shadow dropdown-menu-right mt-2" aria-labelledby="dropdownMoreLink" x-placement="bottom-end" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(21px, 18px, 0px);">
									<a class="dropdown-item" role="button" onclick="postToastSimple(this,'/settings/unblock?username={{block.target.username}}&formkey={{v.formkey}}')"><i class="fas fa-check"></i>Unblock</a>
								</div>
							</div>
						</td>
					</tr>
					{% else %}
					<td>There are no blocked users</td>
					{% endfor %}
				</tbody>
			</table>
		</div>
		{% else %}
		<div class="text-center border-md rounded py-7">
			<i class="fas fa-ghost text-gray-500 mb-3" style="font-size: 3.5rem;"></i>
			<p class="font-weight-bold text-gray-500 mb-0">No blocked users</p>
		</div>
		{% endif %}
	</div>
</div>

<div class="modal fade" id="blockmodal" tabindex="-1" role="dialog" aria-labelledby="blockmodal" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<form class="m-auto" action="/settings/block" id="exile-form" method="post" onsubmit="return false;">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Block users</h5>
					<button class="close" data-bs-dismiss="modal" aria-label="Close">
						<span aria-hidden="true"><i class="far fa-times"></i></span>
					</button>
				</div>
				<div class="modal-body">
					{{forms.formkey(v)}}
					<input autocomplete="off" type="text" name="username" placeholder="Enter username..." id="exile-username" class="form-control" maxlength=25 required>
				</div>
				<div class="modal-footer">
					<button class="btn btn-link text-muted" data-bs-dismiss="modal">Cancel</button>
					<button class="btn btn-primary" id="exileUserButton" onclick="block_user()">Block user</button>
				</div>
			</div>
		</form>
	</div>
</div>

<div class="toast error" id="toast-exile-error" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
	<div class="toast-body text-center">
		<i class="fas fa-exclamation-circle text-danger mr-2"></i><span id="toast-error-message">Error. Please try again.</span>
	</div>
</div>
{% endblock %}