{% extends "base.html" %}
{% block main_content %}
    <div id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
        <div id="dd_file_details" class="dropdown-header" href="#">Details...</div>
        <a class="dropdown-item" href="#">View File</a>
        <div class="dropdown-divider"></div>
        <a id="dd_move" class="dropdown-item" href="#">Move selected file(s) to new storage folder</a>
        <a id="dd_del" class="dropdown-item" href="#">Delete Selected file(s)</a>
    </div>

    <div class="container-fluid">
        <form id="main_form" method="POST"">
            <input type="hidden" name="folders" id="folders" value="{{folders}}">
            <input type="hidden" name="cwd" id="cwd" value="{{cwd}}">
            {% if search_term is defined %}
                <input type="hidden" name="term" id="view_term" value="{{search_term}}">
            {% endif %}
            <div class="row">
                {% if "files_ip" in request.url %}
                    I
                {% elif "files_sp" in request.url %}
                    S
                {% else %}
                    R
                {% endif %}
                {% if folders %}
                    <div class="my-auto">
                        <span class="alert alert-primary">In: {{cwd}}</span>
                    </div class="col my-auto">
                {% endif %}
                <div class="input-group col-lg-4">
                    {{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="sm-txt my-auto h-100 btn btn-outline-info disabled">grouped by:</span>
                    {{CreateSelect( "grouping", grouping, ["None", "Day", "Week", "Month"])|safe }}
                </div class="input-group">
                {% if search_term is defined %}
                    <div class="col my-auto">
                        <span class="alert alert-primary">Searched for: '{{search_term}}'</span>
                    </div class="col my-auto">
                {% endif %}
                <div class="col my-auto d-flex justify-content-end">
                    <button id="prev" name="prev" class="sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-left"></i></button>
                    <span class="sm-txt h-100 my-auto">&nbsp;{{how_many}} files&nbsp;</span>
                    <button id="next" name="next" class="sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-right"></i></button>
                </div>
                <div class="col my-auto">
                    <button id="move" name="move" class="sm-txt btn btn-primary ml-4" onClick="MoveDBox(); return false;"><i class="fas fa-folder-plus"></i></button>
                    <button id="del" name="del" class="sm-txt btn btn-danger mx-1" onClick="DelDBox(); return false;"> <i class="far fa-trash-alt"></i> </button>
                </div>
                <div class="input-group col-lg-3 justify-content-end">
                    <div class="input-group-prepend">
                        <button style="width:98%" class="sm-txt 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="sm-txt 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="sm-txt 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="sm-txt 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="sm-txt 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="sm-txt 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 loop.index==1 and folders %}
                {% if obj.type.name != "Directory" %}
                    {% set root=obj.in_dir.in_path.path_prefix %}
                {% else %}
                    {% set root=obj.dir_details.in_path.path_prefix %}
                {% endif %}
                {% if cwd != root %}
                    <figure class="px-1 dir" dir={{cwd|ParentPath}}>
                        <span style="font-size:{{(size|int-22)/2}}" class="fa-stack">
                            <i style="color:grey" class="fas fa-folder fa-stack-2x"></i>
                            <i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
                        </span>
                        <figcaption class="figure-caption text-center">Back</figcaption>
                    </figure class="figure">
                {% endif %}
            {% endif %}
            {% if grouping == "Day" %}
                {% if last.printed != obj.file_details.day %}
                    {% if last.printed > 0 %}
                        </div>
                    {% endif %}
                    <div class="row pl-3"><h6>Day: {{obj.file_details.day}} of {{obj.file_details.month}}/{{obj.file_details.year}}</h6></div>
                    <div class="row pl-3">
                    {% set last.printed = obj.file_details.day %}
                {% endif %}
            {% elif grouping == "Week" %}
                {% if last.printed != obj.file_details.woy %}
                    {% if last.printed > 0 %}
                        </div>
                    {% endif %}
                    <div class="row pl-3"><h6>Week #: {{obj.file_details.woy}} of {{obj.file_details.year}}</h6></div>
                    <div class="row pl-3">
                    {% set last.printed = obj.file_details.woy %}
                {% endif %}
            {% elif grouping == "Month" %}
                {% if last.printed != obj.file_details.month %}
                    {% if last.printed > 0 %}
                        </div>
                    {% endif %}
                    <div class="row pl-3"><h6>Month: {{obj.file_details.month}} of {{obj.file_details.year}}</h6></div>
                    <div class="row pl-3">
                    {% set last.printed = obj.file_details.month %}
                {% endif %}
            {% endif %}
            {% if obj.type.name != "Directory" %}
                {% if (not folders) or ((obj.in_dir.in_path.path_prefix+'/'+obj.in_dir.rel_path+'/'+obj.name) | TopLevelFolderOf(cwd)) %}
                    <figure id="{{obj.id}}" img="{{loop.index-1}}" class="figure mx-1" fname="{{obj.name}}" yr="{{obj.file_details.year}}" date="{{obj.file_details.year}}{{"%02d" % obj.file_details.month}}{{"%02d" % obj.file_details.day}}" details="{{obj.name}} (Date: {{obj.file_details.day}}/{{obj.file_details.month}}/{{obj.file_details.year}})">
                        {% if obj.type.name=="Image" %}
                            <a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}"><img class="thumb" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img></a>
                        {% elif obj.type.name == "Video" %}
                            <div style="position:relative; width:100%">
                                <a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}"><img class="thumb" style="display:block" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details.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 %}
            {% else %}
                {% if folders %}
                    {# if not the top-level of the path and it is a top-level folder, then display a folder icon #}
                    {% if (cwd != obj.dir_details.in_path.path_prefix or obj.dir_details.rel_path|length > 0) and ((obj.dir_details.in_path.path_prefix+'/'+obj.dir_details.rel_path) | TopLevelFolderOf(cwd)) %}
                        <figure class="px-1 dir" dir={{obj.dir_details.in_path.path_prefix+'/'+obj.dir_details.rel_path}}>
                            <i style="font-size:{{size|int-22}};" class="fas fa-folder"></i>
                            <figcaption class="figure-caption text-center">{{obj.name}}</figcaption>
                        </figure class="figure">
                    {% endif %}
                {% endif %}
            {% endif %}
        {% endfor %}
        {% if grouping == "None" %}
            </div class="row pl-3">
        {% endif %}
	</div class="container">
{% endblock main_content %}
{% block script_content %}
<script>

function GetSelnAsDiv()
{
    seln=''
    $('.highlight').each(function( index ) { 
        seln+='<div fname="' + $(this).attr('fname') + '" yr="' + $(this).attr('yr') +
            '" date="' + $(this).attr('date') +
            '" class="px-1 mx-1">' + $(this).children().html() + '</div>'
        } )
    return '<div class="row col-lg-12">'+seln+'</div>'
}

function DelDBox()
{
    $('#dbox-title').html('Delete Selected File(s)')  
    div =`
        <div class="row col-lg-12">
        <p class="col">Delete the following files?</p>
        </div>`
    div+=GetSelnAsDiv()
    div+=`
        <div class="row col-lg-12">
            <button onClick="$('#dbox').modal('hide')" class="btn btn-outline-secondary col-lg-2">Cancel</button>
            <button onClick="$('#dbox').modal('hide');alert('not yet');" class="btn btn-outline-danger col-lg-2">Ok</button>
        </div>
    `
    $('#dbox-content').html(div)
    $('#dbox').modal('show')
}

function MoveDBox()
{
    $('#dbox-title').html('Move Selected File(s) to new directory in Storage Path')  
    div =`
        <div class="form-row col-lg-12">
        <p class="col">Moving the following files?</p>
        </div>`
    div+=GetSelnAsDiv()
    yr=$('.highlight').first().attr('yr')
    dt=$('.highlight').first().attr('date')
    div+=`
        <form class="form form-control-inline col-lg-12" method="POST" action="/move_files">
        <div class="input-group col-lg-12">
        <input type="text" name="prefix" class="input-group-prepend col-lg-2 form-control-plaintext text-right" value="To: 
        `
    div+=yr+'/'+dt+"-"
    div+=`"></input>
        <input type="text" name="suffix" class="col-lg-3 form-control" placeholder="name"> </input>
        </div>
        <br>
        <div class="form-row col-lg-12">
            <button onClick="$('#dbox').modal('hide'); return false;" class="btn btn-outline-secondary offset-lg-1 col-lg-2">Cancel</button>
            <button onClick="$('#dbox').modal('hide'); console.log("should do the move one day"); return false;" class="btn btn-outline-primary col-lg-2">Ok</button>
        </div>
        </form>
    `
    $('#dbox-content').html(div)
    $('#dbox').modal('show')
}

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)
    sz=sz-22
	$('.fa-folder').attr( {style: 'font-size:'+sz } )
    sz=sz/2
	$('.fa-stack').attr( {style: 'color:grey;font-size:'+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; });

