{% extends "packages/package_base.html" %}

{% block title %}
	{{ _("Screenshots") }} - {{ package.title }}
{% endblock %}

{% block content %}
	{% if package.checkPerm(current_user, "ADD_SCREENSHOTS") %}
		<a href="{{ package.getURL('packages.create_screenshot') }}" class="btn btn-primary float-right">
			<i class="fas fa-plus mr-1"></i>
			{{ _("Add Image") }}
		</a>
	{% endif %}
	<h2 class="mt-0">{{ _("Screenshots") }}</h2>

	<ul class="list-group sortable">
		{% set screenshots = package.screenshots.all() %}
		{% for ss in screenshots %}
			{% if ss.approved or package.checkPerm(current_user, "ADD_SCREENSHOTS") %}
				<li class="list-group-item" data-id="{{ ss.id }}">
					<div class="row">
						<div class="col-auto text-muted pr-2">
							<i class="fas fa-bars"></i>
						</div>
						<div class="col-auto">
							<img class="img-fluid" style="max-height: 64px;" src="{{ ss.getThumbnailURL() }}" />
						</div>
						<div class="col">
							{{ ss.title }}

							<div class="mt-1 text-muted">
								{{ ss.width }} x {{ ss.height }}
								{% if ss.is_low_res() %}
									{% if ss.is_very_small() %}
										<span class="badge badge-danger ml-3">
											{{ _("Way too small") }}
										</span>
									{% elif ss.is_too_small() %}
										<span class="badge badge-warning ml-3">
											{{ _("Too small") }}
										</span>
									{% else %}
										<span class="badge badge-secondary ml-3">
											{{ _("Not HD") }}
										</span>
									{% endif %}
								{% endif %}
								{% if not ss.approved %}
									<span class="ml-3">
										{{ _("Awaiting approval") }}
									</span>
								{% endif %}
							</div>
						</div>
						<form action="{{ ss.getDeleteURL() }}" method="POST" class="col-auto text-right" role="form">
							<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
							<a class="btn btn-sm btn-primary" href="{{ ss.getEditURL() }}">
								<i class="fas fa-pen"></i>
							</a>
							<button type="submit" class="btn btn-sm btn-danger ml-2">
								<i class="fas fa-trash"></i>
							</button>
						</form>
					</div>
				</li>
			{% endif %}
		{% else %}
			<li class="list-group-item">
				<i>{{ _("No screenshots.") }}</i>
			</li>
		{% endfor %}
	</ul>

	{% if screenshots %}
		<form action="" method="POST" class="form mt-4" role="form">
			<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
			<input type="hidden" name="order" value="" />
			<input type="submit" value="{{ _('Save Order') }}" class="btn btn-primary">
		</form>

		<noscript>
			<p class="alert alert-warning mt-5">
				{{ _("Reordering requires JavaScript.") }}
			</p>
		</noscript>
	{% endif %}

	<h2 id="client-preview">{{ _("Client Preview") }}</h2>
	<p class="mb-4">
		{{ _("The first screenshot in the list above will be the package thumbnail.") }}
	</p>
	<div class="client-preview d-flex flex-row align-items-center">
		<img class="mt-thumb" src="{{ package.getThumbnailOrPlaceholder(1) }}" alt="{{ _('Thumbnail') }}">
		<div class="flex-grow desc align-self-stretch">
			<p>
				<span class="title">{{ package.title }}</span> by {{ package.author.username }}
			</p>
			<p>
				{% if package.state.name == 'WORK_IN_PROGRESS' %}
					Work in Progress.
				{% endif %}
				{{ package.short_desc }}
			</p>
		</div>
		<div>
			<img src="/static/minetest_client_buttons.png" alt="Install">
		</div>
	</div>

	<h2>{{ _("Cover Image") }}</h2>

	{% if screenshots %}
		{% from "macros/forms.html" import render_submit_field, render_field %}
		<form action="" method="POST" class="form" role="form">
			{{ form.hidden_tag() }}

			{{ render_field(form.cover_image, tabindex=220) }}

			{{ render_submit_field(form.submit, tabindex=280) }}
		</form>
	{% else %}
		<p class="text-muted">
			<i>{{ _("No screenshots.") }}</i>
		</p>
	{% endif %}

	<h2>{{ _("Videos") }}</h2>
	<p>
		{{ _("You can set a video on the Edit Details page") }}
	</p>
{% endblock %}

{% block scriptextra %}
	<script src="/static/libs/jquery-ui.min.js"></script>
	<script>
		function update() {
			const elements = Array.from(document.getElementsByClassName("sortable")[0].children);
			const ids = elements.map(x => x.dataset.id).filter(x => x);
			$("input[name='order']").val(ids.join(","))
		}

		update();

		$(function() {
			$(".sortable").sortable({
				update: update
			});
		});
	</script>
{% endblock %}