{% extends "meta_navbar.html" %}
{% block pagetitle %}Moderation Log{% endblock %}
{% block content %}
	{%- macro get_href(new_admin=None, new_kind=None) -%}
		{%- if hole -%}
			{%- set href = "/h/" ~ hole ~ "/log?" -%}
		{%- else -%}
			{%- set href = "/log?" -%}
		{%- endif -%}

		{%- if new_admin -%}
			{%- set admin = new_admin -%}
		{%- endif -%}
		{%- if new_kind -%}
			{%- set kind = new_kind -%}
		{%- endif -%}

		{%- if target_id -%}
			{%- set href = href ~ "target_id=" ~ target_id ~ "&" -%}
		{%- endif -%}
		{%- if admin and admin != 'All' -%}
			{%- set href = href ~ "admin=" ~ admin ~ "&" -%}
		{%- endif -%}
		{%- if kind and kind != 'All' -%}
			{%- set href = href ~ "kind=" ~ kind ~ "&" -%}
		{%- endif -%}

		{{- href[:-1] -}}
	{%- endmacro -%}

	<div class="row justify-content-around">
		<div class="col h-100">
			<div class="justify-content-between">
				<div>
					<h5 class="font-weight-bolder text-center pt-2 pb-3">{% if hole %}<a href="/h/{{hole.name}}">/h/{{hole.name}}</a> {% endif %}<span>Moderation Log</span></h5>
				</div>
			</div>

			<div class="row" style="overflow: visible;padding-top:5px">
				<div class="col">
					<div class="d-flex justify-content-between align-items-center">
						<div class="d-flex align-items-center mb-3 ml-auto">
							<div class="dropdown dropdown-actions">

								<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-bs-toggle="dropdown">
									{% if admin %}<img loading="lazy" src="/@{{admin}}/pic" alt="avatar" class="profile-pic-20 mr-2">{{admin}}{% else %}<img loading="lazy" src="{{SITE_FULL_IMAGES}}/e/marseyjanny2.webp" alt="avatar" class="profile-pic-20 mr-2">All{% endif %}
								</button>
								<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px); max-height: 50vh;
								overflow: auto">
									<a class="dropdown-item" href="{{get_href(new_admin='All')}}"><img loading="lazy" src="{{SITE_FULL_IMAGES}}/e/marseyjanny2.webp" alt="avatar" class="profile-pic-20 mr-2">All</a>
									{% if not hole %}
										<a class="dropdown-item" href="{{get_href(new_admin='AutoJanny')}}"><img loading="lazy" src="/@AutoJanny/pic" alt="avatar" class="profile-pic-20 mr-2">AutoJanny</a>
									{% endif %}
									{% for a in admins %}
										<a class="dropdown-item" href="{{get_href(new_admin=a)}}"><img loading="lazy" src="/@{{a}}/pic" alt="avatar" class="profile-pic-20 mr-2">{{a}}</a>
									{% endfor %}
								</div>
							</div>

							<div class="dropdown dropdown-actions ml-3">
								<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton2" data-bs-toggle="dropdown">
									{% if kind %}<i class="fas {{kinds[kind]['icon']}} mr-2"></i>{{kind}}{% else %}<i class="fas fa-broom mr-2"></i>All{% endif %}
								</button>
								<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px); max-height: 50vh;
								overflow: auto">
									<a class="dropdown-item" href="{{get_href(new_kind='All')}}"><i class="fas fa-broom mr-2"></i>All</a>
									{% for t, v in kinds.items() %}
										<a class="dropdown-item" href="{{get_href(new_kind=t)}}"><i class="fas {{v['icon']}} mr-2"></i>{{t}}</a>
									{% endfor %}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="rounded border mx-auto">
				{% for ma in actions %}
					<div id="action-{{ma.id}}" class="modlog-action{% if ma.unread %} unread{% endif %}">
					<div class="d-flex flex-grow-1 align-items-center">
						<a href="{{get_href(new_kind=ma.kind)}}">
							<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="fas text-center {{ma.icon}} text-lg text-white fa-fw"></i>
							</div>
						</a>
						<div class="d-flex align-items-center">
							<a href="{{get_href(new_admin=ma.user.username)}}">
								<span class="rounded">
									<div class="profile-pic-35-wrapper">
										<img loading="lazy" src="{{ma.user.profile_url}}" alt="avatar" class="profile-pic-35">
										{% if ma.user.hat_active(v)[0] -%}
											<img id="profile-pic-35-hat" class="profile-pic-35-hat hat" loading="lazy" src="{{ma.user.hat_active(v)[0]}}?h=8" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ma.user.hat_active(v)[1]}}">
										{%- endif %}
									</div>
								</span>
							</a>
							<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">
									<span class="log--item-age" id="{{ma.id}}-age" data-bs-toggle="tooltip" data-bs-placement="bottom" data-nonce="{{g.nonce}}" data-onmouseover="timestamp(this, '{{ma.created_utc}}')">{{ma.age_string}}</span>
									<a href="{{ma.permalink}}"><i class="fas fa-link ml-3 text-muted"></i></a>
									<button type="button" class="copy-link ml-3" data-clipboard-text="{{ma.permalink}}"><i class="fas fa-copy text-muted"></i></button>
								</div>
							</div>
						</div>
					</div>
				</div>
				{% else %}
					<div class="p-3">There's nothing here right now.</div>
				{% endfor %}
			</div>
			{{macros.pagination()}}
		</div>
	</div>

	<div class="toast clipboard" id="toast-success" data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
		<div class="toast-body text-center">
			<i class="fas fa-check-circle text-success mr-2"></i>Link copied to clipboard
		</div>
	</div>
	<script defer src="{{'js/vendor/clipboard.js' | asset}}"></script>
{% endblock %}