(function ($, window) {

    $.fn.contextMenu = function (settings) {

        return this.each(function () {

            // Open context menu
            $(this).on("contextmenu", function (e) {
                // return native menu if pressing control
                if (e.ctrlKey) return;

                fd=$(e.target).closest(".figure").attr('details')
                $('#dd_file_details').text(fd)
                //open menu
                var $menu = $(settings.menuSelector)
                    .data("invokedOn", $(e.target))
                    .show()
                    .css({
                        position: "absolute",
                        left: getMenuPosition(e.clientX, 'width', 'scrollLeft'),
                        top: getMenuPosition(e.clientY, 'height', 'scrollTop')
                    })
                    .off('click')
                    .on('click', 'a', function (e) {
                        $menu.hide();
                        var $invokedOn = $menu.data("invokedOn");
                        var $selectedMenu = $(e.target);
                        settings.menuSelected.call(this, $invokedOn, $selectedMenu);
                    });
                return false;
            });

            //make sure menu closes on any click
            $('body').click(function () {
                $(settings.menuSelector).hide();
            });
        });
        
        function getMenuPosition(mouse, direction, scrollDir) {
            var win = $(window)[direction](),
                scroll = $(window)[scrollDir](),
                menu = $(settings.menuSelector)[direction](),
                position = mouse + scroll;
            // opening menu would pass the side of the page
            if (mouse + menu > win && menu < mouse)
                position -= menu;
            return position;
        }

    };
})(jQuery, window);

$(".figure").contextMenu({
    menuSelector: "#contextMenu",
    menuSelected: function (invokedOn, selectedMenu) {
        var msg = "You selected the menu item '" + selectedMenu.text() +
            "' on the file id: " + $(invokedOn).parent().parent().attr('id')
        console.log(msg);
        if ( "View File" == selectedMenu.text() ) {
            document.location.href = $(invokedOn).parent().attr('href')
        }
    }
});

$(document).ready(function() {
    if( {{offset}} == 0 )
    {
        $('#prev').addClass('disabled')
        $('#prev').prop('disabled', true)
    }
    $(".dir").click( function(e) { $('#cwd').val( $(this).attr('dir') ) ; $('#main_form').submit() } )
} )
</script>
{% endblock script_content %}