{% extends "settings.html" %}
{% block pagetitle %}Blocks{% endblock %}
{% block content %}
<script defer src="{{'js/settings_blocks.js' | asset}}"></script>
<div class="row settings-page" id="settings-page-blocks">
<div class="col col-lg-8">
	<div class="settings">
		<section id="site-settings-blocks-section" class="settings-section-section">
			<div class="row">
				<div class="col">
					<div class="d-md-flex justify-content-between mb-3">
						<div>
							<h5>Users you block</h5>
							<p class="text-small text-muted mb-md-0">You have blocked the following users. They cannot reply to your content or notify you with a username mention.</p>
						</div>
						<div class="mt-auto">
							<button type="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>User</th>
								<th>Unblock</th>
							</tr>
						</thead>
						<tbody class="text-muted">
							{% for block in v.blocking %}
								{% set user=block.target %}
								<tr>
									<td>
										{% include "user_in_table.html" %}
									</td>
									<td>
										<button type="button" class="btn btn-primary" data-nonce="{{g.nonce}}" data-onclick="unblock_user(this, '/settings/unblock?username={{user.username}}&formkey={{v|formkey}}')">Unblock</button>
									</td>
								</tr>
							{% else %}
								<td>There are no blocked users</td>
							{% endfor %}
							</tbody>
						</table>
					</div>
					{% else %}
						{{macros.ghost_box('No blocked users', '', 2)}}
					{% endif %}
				</div>
			</div>
		</section>
	</div>
</div>
</div>

<div class="modal fade" id="blockmodal" tabindex="-1">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Block user</h5>
				<button type="button" class="close" data-bs-dismiss="modal">
					<span><i class="far fa-times"></i></span>
				</button>
			</div>
			<div class="modal-body">
				<input hidden name="formkey" value="{{v|formkey}}">
				<input autocomplete="off" type="text" name="username" placeholder="Enter username..." id="block-username" class="form-control" maxlength=25 required>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-link text-muted" data-bs-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-primary" id="blockUserButton" data-nonce="{{g.nonce}}" data-onclick="block_user()">Block user</button>
			</div>
		</div>
	</div>
</div>

<div class="toast error" id="toast-exile-error" 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 %}