{% extends "base.html" %}
{% block main_content %}
    <div class="container-fluid">
        <form method="POST">
            <div class="row">
                <div class="input-group col">

                    {{CreateSelect( "noo", noo, ["Oldest", "Newest"], "$('#offset').val(0)")|safe }}
                    {{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"])|safe }}
                    <span style="border:0" class="btn btn-outline-info disabled">grouped by:</span>
                    {{CreateSelect( "grouping", grouping, ["None", "Day", "Week", "Month"])|safe }}
                </div class="input-group">
                <div class="col my-auto d-flex justify-content-center">
                    {% set fd=entry_data[0].file_details[0] %}
                    <button id="prev" name="prev" class="btn btn-info"><i class="fas fa-arrow-alt-circle-left"></i></button>
                    <span class="h-100 my-auto">&nbsp;{{how_many}} files&nbsp;</span>
                    <button id="next" name="next" class="btn btn-info"><i class="fas fa-arrow-alt-circle-right"></i></i></button>
                </div>
                <div class="input-group col justify-content-end">
                    <div class="input-group-prepend">
                        <button style="width:98%" class="btn btn-outline-info disabled" disabled>Size:</button>
                    </div>
                    {% if size == "64" %}
                        {% set bt="btn-info" %}
                    {% else %}
                        {% set bt="btn-outline-info" %}
                    {% endif %}
                    <div class="input-group-append">
                        <button id="64" class="sz-but btn {{bt}}" onClick="ChangeSize(this,64); return false;">XS</button>
                    </div>
                    {% if size == "96" %}
                        {% set bt="btn-info" %}
                    {% else %}
                        {% set bt="btn-outline-info" %}
                    {% endif %}
                    <div class="input-group-append">
                        <button id="96" class="sz-but btn {{bt}}" onClick="ChangeSize(this,96); return false;">S</button>
                    </div>
                    {% if size == "128" %}
                        {% set bt="btn-info" %}
                    {% else %}
                        {% set bt="btn-outline-info" %}
                    {% endif %}
                    <div class="input-group-append">
                        <button id="128" class="sz-but btn {{bt}}" onClick="ChangeSize(this,128); return false;">M</button>
                    </div>
                    {% if size == "192" %}
                        {% set bt="btn-info" %}
                    {% else %}
                        {% set bt="btn-outline-info" %}
                    {% endif %}
                    <div class="input-group-append">
                        <button id="192" class="sz-but btn {{bt}}" onClick="ChangeSize(this,192); return false;">L</button>
                    </div>
                    {% if size == "256" %}
                        {% set bt="btn-info" %}
                    {% else %}
                        {% set bt="btn-outline-info" %}
                    {% endif %}
                    <div class="input-group-append">
                        <button id="256" class="sz-but btn {{bt}}" onClick="ChangeSize(this,256); return false;">XL</button>
                    </div>
                </div class="input-group">
            </div class="form-row">
            <input id="offset" type="hidden" name="offset" value="{{offset}}">
            <input id="size" type="hidden" name="size" value="{{size}}">
        </form>

        {% set last = namespace(printed=0) %}
        {% if grouping == "None" %}
            <div class="row pl-3">
        {% endif %}
        {% for obj in entry_data %}
            {% if grouping == "Day" %}
                {% if last.printed != obj.file_details[0].day %}
                    {% if last.printed > 0 %}
                        </div>
                    {% endif %}
                    <div class="row pl-3"><h6>Day: {{obj.file_details[0].day}} of {{obj.file_details[0].month}}/{{obj.file_details[0].year}}</h6></div>
                    <div class="row pl-3">
                    {% set last.printed = obj.file_details[0].day %}
                {% endif %}
            {% elif grouping == "Week" %}
                {% if last.printed != obj.file_details[0].woy %}
                    {% if last.printed > 0 %}
                        </div>
                    {% endif %}
                    <div class="row pl-3"><h6>Week #: {{obj.file_details[0].woy}} of {{obj.file_details[0].year}}</h6></div>
                    <div class="row pl-3">
                    {% set last.printed = obj.file_details[0].woy %}
                {% endif %}
            {% elif grouping == "Month" %}
                {% if last.printed != obj.file_details[0].month %}
                    {% if last.printed > 0 %}
                        </div>
                    {% endif %}
                    <div class="row pl-3"><h6>Month: {{obj.file_details[0].month}} of {{obj.file_details[0].year}}</h6></div>
                    <div class="row pl-3">
                    {% set last.printed = obj.file_details[0].month %}
                {% endif %}
            {% endif %}
            {% if obj.type.name != "Directory" %}
                    <figure id="{{obj.id}}" img="{{loop.index-1}}" class="figure mx-1">
                        {% if obj.type.name=="Image" %}
                            <a href="{{obj.in_dir[0].path_prefix}}/{{obj.name}}"><img class="thumb" height="{{size}}" 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="{{size}}" 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 %}
                        {# finding text distracting, <figcaption style="font-size:12px;" class="figure-caption text-center">{{obj.name}}</figcaption> #}
                    </figure>
            {% endif %}
        {% endfor %}
        {% if grouping == "None" %}
            </div class="row pl-3">
        {% endif %}
	</div class="container">
{% endblock main_content %}
{% block script_content %}
<script>
function ChangeSize(clicked_button,sz)
{
	$('.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 } )
	$('#size').val(sz)
}

// e == event (can see if shift/ctrl held down while left-clicking
// el == element the click is on
// this allows single-click to select, ctrl-click to (de)select 1 item, and
// shift-click to add all elements between highlighted area and clicked area,
// whether you click after highlight or before
function DoSel(e, el)
{
    if( e.ctrlKey )
    {
        $(el).toggleClass('highlight')
        return
    }
    if( e.shiftKey )
    {
        st=Number($('.highlight').first().attr('img'))
        end=Number($('.highlight').last().attr('img'))
        clicked=Number($(el).attr('img'))
        if( clicked > end )
            $('.figure').slice( end, clicked+1 ).addClass('highlight')
        else
            $('.figure').slice( clicked, st ).addClass('highlight')
        return
    }
    $('.highlight').removeClass('highlight')
    $(el).addClass('highlight')
}

$('.figure').click( function(e) { DoSel(e, this ); return false; });
$('.figure').contextmenu( function(e) { console.log('do own context-menu'); return false; });


$(document).ready(function() {
    if( {{offset}} == 0 )
    {
        $('#prev').addClass('disabled')
        $('#prev').prop('disabled', true)
    }
} )


</script>
{% endblock script_content %}