{% extends "base.html" %}
{% block main_content %}
	<div class="container-fluid">
		<h3 class="offset-lg-2">{{page_title}} -- {{file_data.view_path}}</h3>
		<div class="form-row input-group">
			<div class="input-group-prepend">
				<button class="btn btn-outline-info disabled" disabled>Size:</button>
			</div>
			<div class="input-group-append">
			<button id="sz-but-64" class="sz-but btn btn-outline-info" onClick="ChangeSize(64)">XS</button>
			</div>
			<div class="input-group-append">
			<button id="sz-but-96" class="sz-but btn btn-outline-info" onClick="ChangeSize(96)">S</button>
			</div>
			<div class="input-group-append">
			<button id="sz-but-128" class="sz-but btn btn-info" onClick="ChangeSize(128)">M</button>
			</div>
			<div class="input-group-append">
			<button id="sz-but-192" class="sz-but btn btn-outline-info" onClick="ChangeSize(192)">L</button>
			</div>
			<div class="input-group-append">
			<button id="sz-but-256" class="sz-but btn btn-outline-info" onClick="ChangeSize(256)">XL</button>
			</div>
		</div>
		<div class="row">
			{% for obj in file_data.view_list %}
				{% if obj.type != "Directory" %}
					<center>
						<figure class="figure px-2" font-size: 24px;>
							{% if obj.type=="Image" %}
								<a href="{{file_data.symlink}}/{{obj.name}}"><img class="thumb" height="128" src="data:image/jpeg;base64,{{obj.thumbnail}}"></img></a>
							{% elif obj.type == "Video" %}
								<img class="thumb" height="128" src="data:image/jpeg;base64,{{obj.thumbnail}}"></img>
							{% 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(sz)
{
	old_but=$('.sz-but.btn-info').removeClass('btn-info').addClass('btn-outline-info')
	$('#sz-but-'+sz).addClass('btn-info').removeClass('btn-outline-info')
	$('.thumb').attr( {height: sz, style: 'font-size:'+sz } )
}
</script>
{% endblock script_content %}