{% extends "base.html" %} {% block main_content %}
{# make the form-switch / toggle info color set, give or take #}
<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 current={{current}}
    var eids="{{eids}}"
    var eid_lst=eids.split(",")
    var offset={{OPT.offset}}
    var first_eid={{OPT.first_eid}}
    var last_eid={{OPT.last_eid}}
	var imp_path="static/Import/{{imp_path}}"
	var st_path="static/Storage/{{st_path}}"
	var bin_path="static/Bin/{{bin_path}}"

    {% for id in objs %}
        e=new Object()
        e.url = "{{objs[id].FullPathOnFS()|safe}}"
        e.type = "{{objs[id].type.name}}"
        {% if objs[id].file_details.faces %}
            e.face_model="{{objs[id].file_details.faces[0].facefile_lnk.model_used}}"
        {% endif %}
        e.faces=[]
        {% for face in objs[id].file_details.faces %}
            data = { 'id': '{{face.id}}', 'x': '{{face.face_left}}', 'y': '{{face.face_top}}', 'w': '{{face.w}}', 'h':'{{face.h}}' }
            {% if face.refimg %}
                data['pid']='{{face.refimg.person.id}}'
                data['who']='{{face.refimg.person.tag}}'
                data['distance']="{{face.refimg_lnk.face_distance|round(2)}}"
            {% endif %}
            {% if face.no_match_override %}
				data['override'] = {
					'face_id'  : '{{face.no_match_override.face_id}}',
					'type_id'  : '{{face.no_match_override.type.id}}',
					'type_name': '{{face.no_match_override.type.name}}',
					'who'      : '{{face.no_match_override.type.name}}',
					'distance' : 'N/A'
				}
            {% endif %}
            {% if face.manual_override %}
				data['override'] = {
					'face_id'  : '{{face.manual_override.face_id}}',
					'type_id'  : '{{face.manual_override.type.id}}',
					'type_name': '{{face.manual_override.type.name}}',
					'who'      : '{{face.manual_override.person.tag}}',
					'distance' : 'N/A'
				}
            {% endif %}
            e.faces.push( data )
        {% endfor %}
        objs[{{id}}]=e
    {% endfor %}

    {% for el in NMO_data %}
		NMO[{{el.id}}] = { 'type_id': {{el.id}}, 'name': '{{el.name}}' }
    {% endfor %}
	


    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 CallViewListRoute(dir)
    {
        // dont allow mad spamming of arrows
        $("#la").prop("disabled", true)
        $("#ra").prop("disabled", true)
        data="eids="+$("#eids").val()
        data+="&cwd={{OPT.cwd}}"
        data+="&root={{OPT.root}}"
        data+="&orig_url={{OPT.orig_url}}"
        data+="&view_eid={{OPT.view_eid}}"
        // direction (next/prev)
        data+="&"+dir+ "=1"
        {% if search_term is defined %}
            data+="&search_term={{search_term}}"
        {% endif %}
        $.ajax({ type: 'POST', data: data, url: '/view_list', success: function(res){ 
                current=res.current
                eids=res.eids
                objs=res.objs
                eid_lst=eids.split(",")
                offset=res.offset
                // okay, we now have results back, can reset next/prev buttons
                if( current != first_eid )
                    $("#la").prop("disabled", false)
                if( current != last_eid )
                    $("#ra").prop("disabled", false)
                ViewImageOrVideo()
            }
        })
    }

</script>

<div id="viewer" class="container-fluid">
    
    {% set max=eids.split(',')|length %}
        <input type="hidden" name="eids" value={{eids}}>
        <div class="row">
                <button title="Show previous image" class="col-auto btn btn-outline-info px-2" style="padding: 10%" id="la"
                {% if OPT.first_eid == current %}
                    disabled
                {% endif %}
                    onClick="
                        cidx = eid_lst.indexOf(current.toString())
                        prev=cidx-1
                        if( prev < 0 )
                        {
                            if( offset )
                            {
                                CallViewListRoute('prev')
                                return
                            }
                            else
                            {
                                $('#la').attr('disabled', true )
                                prev=0
                            }
                        }
                        $('#ra').attr('disabled', false )
                        current=eid_lst[prev]
                        ViewImageOrVideo()
                        if( current == first_eid )
                            $('#la').attr('disabled', true )
                        ">
                    <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
                            im.src="../" + objs[current].url
                            var context = canvas.getContext('2d')
                            window.addEventListener('resize', DrawImg, false);
                        </script>
                        <figcaption id="img-cap" class="figure-caption text-center text-wrap text-break"><span id="fname_i"></span></figcaption>
                    </figure>
                    <script>$('#fname_i').html(PrettyFname(objs[current].url))</script>
                    {% if objs[current].type.name != "Image" %}
                        <script>$('#figure').hide()</script>
                    {% endif %}
                    <div id="video_div" class="col col-auto">
                        <video id="video" class="col col-auto" controls>
                            <source src="../{{objs[current].FullPathOnFS()}}" 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>
						<script>$('#fname_v').html(PrettyFname(objs[current].url))</script>
                    </div>
                    <script>
                        window.addEventListener('resize', ResizeVideo, false);
                        ResizeVideo()
                        {% if objs[current].type.name != "Video" %}
                           $('#video_div').hide()
                        {% endif %}
                    </script>

                    <button title="Show next image" class="col-auto btn btn-outline-info px-2" style="padding: 10%" id="ra" 
                        {% if OPT.last_eid == current %}
                            disabled
                        {% endif %}
                        onClick="
                            cidx = eid_lst.indexOf(current.toString())
                            if( cidx < eid_lst.length-1 )
                            {
                                current=eid_lst[cidx+1]
                                ViewImageOrVideo()
                                if( current != first_eid )
                                    $('#la').attr('disabled', false )
                            }
                            else
                                    CallViewListRoute('next')
                            
                            if( current == last_eid )
                            {
                                $('#ra').attr('disabled', true )
                                return
                            }
                        ">
                        <svg width="16" height="16" fill="currentColor"><use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
                    </button>
        </div id="/form-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" disabled style="visibility:hidden"> 
                <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">
{% endblock main_content %}
{% block script_content %}
<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 script_content %}