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

<svg style="display:none">
    <svg id="folder_yellow" viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
        <path style="fill:#EFCE4A;" d="M46.324,52.5H1.565c-1.03,0-1.779-0.978-1.51-1.973l10.166-27.871 c0.184-0.682,0.803-1.156,1.51-1.156H56.49c1.03,0,1.51,0.984,1.51,1.973L47.834,51.344C47.65,52.026,47.031,52.5,46.324,52.5z"/>
        <path style="fill:#EBBA16;" d="M50.268,12.5H25l-5-7H1.732C0.776,5.5,0,6.275,0,7.232V49.96c0.069,0.002,0.138,0.006,0.205,0.01 l10.015-27.314c0.184-0.683,0.803-1.156,1.51-1.156H52v-7.268C52,13.275,51.224,12.5,50.268,12.5z"/>
    </svg>

    <svg id="folder_back" viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
        <path style="fill:#EFCE4A;" d="M46.324,52.5H1.565c-1.03,0-1.779-0.978-1.51-1.973l10.166-27.871 c0.184-0.682,0.803-1.156,1.51-1.156H56.49c1.03,0,1.51,0.984,1.51,1.973L47.834,51.344C47.65,52.026,47.031,52.5,46.324,52.5z"/>
        <path style="fill:#EBBA16;" d="M50.268,12.5H25l-5-7H1.732C0.776,5.5,0,6.275,0,7.232V49.96c0.069,0.002,0.138,0.006,0.205,0.01 l10.015-27.314c0.184-0.683,0.803-1.156,1.51-1.156H52v-7.268C52,13.275,51.224,12.5,50.268,12.5z"/>
        <g transform="matrix(-0.04 -0.28 0.28 -0.04 29 37)" id="7fb87763-71f2-4e66-92f9-3425f8e2ac7b"  >
            <path style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(101,101,101); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-50.5, -49.63)" d="M 47.241 73.538 L 87.35 50.376999999999995 L 54.598 17.623 L 54.598 33.28 C 18.114 31.59 10.956 52.564 14.436 81.641 C 20.303 61.312000000000005 31.583 50.328 50.721 53.012 L 47.241 73.538 z" stroke-linecap="round" />
        </g>
    </svg>

    <svg id="folder_back_gray" viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
        <path style="fill:#EFEFEF;" d="M46.324,52.5H1.565c-1.03,0-1.779-0.978-1.51-1.973l10.166-27.871 c0.184-0.682,0.803-1.156,1.51-1.156H56.49c1.03,0,1.51,0.984,1.51,1.973L47.834,51.344C47.65,52.026,47.031,52.5,46.324,52.5z"/>
        <path style="fill:#C0C0C0;" d="M50.268,12.5H25l-5-7H1.732C0.776,5.5,0,6.275,0,7.232V49.96c0.069,0.002,0.138,0.006,0.205,0.01 l10.015-27.314c0.184-0.683,0.803-1.156,1.51-1.156H52v-7.268C52,13.275,51.224,12.5,50.268,12.5z"/>
        <g transform="matrix(-0.04 -0.28 0.28 -0.04 29 37)" id="7fb87763-71f2-4e66-92f9-3425f8e2ac7b"  >
            <path style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(101,101,101); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-50.5, -49.63)" d="M 47.241 73.538 L 87.35 50.376999999999995 L 54.598 17.623 L 54.598 33.28 C 18.114 31.59 10.956 52.564 14.436 81.641 C 20.303 61.312000000000005 31.583 50.328 50.721 53.012 L 47.241 73.538 z" stroke-linecap="round" />
        </g>
    </svg>

    <svg id="caret_prev" viewBox="0 0 16 16">
        <path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/>
    </svg>
    <svg id="caret_next" viewBox="0 0 16 16">
        <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
    </svg>
    <svg id="folder_plus" viewBox="0 0 16 16">
        <path d="m.5 3 .04.87a1.99 1.99 0 0 0-.342 1.311l.637 7A2 2 0 0 0 2.826 14H9v-1H2.826a1 1 0 0 1-.995-.91l-.637-7A1 1 0 0 1 2.19 4h11.62a1 1 0 0 1 .996 1.09L14.54 8h1.005l.256-2.819A2 2 0 0 0 13.81 3H9.828a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 6.172 1H2.5a2 2 0 0 0-2 2zm5.672-1a1 1 0 0 1 .707.293L7.586 3H2.19c-.24 0-.47.042-.683.12L1.5 2.98a1 1 0 0 1 1-.98h3.672z"/>
        <path d="M13.5 10a.5.5 0 0 1 .5.5V12h1.5a.5.5 0 1 1 0 1H14v1.5a.5.5 0 1 1-1 0V13h-1.5a.5.5 0 0 1 0-1H13v-1.5a.5.5 0 0 1 .5-.5z"/>
    </svg>
    <svg id="trash" viewBox="0 0 16 16">
        <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
    </svg>
    <svg id="import" viewBox="0 0 16 16">
        <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM6.354 9.854a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 8.707V12.5a.5.5 0 0 1-1 0V8.707L6.354 9.854z"/>
    </svg>
    <svg id="db" viewBox="0 0 29.26 29.26" style="enable-background:new 0 0 29.26 29.26;">
        <path d="M14.627,15.954c-5.494,0-10.098-1.614-11.355-3.79c-0.221,0.383-0.35,0.781-0.35,1.194v3.561
            c0,2.751,5.242,4.983,11.705,4.983c6.467,0,11.711-2.232,11.711-4.983v-3.561c0-0.413-0.131-0.811-0.354-1.194
            C24.727,14.339,20.127,15.954,14.627,15.954z"/>
        <path d="M14.627,23.31c-5.494,0-10.098-1.616-11.355-3.788c-0.221,0.381-0.35,0.779-0.35,1.191v3.564
            c0,2.752,5.242,4.983,11.705,4.983c6.467,0,11.711-2.23,11.711-4.983v-3.564c0-0.412-0.131-0.81-0.354-1.19
            C24.727,21.694,20.127,23.31,14.627,23.31z"/>
        <path d="M26.018,5.042c-0.23,2.016-5.232,3.629-11.391,3.629c-6.156,0-11.158-1.613-11.387-3.628
            C3.039,5.409,2.922,5.791,2.922,6.184v3.561c0,2.752,5.242,4.983,11.705,4.983c6.467,0,11.711-2.23,11.711-4.983V6.184
            C26.338,5.791,26.219,5.409,26.018,5.042z"/>
        <path d="M14.627,7.541c6.303,0,11.41-1.687,11.41-3.771c0-2.082-5.107-3.77-11.41-3.77
            C8.328,0.001,3.219,1.689,3.219,3.771C3.219,5.854,8.328,7.541,14.627,7.541z"/>
    </svg>
    <svg id="film" viewBox="0 0 16 16">
        <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
    </svg>
