{% extends "base.html" %}
{% block main_content %}
	<div class="container-fluid">
		<br>
        <form method="POST">
		<div class="form-row">
			<div class="input-group col px-0">
                <input type="submit">
                <div class="input-group-prepend">
                    <button class="btn btn-outline-info disabled" disabled="">Viewing:</button>
                </div>
                <select name="noo" style="color:#5bc0de;border:1px solid #5bc0de;" class="form-control form-conrol-info">
                    <option>Oldest</option>
                    <option>Newest</option>
                </select>
                <select name="which" style="color:#5bc0de;border:1px solid #5bc0de;" class="form-control">
                    <option>Week</option>
                    <option>Month</option>
                    <option>Year</option>
                </select>
                <div class="input-group-append">
                    <button class="btn btn-outline-info disabled" disabled="">of images, grouped by:</button>
                </div>
                <select name="grouping" style="color:#5bc0de;border:1px solid #5bc0de;" class="form-control">
                    <option>Day</option>
                    <option>Week</option>
                    <option>Month</option>
                </select>
            </div>
            <div class="input-group offset-lg-2 col">
                <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>
        </div>
        </form>
		<br>
		<div class="row">
            {% set last = namespace(printed=0) %}
			{% for obj in entry_data %}
                {% if which == "Week" %}
                    {% if last.printed != obj.file_details[0].day %}
                        </div><h6>Day: {{obj.file_details[0].day}} of {{obj.file_details[0].month}}/{{obj.file_details[0].year}}</h6></div><div class="row">
                        {% set last.printed = obj.file_details[0].day %}
                    {% endif %}
                {% elif which == "Month" %}
                    {% if last.printed != obj.file_details[0].woy %}
                        <h6>Week #: {{obj.file_details[0].woy}} of {{obj.file_details[0].year}}</h6></div><div class="row">
                        {% set last.printed = obj.file_details[0].woy %}
                    {% endif %}
                {% elif which == "Year" %}
                    {% if last.printed != obj.file_details[0].month %}
                        <h6>Month: {{obj.file_details[0].month}} of {{obj.file_details[0].year}}</h6></div><div class="row">
                        {% set last.printed = obj.file_details[0].month %}
                    {% endif %}
                {% endif %}
				{% 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%">
                                    <a href="{{obj.in_dir[0].path_prefix}}/{{obj.name}}"><img class="thumb" style="display:block" height="128" src="data:image/jpeg;base64,{{obj.file_details[0].thumbnail}}"></img></a>
									<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 %}