{% extends "settings2.html" %}

{% block pagetitle %}Moderation Log{% endblock %}


{% block content %}
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

<script>
	var clipboard = new ClipboardJS('.copy-link');
	clipboard.on('success', function(e) {
			var myToast = new bootstrap.Toast(document.getElementById('toast-success'));
			myToast.show();
			console.log(e);
	});
</script>

{% if v %}
	<style>:root{--primary:#{{v.themecolor}}}</style>
	<link rel="stylesheet" href="/assets/css/main.css?v=94"><link rel="stylesheet" href="/assets/css/{{v.theme}}.css?v=94">
	{% if v.agendaposter %}<link rel="stylesheet" href="/assets/css/agendaposter.css?v=94">{% elif v.css %}<link rel="stylesheet" href="/@{{v.username}}/css">{% endif %}
{% else %}
	<style>:root{--primary:#{{'DEFAULT_COLOR' | app_config}}</style>
	<link rel="stylesheet" href="/assets/css/main.css?v=94"><link rel="stylesheet" href="/assets/css/{{'DEFAULT_THEME' | app_config}}.css?v=94">
{% endif %}

<div class="row justify-content-around">

	<div class="col h-100">

		<div class="d-md-flex justify-content-between mb-3">

			<div>
				<h5>Moderation Log</h5>
			</div>

		</div>

		<div class="rounded border bg-white mx-auto">
			{% for ma in actions %}

				<div id="action-{{ma.id}}" class="position-relative d-flex justify-content-between flex-wrap align-items-center h-min-16 px-3 py-3 mb-3 mb-md-2 bg-white{% if loop.index > 1 %} border-top{% endif %}">

				<div class="d-flex flex-grow-1 align-items-center">
					<div class="d-flex align-items-center justify-content-center {{ma.color}} mr-3 rounded-lg flex-shrink-0" style="width: 32px;height: 32px;"><i class="far text-center {{ma.icon}} text-lg text-white fa-fw"></i></div>
					<div class="d-flex align-items-center">
						<span class="rounded">
						<img loading="lazy" src="{{ma.user.profile_url}}" alt="avatar" width=42 height=42 class="rounded-circle">
					</span>
						<div class="text-muted pl-3">
							<div>
								<a href="{{ma.user.url}}" class="font-weight-bold text-black" target="_self">@{{ma.user.username}}</a>

							<span>{{ma.string | safe}}</span>
						</div>

						<div class="text-gray-500">{{ma.age_string}} <a href="{{ma.permalink}}"><i class="far fa-link ml-1 text-muted"></i></a>
							<a href="javascript:void(0)" class="copy-link" role="button"data-clipboard-text="{{ma.permalink | full_link}}"><i class="far fa-copy ml-1 text-muted"></i></a>
						</div>

					</div>
				</div>
			</div>
			</div>


			{% else %}
				<div>There's nothing here right now.</div>
			{% endfor %}
		</div>


		<nav aria-label="Page navigation" class="mb-5">
			<ul class="pagination pagination-sm mb-0">
				{% if page>1 %}
					<li class="page-item">
						<small><a class="page-link" href="?page={{page-1}}" tabindex="-1">Prev</a></small>
					</li>
				{% else %}
					<li class="page-item disabled"><span class="page-link">Prev</span></li>
				{% endif %}
				{% if next_exists %}
				<li class="page-item">
					<small><a class="page-link" href="?page={{page+1}}">Next</a></small>
				</li>
				{% else %}
					<li class="page-item disabled"><span class="page-link">Next</span></li>
				{% endif %}
			</ul>
		</nav>

	</div>
</div>
{% endblock %}