{% extends 'base.html.twig' %}

{% block headTitle %}Banners{% endblock %}

{% block javascript %}
var banners = [];
{% if activeBanner %}
	{% set curBannerId = activeBanner.id %}
{% else %}
	{% set curBannerId = -1 %}
{% endif %}
{% for banner in banners %}
{% if curBannerId == -1 %}
{% set curBannerId = banner.id %}
{% endif %}
banners[{{ banner.id }}] = {};
banners[{{ banner.id }}].name = "{{ banner.name }}";
banners[{{ banner.id }}].bannerFile = "{{ banner.bannerFile }}";
banners[{{ banner.id }}].iconFile = "{{ banner.iconFile }}";
banners[{{ banner.id }}].width = {{ banner.width }};
banners[{{ banner.id }}].height = {{ banner.height }};
{% endfor %}
function updateBanner(id) {
	curBannerId = id;
	var curBanner = banners[id];
	$(".selected").removeClass('selected');
	$("#icon-"+id).addClass('selected');
	$("#currentIconImage").attr('src', "/icons/" + curBanner.iconFile);
	$("#currentBannerImage").attr('src', "/icons/" + curBanner.bannerFile);
	$("#currentBannerImage").attr('width', curBanner.width);
	$("#currentBannerImage").attr('height', curBanner.height);
	$("#currentBannerName").text(curBanner.name);
	
	$("#bannerId").val(id);
}
$(function() {
	updateBanner({{ curBannerId }});
});
{% endblock %}

{% block css %}
#bannersOuter {
	overflow-y: auto;
	max-height: 60vh;
}
.icon {
	width: 150px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #221;
}
.icon.selected {
	border: 1px solid rgb(34, 34, 17); 
	background-color: rgb(96, 96, 64);
}
.icon-inner {
	display: block;
}
{% endblock %}

{% block content %}
{% include 'flashes.html.twig' %}
{% if submittedBanners|length > 0 %}
<div class="notice">You currently have a submitted banner waiting for approval. While you can select a banner here, it will be replaced with the submitted banner if it is ultimately approved.</div>
{% endif %}
<h3>Banner Select</h3>
<p>Choose a new banner from the list below, which lists all currently unused banners available. You can also <a href="{{ path("RulerBannerCreate") }}">submit your own banners</a>&mdash;please ensure you read the rules on that page before you make your own.</p>

<p>Just click on an icon from the grid on the right to preview its associated banner on the left, then click "Select Banner" to choose it for your realm.</p>
<div style="display: grid; grid-template-columns: 410px auto;">
	<div id="currentBanner">
		<div style="background-color: #311; display: flex; align-items: center; justify-content: center; height: 30px; width: 400px;">
			<img id="currentIconImage" src="" width="24" height="24" alt="" style="position: relative; top: 0px;"/><br />
		</div>
		<div style="background-color: #311; display: flex; align-items: center; justify-content: center; height: 400px; width: 400px;">
			<img id="currentBannerImage" src="" width="" height="" alt="" style="position: relative; top: 0px;"/><br />
		</div>
		<form id="bannerSelect" action="{{ path("RulerBannerSelect") }}" method="post">
			<input type="hidden" id="bannerId" name="bannerId" value="">
			<p style="text-align: center;"><input type="submit" name="action" value="Select Banner"></p>
		</form>
	</div>
	<div id="bannersOuter">
		<div id="bannerList" style="display: flex; flex-wrap: wrap; background-color: #181818;">
			{% if submittedBanners|length > 0 %}
				{% for banner in submittedBanners %}
				<div class="icon" id="icon-{{ banner.id }}">
					<div class="icon-inner">
						<div style="text-align: center;"><img src="{{ path("AdminShowUploadedBanner", {type:'icon',bannerId: banner.id}) }}" width="24" height="24"></div>
						<div style="text-align: center;">{{ banner.name }}</div>
						<div style="text-align: center; color: #55F;">submitted banner</div>
					</div>
				</div>
				{% endfor %}
			{% endif %}
			{% for banner in banners %}
			<div class="icon" style="cursor: pointer;" onclick="updateBanner({{ banner.id }});" id="icon-{{ banner.id }}">
				<div class="icon-inner">
					<div style="text-align: center;"><img src="/icons/{{ banner.iconFile }}" width="24" height="24"></div>
					<div style="text-align: center;">{{ banner.name }}</div>
					{% if banner.id == activeBanner.id %}<div style="text-align: center; color: #F55;">current banner</div>{% endif %}
				</div>
			</div>
			{% endfor %}
		</div>
	</div>
</div>
{% endblock %}