{% 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>
        // FIXME: used by viewer code - should probably get rid of this?
        var fullscreen=false;
        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 %}

        // GLOBALS
        // this is which eid we are viewing an image/video (when we dbl-click & then next/prev)
        document.viewing_eid=null;
        document.viewing=null;

        var OPT={}
        OPT.noo='{{OPT.noo}}'
        OPT.how_many={{OPT.how_many}}
        OPT.folders="{{OPT.folders}}" === "True"
        OPT.grouping='{{OPT.grouping}}'
        OPT.cwd='{{OPT.cwd}}'
        OPT.root_eid={{query_data.root_eid}}
        OPT.search_term='{{OPT.orig_search_term}}'
        OPT.size={{OPT.size}}
        OPT.prefix='{{OPT.prefix}}'
        OPT.default_flat_noo='{{OPT.default_flat_noo}}'
        OPT.default_folder_noo='{{OPT.default_folder_noo}}'
        OPT.default_search_noo='{{OPT.default_search_noo}}'

        // this is the list of entry ids for the images for ALL matches for this query 
        var entryList={{query_data.entry_list}}

        // pageList is just those entries shown on this page from the full entryList
        var pageList=[]
        // force pageList to set pageList for & render the first page
        getPage(1)

        function cFO() {
            OPT.how_many=$('#how_many').val()
            new_f=$('#folders').val()
            new_f=( new_f == 'True' )
            // if change to/from folders, also fix the noo menu
            if( new_f != OPT.folders )
            {
                if( new_f )
                {
                    $('#noo option:lt(2)').prop('disabled', true);
                    $('#noo').val(OPT.default_folder_noo)
                } 
                else 
                {
                    $('#noo option:lt(2)').prop('disabled', false);
                    $('#noo').val(OPT.default_flat_noo)
                }
            }
            OPT.noo=$('#noo').val()
            OPT.folders=new_f
            OPT.folders=$('#folders').val()
            OPT.grouping=$('#grouping').val()
            OPT.size=$('#size').val()
            $.ajax({
                type: 'POST',
                url: '/change_file_opts',
                data: JSON.stringify(OPT),
                contentType: 'application/json',
                success: function(resp) { 
                    entryList=resp.query_data.entry_list
                    // put data back into booleans, ints, etc
                    OPT.folders=( OPT.folders == 'True' )
                    OPT.how_many=parseInt(OPT.how_many)
                    $('.how_many_text').html( `&nbsp;${OPT.how_many} files&nbsp;` )
                    OPT.root_eid=parseInt(OPT.root_eid)
                    OPT.size=parseInt(OPT.size)
                    getPage(1)
                }
            })
        }

    </script>

    <div id="files_div">
        <div class="container-fluid">
            <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"], "cFO(); return false", "rounded-start py-2")|safe }}
                    {{CreateSelect( "how_many", OPT.how_many|string, ["10", "25", "50", "75", "100", "150", "200", "500"], "cFO(); return false" )|safe }}
                    {% if OPT.folders %}
                        <input type="hidden" name="grouping" id="grouping" value="{{OPT.grouping}}">
                        {{CreateFoldersSelect( OPT.folders, "cFO(); return false", "rounded-end" )|safe }}
                    {% else %}
                        {{CreateFoldersSelect( OPT.folders, "cFO(); return false" )|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"], "OPT.grouping=$('#grouping').val();drawPageOfFigures();return false", "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 disabled" onClick="prevPage()" disabled>
                        <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#prev"/></svg>
                    </button>
                    <span class="how_many_text sm-txt my-auto">&nbsp;{{OPT.how_many}} files&nbsp;</span>
                    <button aria-label="next" id="next" name="next" class="next sm-txt btn btn-outline-secondary" onClick="nextPage()">
                        <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 class="col flex-grow-1">
                <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="d-flex col">
                <input id="offset" type="hidden" name="offset" value="{{OPT.offset}}">
                <input id="size" type="hidden" name="size" value="{{OPT.size}}">
            </div class="d-flex row mb-2">
            {% set eids=namespace( str="" ) %}
            {# gather all the file eids and collect them in case we go gallery mode #}
            {% for obj in query_data.entry_list %}
                {% set eids.str = eids.str + obj|string +"," %}
            {% endfor %}
            <input name="eids" id="eids" type="hidden" value="{{eids.str}}">
        </div container="fluid">
        <div id="figures" class="row ms-2">
        </div>
        <div class="container-fluid">
            <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 disabled" onClick="prevPage()" disabled>
                        <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#prev"/></svg>
                    </button>
                    <span class="how_many_text sm-txt my-auto">&nbsp;{{OPT.how_many}} files&nbsp;</span>
                    <button aria-label="next" id="next" name="next" class="next sm-txt btn btn-outline-secondary" onClick="nextPage()">
                        <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
                    </button>
                </div class="col my-auto">
            </div class="row">
        </div class="container-fluid">
    </div id="files_div">
    <div id="viewer_div" class="d-none">

<style>
.norm-txt { font-size: 1.0rem }
.form-check-input:checked {
    background-color: #39C0ED;
    border-color: #CFF4FC;
}
.form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2339C0ED'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23CFF4FC'/%3e%3c/svg%3e");
}
#tst90:hover,#tst90:focus { filter: invert(73%) sepia(27%) saturate(3970%) hue-rotate(146deg) brightness(94%) contrast(100%); }
</style>

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

<script>
    var gap=0.8
    var grayscale=0
    var throbber=0

    var objs=[]
    var NMO=[]
	var imp_path="static/Import/{{imp_path}}"
	var st_path="static/Storage/{{st_path}}"
	var bin_path="static/Bin/{{bin_path}}"

    function PrettyFname(fname)
    {
        s='<span class="alert alert-secondary py-2">'
        if( fname.indexOf( "static/Import" ) == 0 ) 
        {
            s+='<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#import"/></svg>'
            tmp_path=fname.replace(imp_path,"" )
        }
        if( fname.indexOf( "static/Storage" ) == 0 ) 
        {
            s+='<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#db"/></svg>'
            tmp_path=fname.replace("static/Storage","" )
        }
        if( fname.indexOf( "static/Bin" ) == 0 ) 
        {
            s+='<svg width="20" height="20" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#trash-fill"/></svg>'
            tmp_path=fname.replace("static/Bin","" )
        }
        s+=tmp_path+'</span>'
        return s
    }

    function getPreviousEntry() {
        var currentIndex = entryList.indexOf(document.viewing.id);

        oldPageOffset=Math.floor(currentIndex / OPT.how_many) 
        if (currentIndex > 0) {
            currentIndex--;
            pageOffset=Math.floor(currentIndex / OPT.how_many)
            currentIndex=currentIndex-(pageOffset*OPT.how_many)
            // pref page, load it
            if( oldPageOffset != pageOffset )
                // pref page is pageOffset+1 now
                getPage(pageOffset+1,currentIndex)
            else
                document.viewing=document.entries[currentIndex]
        }
    }

    function getNextEntry() {
        var currentIndex = entryList.indexOf(document.viewing.id);

        oldPageOffset=Math.floor(currentIndex / OPT.how_many) 
        if (currentIndex < entryList.length - 1) {
            currentIndex++
            pageOffset=Math.floor(currentIndex / OPT.how_many) 
            currentIndex=currentIndex-(pageOffset*OPT.how_many)
            // next page, load it
            if( oldPageOffset != pageOffset )
                // next page is pageOffset+1 now
                getPage(pageOffset+1,currentIndex)
            else
                document.viewing=document.entries[currentIndex]
        }
    }

    function entryIsAtStart() {
        return document.viewing.id === entryList[0];
    }

    function entryIsAtEnd() {
        return document.viewing.id === entryList[entryList.length - 1];
    }

    function setEntryById(id) {
        var currentIndex = entryList.indexOf(parseInt(id));
        // if we are on a different page, adjust as document.entries only has <= how_many
        pageOffset=Math.floor(currentIndex / OPT.how_many) 
        currentIndex = currentIndex-(pageOffset*OPT.how_many)
        document.viewing=document.entries[currentIndex]
    }

    function setDisabledForViewingNextPrevBttons()
    {
        $('#la').attr('disabled', entryIsAtStart());
        $('#ra').attr('disabled', entryIsAtEnd());
    }
</script>

    <div id="viewer" class="container-fluid">
        <div class="row">
            <button title="Show previous image" class="col-auto btn btn-outline-info px-2" 
                style="padding: 10%" id="la" 
                onClick="
                    getPreviousEntry()
                    setDisabledForViewingNextPrevBttons()
                    ViewImageOrVideo()
                    ">
                <svg width="16" height="16" fill="currentColor">
                    <use xlink:href="{{url_for('internal', filename='icons.svg')}}#prev"/></svg>
            </button>
            <figure class="col col-auto border border-info rounded m-0 p-1" id="figure">
                <canvas id="canvas"></canvas>
                <img id="throbber" src="{{url_for('internal', filename='throbber.gif')}}" style="display:none;">
                <script>
                    var im=new Image();
                    im.onload=DrawImg
                    var context = canvas.getContext('2d')
                </script>
                <figcaption id="img-cap" class="figure-caption text-center text-wrap text-break">
                    <span id="fname_i"></span></figcaption>
            </figure>
            <div id="video_div" class="col col-auto">
                <video id="video" class="col col-auto" controls>
                    <source id="videoSource" src="" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
                <figcaption id="vid-cap" class="figure-caption text-center text-wrap text-break">
                    <span id="fname_v"></span></figcaption>
            </div>
            <script>
                window.addEventListener('resize', DrawImg, false);
                window.addEventListener('resize', ResizeVideo, false);
            </script>

            <button title="Show next image" class="col-auto btn btn-outline-info px-2" style="padding: 10%" id="ra" 
                onClick="
                    getNextEntry()
                    setDisabledForViewingNextPrevBttons()
                    ViewImageOrVideo()
                ">
                <svg width="16" height="16" fill="currentColor">
                    <use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
            </button>
        </div class="row">
        {# use this for color of toggles: https://www.codeply.com/p/4sL9uhevwJ #}
        <div class="row">
            {# this whole div, just takes up the same space as the left button and is hidden for alignment only #}
            <div class="col-auto px-0">
                <button class="btn btn-outline-info px-2 invisible" disabled>
                    <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
                </button>
            </div>
            <span class="col-auto my-auto">Show:</span>
            <div title="Toggle showing filename (hotkey: n)" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
              <input class="form-check-input" type="checkbox" id="fname_toggle" onChange="$('.figure-caption').toggle()" checked>
              <label class="form-check-label ps-1" for="fname_toggle">Filename</label>
            </div>
            <div title="Toggle showing matched faces (hotkey: f)" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
              <input class="form-check-input" type="checkbox" onChange="FaceToggle()" id="faces">
              <label class="form-check-label ps-1" for="faces">Faces</label>
            </div>
            <div title="Toggle showing 'distance' on matched faces (hotkey: d)" class="d-flex form-check form-switch border border-info rounded col col-auto my-auto py-1 justify-content-center ps-5">
              <input class="form-check-input" type="checkbox" onChange="DrawImg()" id="distance">
              <label class="form-check-label ps-1" for="distance">Distance</label>
            </div>
            <div title="Change the model used to detect faces" class="col col-auto my-auto">
                AI Model:
                {# can use 0 as default, it will be (re)set correctly in DrawImg() anyway #}
                {{CreateSelect( "model", 0, ["N/A", "normal", "slow/accurate"], "", "rounded norm-txt", [0,1,2])|safe }}
            </div>
            <div class="col col-auto pt-1">
                <button class="btn btn-outline-info p-1" title="Rotate by 90 degrees" onClick="Transform(90)">
                    <img src="{{url_for('internal', filename='rot90.png')}}" width="32" height="32" onMouseOver="this.src='{{url_for('internal', filename='rot90-invert.png')}}'" 
                onMouseOut="this.src='{{url_for('internal', filename='rot90.png')}}'" />
                </button>
                <button class="btn btn-outline-info p-1" title="Rotate by 180 degrees" onClick="Transform(180)">
                    <img src="{{url_for('internal', filename='rot180.png')}}" width="32" height="32" onMouseOver="this.src='{{url_for('internal', filename='rot180-invert.png')}}'"
                onMouseOut="this.src='{{url_for('internal', filename='rot180.png')}}'" />
                </button>
                <button class="btn btn-outline-info p-1" title="Rotate by 270 degrees" onClick="Transform(270)">
                    <img src="{{url_for('internal', filename='rot270.png')}}" width="32" height="32" onMouseOver="this.src='{{url_for('internal', filename='rot270-invert.png')}}'"
                onMouseOut="this.src='{{url_for('internal', filename='rot270.png')}}'" />
                </button>
                <button class="btn btn-outline-info p-1" title="Flip horizontally" onClick="Transform('fliph')">
                    <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#flip_h"/></svg>
                </button>
                <button class="btn btn-outline-info p-1" title="Flip vertically" onClick="Transform('flipv')">
                    <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#flip_v"/></svg>
                </button>
                <button class="btn btn-outline-info p-1" title="View in Fullscreen mode (hotkey: F)" onClick="fullscreen=true; ViewImageOrVideo()">
                    <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#fullscreen"/></svg>
                </button>
                <button class="btn btn-outline-info p-1" title="Show logs relating to this filename (hotkey: l)" onClick="JoblogSearch()">
                    <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#log"/></svg>
                </button>
                <button class="btn btn-outline-info p-1" title="View Original" onClick="window.location='/'+objs[current].url">
                    <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#download"/></svg>
                </button>
                <button id="del" class="btn btn-outline-danger p-1" title="Delete (hotkey: Del)" 
                    onClick="$.ajax({ type: 'POST', data: '&eid-0={{current}}', url: '/delete_files', success: function(data){ window.location='/'; return false; } })">
                    <svg width="32" height="32" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#trash"/></svg>
                </button>
            </div>
        </div class="row">
    </div id="viewer">
</div id="viewer_div">

<script>
$( document ).keydown(function(event) {
    // if dbox is visible, dont process this hot-key, we are inputting text
    // into inputs instead
    if( $("#dbox").is(':visible') )
        return
    switch (event.key) 
    {
        case "Left": // IE/Edge specific value
        case "ArrowLeft":
            if( $('#la').prop('disabled') == false )
                $('#la').click()
            break;
        case "Right": // IE/Edge specific value
        case "ArrowRight":
            if( $('#ra').prop('disabled') == false )
                $('#ra').click()
            break;
        case "d":
            $('#distance').click()
            break;
        case "f":
            $('#faces').click()
            break;
        case "n":
            $('#fname_toggle').click()
            break;
        case "F":
            fullscreen=!document.fullscreen
            ViewImageOrVideo()
            break;
        case "l":
            JoblogSearch()
            break;
        case "Delete":
            $('#del').click()
        default:
            return; // Quit when this doesn't handle the key event.
    }
});

var fullscreen=false;
</script>

{% endblock main_content %}
{% block script_content %}

<script>

$(document).on('click', function(e) { $('.highlight').removeClass('highlight') ; SetButtonState() });

function dblClickToViewEntry(id) {
    $('#files_div').addClass('d-none')
    $('#viewer_div').removeClass('d-none')
    setEntryById( id )
    ViewImageOrVideo()
}

function CallViewRouteWrapper()
{
//    CallViewRoute( document.viewing.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();
}

// 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" ) { dblClickToViewEntry( $(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 ).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;
    } })

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

</script>
{% endblock script_content %}