{% extends "base.html" %}
{% block main_content %}
	<div class="container-fluid">
		<h3 class="offset-lg-2">{{page_title}}</h3>
		<div class="form-row input-group">
			<div class="input-group-prepend">
				<button style="width:98%" class="btn btn-outline-info disabled" disabled>Size:</button>
			</div>
			<div class="input-group-append">
			<button class="sz-but btn btn-outline-info" onClick="ChangeSize(this,64)">XS</button>
			</div>
			<div class="input-group-append">
			<button class="sz-but btn btn-outline-info" onClick="ChangeSize(this,96)">S</button>
			</div>
			<div class="input-group-append">
			<button class="sz-but btn btn-info" onClick="ChangeSize(this,128)">M</button>
			</div>
			<div class="input-group-append">
			<button class="sz-but btn btn-outline-info" onClick="ChangeSize(this,192)">L</button>
			</div>
			<div class="input-group-append">
			<button class="sz-but btn btn-outline-info" onClick="ChangeSize(this,256)">XL</button>
			</div>
		</div>
		<br>
		<div class="row">
			{% for obj in entry_data %}
				{% if obj.type.name != "Directory" %}
					<center>
						<figure class="figure px-2" font-size: 24px;>
							{% if obj.type.name=="Image" %}
								<a href="{{obj.in_dir[0].path_prefix}}/{{obj.name}}"><img class="thumb" height="128" src="data:image/jpeg;base64,{{obj.file_details[0].thumbnail}}"></img></a>
							{% elif obj.type.name == "Video" %}
								<div style="position:relative; width:100%">
									<img class="thumb" style="display:block" height="128" src="data:image/jpeg;base64,{{obj.file_details[0].thumbnail}}"></img>
									<div style="position:absolute; top: 2; left: 2;">
										<i style="font-size:32;background-color:black;color:white" class="fas fa-film"></i>
									</div>
								</div>
							{% endif %}
							<figcaption class="figure-caption text-center">{{obj.name}}</figcaption>
						</figure>
					</center>
				{% endif %}
			{% endfor %}
		</div class="row">
	</div class="container">
{% endblock main_content %}
{% block script_content %}
<script>
function ChangeSize(clicked_button,sz)
{
	console.log(clicked_button)
	old_but=$('.sz-but.btn-info').removeClass('btn-info').addClass('btn-outline-info')
	$(clicked_button).addClass('btn-info').removeClass('btn-outline-info')
	$('.thumb').attr( {height: sz, style: 'font-size:'+sz } )
}
</script>
{% endblock script_content %}