{% extends "base.html" %}
{% block main_content %}

    <script src="{{ url_for( 'internal', filename='js/files_support.js')}}"></script>
    <script src="{{ url_for( 'internal', filename='js/files_transform.js')}}"></script>

    <script>
        document.fake_shift=0
        document.fake_ctrl=0
        var move_paths=[]
        {% for p in move_paths %}
            p = new Object()
            p.type = '{{p.type}}'
            p.path = '{{p.path}}'
            p.icon_url = '{{p.icon_url}}'
            move_paths.push(p)
        {% endfor %}

        document.OPT = '{{OPT}}'
        document.entries = '{{entry_data}}'
        document.how_many = '{{OPT.how_many}}'
        document.entries_len = '{{entry_data|length}}'
    </script>

    <div class="container-fluid">
        <form id="main_form" method="POST" action="/change_file_opts">
            <input type="hidden" name="cwd" id="cwd" value="{{OPT.cwd}}">
            {% if search_term is defined %}
                <input type="hidden" name="search_term" id="view_term" value="{{search_term}}">
            {% endif %}
            <div class="d-flex row mb-2">
                {% if OPT.folders %}
                    <div class="my-auto col col-auto">
                        <span class="alert alert-primary py-2">
                        {% if "files_ip" in request.url %}
                            <svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#import"/></svg>
                          {% set tmp_path=OPT.cwd | replace( "static/Import", "" ) + "/" %}
                        {% elif "files_sp" in request.url %}
                            <svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#db"/></svg>
                          {% set tmp_path=OPT.cwd | replace( "static/Storage", "" ) + "/" %}
                        {% elif "files_rbp" in request.url %}
                            <svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#trash"/></svg>
                          {% set tmp_path=OPT.cwd | replace( "static/Bin", "" ) + "/" %}
                        {% endif %}
                        {{tmp_path}}</span>
                    </div class="col my-auto">
                {% endif %}
                <div class="col col-auto">
                    <div class="input-group">
                    {{CreateSelect( "noo", OPT.noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)", "rounded-start py-2")|safe }}
                    {{CreateSelect( "how_many", OPT.how_many|string, ["10", "25", "50", "75", "100", "150", "200", "500"])|safe }}
                    {% if OPT.folders %}
                        <input type="hidden" name="grouping" id="grouping" value="{{OPT.grouping}}">
                        {{CreateFoldersSelect( OPT.folders, "rounded-end" )|safe }}
                    {% else %}
                        {{CreateFoldersSelect( OPT.folders )|safe }}
                        <span class="sm-txt my-auto btn btn-outline-info disabled border-top border-bottom">grouped by:</span>
                        {{CreateSelect( "grouping", OPT.grouping, ["None", "Day", "Week", "Month"], "", "rounded-end")|safe }}
                    {% endif %}
                    </div class="input-group">
                </div class="col">
                {% if search_term is defined %}
                    <div class="col col-auto my-auto">
                        <span class="alert alert-primary p-2">Searched for: '{{search_term}}'</span>
                    </div class="col my-auto">
                    <script>
                        $('#folders').prop('disabled', 'disabled').removeClass('border-info').addClass('border-secondary').removeClass('text-info').addClass('text-secondary');
                    </script>
                {% endif %}
                <div class="col flex-grow-1 my-auto d-flex justify-content-center w-100">
                    <button aria-label="prev" id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary">
                        <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#prev"/></svg>
                    </button>
                    <span class="sm-txt my-auto">&nbsp;{{OPT.how_many}} files&nbsp;</span>
                    {% set nxt_disabled="" %}
                    {% if not entry_data or entry_data|length < OPT.how_many|int %}
                        {% set nxt_disabled="disabled" %}
                    {% endif %}
                    <button aria-label="next" id="next" {{nxt_disabled}} name="next" class="next sm-txt btn btn-outline-secondary">
                        <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
                    </button>
                    <button aria-label="move" id="move" disabled name="move" class="sm-txt btn btn-outline-primary ms-4" onClick="MoveDBox(move_paths,'{{url_for('internal', filename='icons.svg')}}'); return false;">
                        <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#folder_plus"/></svg>
                    </button>
                    {% if "files_rbp" in request.url %}
                        <button aria-label="delete" id="del" disabled name="del" class="sm-txt btn btn-outline-success mx-1" onClick="DelDBox('Restore'); return false;">
                            <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#trash-fill"/></svg>
                    {% else %}
                        <button aria-label="delete" id="del" disabled name="del" class="sm-txt btn btn-outline-danger mx-1" onClick="DelDBox('Delete'); return false;">
                            <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#trash-fill"/></svg>
                    {% endif %}
                    </button>
                    <button style="visibility:hidden" class="btn btn-outline-secondary" aria-label="shift-key" id="shift-key" onclick="document.fake_shift=1-document.fake_shift; event.stopPropagation(); return false">shift</button>
                    <button style="visibility:hidden" class="btn btn-outline-secondary" aria-label="ctrl-key" id="ctrl-key" onclick="document.fake_ctrl=1-document.fake_ctrl; event.stopPropagation(); return false">ctrl</button>
                </div>
                <div class="d-flex col col-auto justify-content-end">
                    <div class="btn-group">
                    {% if OPT.size == 64 %}
                        {% set bt="btn-info text-white" %}
                    {% else %}
                        {% set bt="btn-outline-info" %}
                    {% endif %}
                        <button aria-label="extra small" id="64" class="px-2 sm-txt sz-but btn {{bt}}" onClick="$('#size').val(64)">XS</button>
                    {% if OPT.size == 96 %}
                        {% set bt="btn-info text-white" %}
                    {% else %}
                        {% set bt="btn-outline-info" %}
                    {% endif %}
                        <button aria-label="small" id="96" class="px-2 sm-txt sz-but btn {{bt}}" onClick="$('#size').val(96)">S</button>
                    {% if OPT.size == 128 %}
                        {% set bt="btn-info text-white" %}
                    {% else %}
                        {% set bt="btn-outline-info" %}
                    {% endif %}
                        <button aria-label="medium" id="128" class="px-2 sm-txt sz-but btn {{bt}}" onClick="$('#size').val(128)">M</button>
                    {% if OPT.size == 192 %}
                        {% set bt="btn-info text-white" %}
                    {% else %}
                        {% set bt="btn-outline-info" %}
                    {% endif %}
                        <button aria-label="large" id="192" class="px-2 sm-txt sz-but btn {{bt}}" onClick="$('#size').val(192)">L</button>
                    {% if OPT.size == 256 %}
                        {% set bt="btn-info text-white" %}
                    {% else %}
                        {% set bt="btn-outline-info" %}
                    {% endif %}
                        <button aria-label="extra large" id="256" class="px-2 sm-txt sz-but btn {{bt}}" onClick="$('#size').val(256)">XL</button>
                    </div class="btn-group">
                </div class="col">
                <input id="offset" type="hidden" name="offset" value="{{OPT.offset}}">
                <input id="size" type="hidden" name="size" value="{{OPT.size}}">
            </div class="form-row">
            {% set eids=namespace( str="" ) %}
            {# gather all the file eids and collect them in case we go gallery mode #}
            {% for obj in entry_data %}
                {% if obj.type.name != "Directory" %}
                    {% set eids.str = eids.str + obj.id|string +"," %}
                {% endif %}
            {% endfor %}
            <input name="eids" id="eids" type="hidden" value="{{eids.str}}">
        </form>
    </div>
    {% set ecnt=namespace( val=0 ) %}
    <div class="row ms-2">
        {% set last = namespace(printed=0) %}
        {# rare event of empty folder, still need to show back button #}
        {% if OPT.folders and entry_data|length == 0 %}
            {% if OPT.cwd != OPT.root %}
                <figure id="_back" class="dir entry m-1" ecnt="{{ecnt.val}}" dir="{{OPT.cwd|ParentPath}}" type="Directory">
                    <svg class="svg" width="{{OPT.size|int-22}}" height="{{OPT.size|int-22}}"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#folder_back"/></svg>
                    <figcaption class="figure-caption text-center">Back</figcaption>
                </figure class="figure">
                {% set ecnt.val=ecnt.val+1 %}
                <script>f=$('#_back'); w=f.find('svg').width(); f.find('figcaption').width(w);</script>
            {% else %}
                <div class="col col-auto g-0 m-1">
                    <svg class="svg" width="{{OPT.size|int-22}}" height="{{OPT.size|int-22}}"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#folder_back_gray"/></svg>
                </div>
            {% endif %}
        {% endif %}
        {% if not entry_data %}
            <span class="alert alert-danger p-2 col-auto"> No matches for: '{{search_term}}'</span>
        {% endif %}
        {% for obj in entry_data %}
            {% if loop.index==1 and OPT.folders %}
                {% if OPT.cwd != OPT.root %}
                    <figure class="col col-auto g-0 dir entry m-1" ecnt="{{ecnt.val}}" dir="{{OPT.cwd|ParentPath}}" type="Directory">
                        <svg class="svg" width="{{OPT.size|int-22}}" height="{{OPT.size|int-22}}" fill="currentColor">
                            <use xlink:href="{{url_for('internal', filename='icons.svg')}}#folder_back"/></svg>
                        <figcaption class="svg_cap figure-caption text-center">Back</figcaption>
                    </figure class="figure">
                    {% set ecnt.val=ecnt.val+1 %}
                {% else %}
                    {# create an even lighter-grey, unclickable back button - so folders dont jump around when you go into them #}
                    <div class="col col-auto g-0 m-1">
                        <svg class="svg" width="{{OPT.size|int-22}}" height="{{OPT.size|int-22}}"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#folder_back_gray"/></svg>
                    </div>
                {% endif %}
            {% endif %}
            {% if not OPT.folders and obj.type.name == "Directory" %}
                {% continue %}
            {% endif %}
            {% if OPT.grouping == "Day" %}
                {% if last.printed != obj.file_details.day %}
                    <div class="row ps-3"><h6>Day: {{obj.file_details.day}} of {{obj.file_details.month}}/{{obj.file_details.year}}</h6></div>
                    {% set last.printed = obj.file_details.day %}
                {% endif %}
            {% elif OPT.grouping == "Week" %}
                {% if last.printed != obj.file_details.woy %}
                    <div class="row ps-3"><h6>Week #: {{obj.file_details.woy}} of {{obj.file_details.year}}</h6></div>
                    {% set last.printed = obj.file_details.woy %}
                {% endif %}
            {% elif OPT.grouping == "Month" %}
                {% if last.printed != obj.file_details.month %}
                    <div class="row ps-3"><h6>Month: {{obj.file_details.month}} of {{obj.file_details.year}}</h6></div>
                    {% set last.printed = obj.file_details.month %}
                {% endif %}
            {% endif %}
            {% if obj.type.name == "Image" or obj.type.name == "Video" or obj.type.name == "Unknown" %}
                {% if (not OPT.folders) or ((obj.in_dir.in_path.path_prefix+'/'+obj.in_dir.rel_path+'/'+obj.name) | TopLevelFolderOf(OPT.cwd)) %}
                    <figure id="{{obj.id}}" ecnt="{{ecnt.val}}" class="col col-auto g-0 figure entry m-1" path_type="{{obj.in_dir.in_path.type.name}}" size="{{obj.file_details.size_mb}}" hash="{{obj.file_details.hash}}" in_dir="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}" fname="{{obj.name}}" yr="{{obj.file_details.year}}" date="{{obj.file_details.year}}{{"%02d" % obj.file_details.month}}{{"%02d" % obj.file_details.day}}" pretty_date="{{obj.file_details.day}}/{{obj.file_details.month}}/{{obj.file_details.year}}" type="{{obj.type.name}}">
                        {% if obj.type.name=="Image" or obj.type.name=="Unknown" %}
                            <div style="position:relative; width:100%">
                                {% if obj.file_details.thumbnail %}
                                    <a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}">
                                        <img alt="{{obj.name}}" class="thumb" height="{{OPT.size}}" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img></a>
                                {% else %}
                                    <a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}">
                                        <svg width="{{OPT.size}}" height="{{OPT.size}}" fill="white"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#unknown_ftype"/></svg>
                                    </a>
                                {% endif %}
                                {% if search_term is defined %}
                                    <div style="position:absolute; bottom: 0px; left: 2px;">
                                        <svg width="16" height="16" fill="white"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#{{LocationIcon(obj)}}"/></svg>
                                    </div>
                                {% endif %}
                                <div id="s{{obj.id}}" style="display:none; position:absolute; top: 50%; left:50%; transform:translate(-50%, -50%);">
                                    <img height="64px" src="{{url_for('internal', filename='throbber.gif')}}"></img>
                                </div>
                            </div>
                        {% elif obj.type.name == "Video" %}
                            <div style="position:relative; width:100%">
                                {% if obj.file_details.thumbnail %}
                                    <a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}">
                                        <img alt="{{obj.name}}" class="thumb" height="{{OPT.size}}" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img></a>
                                {% else %}
                                    <a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}">
                                        <svg width="{{OPT.size}}" height="{{OPT.size}}" fill="white"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#unknown_ftype"/></svg>
                                    </a>
                                {% endif %}

                                <div style="position:absolute; top: 0px; left: 2px;">
                                    <svg width="16" height="16" fill="white"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#film"/></svg>
                                </div>
                                {% if search_term is defined %}
                                    <div style="position:absolute; bottom: 0px; left: 2px;">
                                        <svg width="16" height="16" fill="white"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#{{LocationIcon(obj)}}"/></svg>
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                    </figure>
                    {% set ecnt.val=ecnt.val+1 %}
                {% endif %}
            {% elif obj.type.name == "Directory" %}
                {% if OPT.folders %}
                    {% if obj.dir_details.rel_path | length %}
                        {% set dirname=obj.dir_details.in_path.path_prefix+'/'+obj.dir_details.rel_path %}
                    {% else %}
                        {% set dirname=obj.dir_details.in_path.path_prefix %}
                    {% endif %}
                    {# if this dir is the toplevel of the cwd, show the folder icon #}
                    {% if dirname| TopLevelFolderOf(OPT.cwd) %}
                        <figure class="col col-auto g-0 dir entry m-1" id={{obj.id}} ecnt={{ecnt.val}} dir="{{dirname}}" type="Directory">
                            <svg class="svg" width="{{OPT.size|int-22}}" height="{{OPT.size|int-22}}" fill="currentColor">
                                <use xlink:href="{{url_for('internal', filename='icons.svg')}}#Directory"/></svg>
                            <figcaption class="svg_cap figure-caption text-center text-wrap text-break">{{obj.name}}</figcaption>
                        </figure class="figure">
                        {% set ecnt.val=ecnt.val+1 %}
                        <script>f=$('#{{obj.id}}'); w=f.find('svg').width(); f.find('figcaption').width(w);</script>
                    {% endif %}
                {% endif %}
            {% endif %}
        {% endfor %}

        </div>
        <div class="container-fluid">
            <form id="nav_form" method="POST" action="/change_file_opts">
                <input type="hidden" name="cwd" id="cwd" value="{{OPT.cwd}}">
                <div class="row">
                    <div class="col my-auto d-flex justify-content-center">
                        <button aria-label="prev" id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary">
                            <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#prev"/></svg>
                        </button>
                        <span class="sm-txt my-auto">&nbsp;{{OPT.how_many}} files&nbsp;</span>
                        <button aria-label="next" id="next" {{nxt_disabled}} name="next" class="next sm-txt btn btn-outline-secondary">
                            <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
                        </button>
                    </div>
                </div>
            </form>
        </div class="container">
{% endblock main_content %}
{% block script_content %}

<script>

$('.figure').click( function(e) { DoSel(e, this ); SetButtonState(); return false; });
$(document).on('click', function(e) { $('.highlight').removeClass('highlight') ; SetButtonState() });

function CallViewRouteWrapper()
{
    CallViewRoute( $(this).attr("id") )
}

function CallViewRoute(id)
{
    s='<form id="_fm" method="POST" action="/view/' + id + '">'
    s+='<input type="hidden" name="eids" value="'+$("#eids").val() + '">'
    s+='<input type="hidden" name="cwd" value="{{OPT.cwd}}">'
    s+='<input type="hidden" name="root" value="{{OPT.root}}">'
    s+='<input type="hidden" name="offset" value="{{OPT.offset}}">'
    s+='<input type="hidden" name="how_many" value="{{OPT.how_many}}">'
    s+='<input type="hidden" name="orig_url" value="{{request.path}}">'
    s+='<input type="hidden" name="view_eid" value="'+id+'">'
    {% if search_term is defined %}
        s+='<input type="hidden" name="search_term" value="{{search_term}}">'
    {% endif %}
    s+='</form>'
    $(s).appendTo('body').submit();
}

$('.figure').dblclick( CallViewRouteWrapper )

// different context menu on files 
$.contextMenu({
    selector: '.entry',
    itemClickEvent: "click",
    build: function($triggerElement, e) {
        // when right-clicking & no selection add one OR deal with ctrl/shift right-lick as it always changes seln
        if( NoSel() || e.ctrlKey || e.shiftKey )
        {
            DoSel(e, e.currentTarget )
            SetButtonState();
        }

        if( FiguresOrDirsOrBoth() == "figure" )
        {
            item_list = {
                details: { name: "Details..." },
                view: { name: "View File" },
                sep: "---",
            }
            if( e.currentTarget.getAttribute('type') == 'Image' )
            {
                item_list['transform'] = { 
                    name: "Transform",
                    items: {
                        "r90": { "name" : "Rotate 90 degrees" },
                        "r180": { "name" : "Rotate 180 degrees" },
                        "r270": { "name" : "Rotate 270 degrees" },
                        "fliph": { "name" : "Flip horizontally" },
                        "flipv": { "name" : "Flip vertically" }
                    }
                }

            }
            item_list['move'] = { name: "Move selected file(s) to new folder" }
            item_list['sep2'] = { sep: "---" }
        }
        else
            item_list = {
                move: { name: "Move selection(s) to new folder" }
            }
        
        item_list['ai'] = {
                name: "Scan file for faces",
                items: {
                    "ai-all": {"name": "all"},
                    {% for p in people %}
                        "ai-{{p.tag}}": {"name": "{{p.tag}}"},
                    {% endfor %}
                }
            }
        
        if( SelContainsBinAndNotBin() ) {
            item_list['both']= { name: 'Cannot delete and restore at same time', disabled: true }
        } else {
            if (e.currentTarget.getAttribute('path_type') == 'Bin' )
                item_list['undel']= { name: "Restore selected file(s)" }
            else if( e.currentTarget.getAttribute('type') != 'Directory' )
                item_list['del']= { name: "Delete Selected file(s)" }
        }

        return {
            callback: function( key, options) {
                if( key == "details" ) { DetailsDBox() }
                if( key == "view" ) { CallViewRoute( $(this).attr('id') ) }
                if( key == "move" ) { MoveDBox(move_paths, "{{url_for('internal', filename='icons.svg')}}") }
                if( key == "del"  ) { DelDBox('Delete') }
                if( key == "undel") { DelDBox('Restore') }
                if( key == "r90"  ) { Transform(90) }
                if( key == "r180" ) { Transform(180) }
                if( key == "r270" ) { Transform(270) }
                if( key == "fliph" ) { Transform("fliph") }
                if( key == "flipv" ) { Transform("flipv") }
                if( key.startsWith("ai")) { RunAIOnSeln(key) }
                // dont flow this event through the dom
                e.stopPropagation()
            },
            items: item_list
        };
    }
});


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

$( document ).keydown(function(event) {
    switch (event.key)
    {
        case "Delete":
            {% if "files_rbp" in request.url %}
                if( ! NoSel() ) DelDBox('Restore');
            {% else %}
                if( ! NoSel() ) DelDBox('Delete');
            {% endif %}
            break;
    } })

function isMobile() {
    try{ document.createEvent("TouchEvent"); return true; }
    catch(e){ return false; }
}

if( isMobile() )
{
    $('#shift-key').css('visibility', 'visible');
    $('#ctrl-key').css('visibility', 'visible');
}

</script>
{% endblock script_content %}