</svg>

    <div class="container-fluid">
        <form id="main_form" method="POST">
            <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="d-flex row mb-2">
                {% if 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="#import" /></svg>
                          {% set tmp_path=cwd | replace( "static/Import", "" ) + "/" %}
                        {% elif "files_sp" in request.url %}
                            <svg width="20" height="20" fill="currentColor"><use xlink:href="#db" /></svg>
                          {% set tmp_path=cwd | replace( "static/Storage", "" ) + "/" %}
                        {% elif "files_rbp" in request.url %}
                            <svg width="20" height="20" fill="currentColor"><use xlink:href="#trash" /></svg>
                          {% set tmp_path=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", noo, ["Oldest", "Newest","A to Z", "Z to A"], "$('#offset').val(0)", "rounded-start py-2")|safe }}
                    {{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"])|safe }}
                    {% if folders %}
                        <input type="hidden" name="grouping" id="grouping" value="{{grouping}}">
                        {{CreateFoldersSelect( folders, "rounded-end" )|safe }}
                    {% else %}
                        {{CreateFoldersSelect( folders )|safe }}
                        <span class="sm-txt my-auto btn btn-outline-info disabled border-top border-bottom">grouped by:</span>
                        {{CreateSelect( "grouping", 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">
                {% endif %}
                <div class="col flex-grow-1 my-auto d-flex justify-content-center w-100">
                    <button id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary">
                        <svg width="16" height="16" fill="currentColor"><use xlink:href="#caret_prev" /></svg>
                    </button>
                    <span class="sm-txt my-auto">&nbsp;{{how_many}} files&nbsp;</span>
                    {% set nxt_disabled="" %}
                    {% if entry_data|length < how_many|int %}
                        {% set nxt_disabled="disabled" %}
                    {% endif %}
                    <button id="next" {{nxt_disabled}} name="next" class="next sm-txt btn btn-outline-secondary">
                        <svg width="16" height="16" fill="currentColor"><use xlink:href="#caret_next" /></svg>
                    </button>
                    <button id="move" disabled name="move" class="sm-txt btn btn-outline-primary ms-4" onClick="MoveDBox(); return false;">
                        <svg width="16" height="16" fill="currentColor"><use xlink:href="#folder_plus" /></svg>
                    </button>
                    {% if "files_rbp" in request.url %}
                        <button 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="#trash" /></svg>
                    {% else %}
                        <button 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="#trash" /></svg>
                    {% endif %}
                    </button>
                </div>
                <div class="d-flex col col-auto justify-content-end">
                    <div class="btn-group">
                    {% if size == "64" %}
                        {% set bt="btn-info text-white" %}
                    {% else %}
                        {% set bt="btn-outline-info" %}
                    {% endif %}
                        <button id="64" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,64); return false;">XS</button>
                    {% if size == "96" %}
                        {% set bt="btn-info text-white" %}
                    {% else %}
                        {% set bt="btn-outline-info" %}
                    {% endif %}
                        <button id="96" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,96); return false;">S</button>
                    {% if size == "128" %}
                        {% set bt="btn-info text-white" %}
                    {% else %}
                        {% set bt="btn-outline-info" %}
                    {% endif %}
                        <button id="128" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,128); return false;">M</button>
                    {% if size == "192" %}
                        {% set bt="btn-info text-white" %}
                    {% else %}
                        {% set bt="btn-outline-info" %}
                    {% endif %}
                        <button id="192" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,192); return false;">L</button>
                    {% if size == "256" %}
                        {% set bt="btn-info text-white" %}
                    {% else %}
                        {% set bt="btn-outline-info" %}
                    {% endif %}
                        <button id="256" class="px-2 sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,256); return false;">XL</button>
                    </div class="btn-group">
                </div class="col">
                <input id="offset" type="hidden" name="offset" value="{{offset}}">
                <input id="size" type="hidden" name="size" value="{{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>
    <div class="row ms-2">
        {% set last = namespace(printed=0) %}
        {# rare event of empty folder, still need to show back button #}
        {% if folders and entry_data|length == 0 %}
            {% if cwd != root %}
                <figure id="_back" class="dir entry m-1" ecnt="1" dir="{{cwd|ParentPath}}" type="Directory">
                    <svg class="svg" width="{{size|int-22}}" height="{{size|int-22}}"><use xlink:href="#folder_back" /></svg>
                    <figcaption class="figure-caption text-center">Back</figcaption>
                </figure class="figure">
                <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="{{size|int-22}}" height="{{size|int-22}}"><use xlink:href="#folder_back_gray" /></svg>
                </div>
            {% endif %}
        {% endif %}
        {% for obj in entry_data %}
            {% if loop.index==1 and folders %}
                {% if cwd != root %}
                    <figure class="col col-auto g-0 dir entry m-1" ecnt="{{loop.index}}" dir="{{cwd|ParentPath}}" type="Directory">
                        <svg class="svg" width="{{size|int-22}}" height="{{size|int-22}}" fill="currentColor"><use xlink:href="#folder_back" /></svg>
                        <figcaption class="svg_cap figure-caption text-center">Back</figcaption>
                    </figure class="figure">
                {% 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="{{size|int-22}}" height="{{size|int-22}}"><use xlink:href="#folder_back_gray" /></svg>
                    </div>
                {% endif %}
            {% endif %}
            {% if not folders and obj.type.name == "Directory" %}
                {% continue %}
            {% endif %}
            {% if 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 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 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 != "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}}" ecnt="{{loop.index}}" 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" %}
                            <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" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img></a>
                                {% if search_term is defined %}
                                    <div style="position:absolute; bottom: 0px; left: 2px;">
                                        <svg width="16" height="16" fill="white"><use xlink:href="#{{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="static/throbber.gif"></img>
                                </div>
                            </div>
                        {% 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: 0px; left: 2px;">
                                    <svg width="16" height="16" fill="white"><use xlink:href="#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="#{{LocationIcon(obj)}}" /></svg>
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                    </figure>
                {% endif %}
            {% else %}
                {% if 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(cwd) %}
                        <figure class="col col-auto g-0 figure dir entry m-1" id={{obj.id}} ecnt={{loop.index}} dir="{{dirname}}" type="Directory">
                            <svg class="svg" width="{{size|int-22}}" height="{{size|int-22}}" fill="currentColor"><use xlink:href="#folder_yellow" /></svg>
                            <figcaption class="svg_cap figure-caption text-center text-wrap text-break">{{obj.name}}</figcaption>
                        </figure class="figure">
                        <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"">
                <input type="hidden" name="cwd" id="cwd" value="{{cwd}}">
                <div class="row">
                    <div class="col my-auto d-flex justify-content-center">
                        <button onClick="$.each( $('#main_form').serializeArray() , function( index, value ) { $('#nav_form').append( '<input type=hidden name=' + value['name'] +' value='+value['value'] + '>' ); })" id="prev" name="prev" class="prev sm-txt btn btn-outline-secondary">
                            <svg width="16" height="16" fill="currentColor"><use xlink:href="#caret_prev" /></svg>
                        </button>
                        <span class="sm-txt my-auto">&nbsp;{{how_many}} files&nbsp;</span>
                        <button onClick="$.each( $('#main_form').serializeArray() , function( index, value ) { $('#nav_form').append( '<input type=hidden name=' + value['name'] +' value='+value['value'] + '>' ); });" id="next" {{nxt_disabled}} name="next" class="next sm-txt btn btn-outline-secondary">
                            <svg width="16" height="16" fill="currentColor"><use xlink:href="#caret_next" /></svg>
                        </button>
                    </div>
                </div>
            </form>
        </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">' + $(this).children().parent().html() + '</div>'
        seln+='<input type="hidden" name="eid-'+index+'" value="'+$(this).attr('id')+'">'
        } )
    return '<div class="row col-12">'+seln+'</div>'
}

function GetSelnAsData()
{
    to_del=''
    $('.highlight').each(function( index ) { to_del+='&eid-'+index+'='+$(this).attr('id') } )
    return to_del
}

function RunAIOnSeln(person)
{
    post_data = GetSelnAsData()
    post_data += '&person='+person.replace('ai-','')
    $.ajax({ type: 'POST', data: post_data, url: '/run_ai_on', success: function(data){ window.location='/'; return false; } })
}

function DelDBox(del_or_undel)
{
    to_del = GetSelnAsData()
    $('#dbox-title').html(del_or_undel+' Selected File(s)')
    div ='<div class="row col-12"><p class="col">' + del_or_undel + ' the following files?</p></div>'
    div+=GetSelnAsDiv()
    div+=`<div class="row col-12">
            <button onClick="$('#dbox').modal('hide')" class="btn btn-outline-secondary col-2">Cancel</button>
    `
    div+=`
    <button onClick="$('#dbox').modal('hide'); $.ajax({ type: 'POST', data: to_del, url:
    `
    if( del_or_undel == "Delete" )
        div+=`
        '/delete_files',
        success: function(data){ window.location='/'; return false; } })" class="btn btn-outline-danger col-2">Ok</button>
        </div>
        `
    else
        div+=`
        '/restore_files',
        success: function(data){ window.location='/'; return false; } })" class="btn btn-outline-success col-2">Ok</button>
        </div>
        `
    $('#dbox-content').html(div)
    $('#dbox').modal('show')
}

function DetailsDBox()
{
    $('#dbox-title').html('Details of Selected File(s)')  
    var div ='<div class="row col-12">'
    $('.highlight').each(function( index ) { 
            div += "<div class='col-3' style='background-color:lightgray'>Name:</div><div class='col-9' style='background-color:lightgray'>" + $(this).attr('fname') + "</div>"
            div += "<div class='col-3'>Date:</div><div class='col-9'>" + $(this).attr('pretty_date') + "</div>"
            dir = $(this).attr('in_dir')
            if( dir.slice(-1) != "/" )
                dir=dir.concat('/')
            div += "<div class='col-3'>Dir:</div><div class='col-9'>" + dir + "</div>"
            div += "<div class='col-3'>Size:</div><div class='col-9'>" + $(this).attr('size') + " MB</div>"
            div += "<div class='col-3'>Hash:</div><div class='col-9'>" + $(this).attr('hash') + "</div>"
            div += "<div class='col-3'>Path Type:</div><div class='col-9'>" + $(this).attr('path_type') + "</div>"
        } )
        div += `
            </div>
            <br>
            <div class="form-row col-12">
                <button onClick="$('#dbox').modal('hide'); return false;" class="btn btn-outline-secondary offset-1 col-2">Cancel</button>
            </div>
        `
    $('#dbox-content').html(div)
    $('#dbox').modal('show')
}


var attempt=0;

function CheckRotateJob(id,job_id)
{
    $.ajax(
        {
            type: 'POST', data: '&job_id='+job_id, url: '/checkrotatejob', success: function(data) { 
                if( data.finished )
                {
                    $('#s'+id).hide()
                    $('#'+id).find('img.thumb').attr('style', 'filter: color(100%);' );
                    $('#'+id).addClass('entry')
                    $('#'+id).find('.thumb').attr('src', 'data:image/jpeg;base64,'+data.thumbnail)
                    return false;
                }
                else
                {
                    setTimeout( function() { CheckRotateJob(id,job_id) }, 1000,id, job_id ); 
                }
            }, 
        } )
}

function Rotate(amt)
{
    $('.highlight').each(function( id, e ) { 
        post_data = '&amt='+amt+'&id='+e.id
        {# send rotate for this image, grayscale the thumbmail, add color spinning wheel overlay, and start checking for job end #}
        $.ajax({ type: 'POST', data: post_data, url: '/rotate', success: function(data){ $('#'+e.id).find('img.thumb').attr('style', 'filter: grayscale(100%);' ); $('#'+e.id).removeClass('entry'); $('#s'+e.id).show(); CheckRotateJob(e.id,data.job_id); return false; } })
    } )
}

function MoveDBox()
{
    $('#dbox-title').html('Move Selected File(s) to new directory in Storage Path')  
    div =`
        <div class="form-row col-12">
        <p class="col">Moving the following files?</p>
        </div>
        <form id="mv_fm" class="form form-control-inline col-12" method="POST" action="/move_files">
        `
    div+=GetSelnAsDiv()
    yr=$('.highlight').first().attr('yr')
    dt=$('.highlight').first().attr('date')
    div+=`
        <div class="input-group my-3">
        <alert class="alert alert-primary my-auto py-1">
            <svg width="20" height="20" fill="currentColor"><use xlink:href="#db" /></svg>
        `
    sps={{StoragePathNames()|safe}}
    if( sps.length > 1 ) {
        {# NB: alert-primary here is a hack to get the bg the same color as the alert primary by #}
        div+= '<select name="storage_rp" class="text-primary alert-primary py-1 border border-primary rounded">'
        for(p of sps) {
            div+= '<option>'+p+'</option>'
        }
        div+= '</select>'
    } else {
        div+= '/'+sps[0]+'/'
        div+= '<input type="hidden" name="storage_rp" value="' + sps[0] + '">'
    }
    div+=`
        </alert>
        <input id="prefix" type="text" name="prefix" class="text-primary text-right form-control"
        `
    div+="value="+yr+'/'+dt+"-"
    div+=`
        "></input>
        <input type="text" name="suffix" class="form-control" placeholder="name"> </input>
        </div>
        <br>
        <div class="form-row col-12">
            <button onClick="$('#dbox').modal('hide'); return false;" class="btn btn-outline-secondary offset-1 col-2">Cancel</button>
            <button onClick="$('#dbox').modal('hide'); $('#mv_fm').submit(); return false;" class="btn btn-outline-primary col-2">Ok</button>
        </div>
        </form>
    `
    $('#dbox-content').html(div)
    $('#dbox').modal('show')
}

function ChangeSize(clicked_button,sz)
{
	$('.sz-but.btn-info').removeClass('btn-info text-white').addClass('btn-outline-info')
	$(clicked_button).addClass('btn-info text-white').removeClass('btn-outline-info')
	$('.thumb').attr( {height: sz, style: 'font-size:'+sz+'px' } )
	$('#size').val(sz)
    sz=sz-22
    $('.svg').height(sz);
    $('.svg').width(sz);
    $('.svg_cap').width(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('ecnt'))
        end=Number($('.highlight').last().attr('ecnt'))
        clicked=Number($(el).attr('ecnt'))
        if( ! $('#folders').value )
        {
            st -= 1
            end -= 1
            clicked -= 1
        }
        // if we shift-click first element, then st/end are NaN, so just highlightthe one clicked
        if( isNaN(st) )
        {
            $('.entry').slice( clicked, clicked+1 ).addClass('highlight')
            return
        }
        if( clicked > end )
            $('.entry').slice( end, clicked+1 ).addClass('highlight')
        else
            $('.entry').slice( clicked, st ).addClass('highlight')
        return
    }
    $('.highlight').removeClass('highlight')
    $(el).addClass('highlight')
}

function SetButtonState() {
    var sel=false
    $('.highlight').each(function( index ) { sel=true } )
    if( sel ) {
        $('#move').attr('disabled', false )
        $('#del').attr('disabled', false )
    } else {
        $('#move').attr('disabled', true )
        $('#del').attr('disabled', true )
    }
}

function FiguresOrDirsOrBoth() {
    var figure=false
    var dir=false
    $('.highlight').each(function( index ) { 
        if( $(this).hasClass('figure') ) {
            figure=true
        } 
        if( $(this).hasClass('dir') ) {
            dir=true
        } 
    } )
    if( figure & ! dir )
        return "figure"
    if( ! figure & dir )
        return "dir"
    return "both"
}

function SelContainsBinAndNotBin() {
    var bin=false
    var not_bin=false
    $('.highlight').each(function( index ) { 
        if( $(this).attr('path_type') == "Bin" ) {
            bin=true
        } else {
            not_bin=true
        }
    } )
    if( bin && not_bin )
        return true
    else
        return false
}

function NoSel() {
    var sel=false
    $('.highlight').each(function( index ) { sel=true } )
    // func looks for No Selection, so if sel is true and we have a sel, return false (i.e. NOT No Sel -> Sel )
    if( sel )
        return false
    else
        return true
}

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

$('.figure').dblclick(
    function() {
        s='<form id="_fm" method="POST" action="/view/' + $(this).attr("id");
        s+='"><input type="hidden" name="eids" value="'+$("#eids").val() + '"></form>'
        $(s).appendTo('body').submit(); }
    );


// different context menu on files 
$.contextMenu({
    selector: '.entry',
    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 )
        
        if( FiguresOrDirsOrBoth() == "figure" )
        {
            item_list = {
                details: { name: "Details..." },
                view: { name: "View File" },
                sep: "---",
            }
            if( e.currentTarget.getAttribute('type') == 'Image' )
            {
                item_list['rotate'] = { 
                    name: "Rotate",
                    items: {
                        "r90": { "name" : "90 degrees" },
                        "r180": { "name" : "180 degrees" },
                        "r270": { "name" : "270 degrees" },
                        "fliph": { "name" : "flip horizontally" },
                        "flipv": { "name" : "flip vertically" }
                    }
                }

            }
            item_list['move'] = { name: "Move selected file(s) to new storage folder" }
            item_list['sep2'] = { sep: "---" }
        }
        else
            item_list = {}
        
        item_list['ai'] = {
                name: "Scan file for faces",
                items: {
                    {% for p in people %}
                        "ai-{{p.tag}}": {"name": "{{p.tag}}"},
                    {% endfor %}
                    "ai-all": {"name": "all"},
                }
            }
        
        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" ) { 
                    s='<form id="_fm" method="POST" action="/view/' + $(this).attr("id");
                    s+='"><input type="hidden" name="eids" value="'+$("#eids").val() + '"></form>'
                    $(s).appendTo('body').submit();
                }
                if( key == "move" ) { MoveDBox() }
                if( key == "del"  ) { DelDBox('Delete') }
                if( key == "undel") { DelDBox('Restore') }
                if( key == "r90"  ) { Rotate(90) }
                if( key == "r180" ) { Rotate(180) }
                if( key == "r270" ) { Rotate(270) }
                if( key == "fliph" ) { Rotate("fliph") }
                if( key == "flipv" ) { Rotate("flipv") }
                if( key.startsWith("ai")) { RunAIOnSeln(key) }
            },
            items: item_list
        };
    }
});


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