<!DOCTYPE html>
<html>
    <head>
        {% for src in js %}
            <script type="text/javascript" src="{{ src }}"></script>
        {% endfor %}
        {% for src in css %}
            <link type="text/css" rel="stylesheet" href="{{ src }}">
        {% endfor %}
        
        <script type="text/javascript" src="{{ url_for( 'files.send_app_files', subpath = 'functions.js' ) }}"></script>
        <link type="text/css" rel="stylesheet" href="{{ url_for( 'files.send_app_files', subpath = 'app.css' ) }}">
        
        <style type="text/css">
            :root {
                --imgsize: 200px;
            }
            .icnml_list_of_boxes {
                grid-template-columns: repeat( auto-fill, calc( var( --imgsize ) + 2 * var( --imgmargin ) ) );
            }
            .icnml_content > div {
                margin-bottom: 10px;
            }
        </style>

        <script type="text/javascript">
            baseurl = "{{ baseurl }}";
            var folder_id = "{{ folder_id }}";
            
            var tpid = {};
            {% for t in tpid %}
                tpid[ "{{ t[ 'pc' ] }}" ] = "{{ t[ 'tenprint' ] }}";
            {% endfor %}
            
            var segments_position_code = {};
            {% for key, value in segments_position_code.iteritems() %}
                segments_position_code[ "{{ key }}" ] = "{{ value }}";
            {% endfor %}
            
            {% if admin %}
                var delete_folder = function()
                {
                    var delete_folder_to_db = function()
                    {
                        $.ajax( {
                            url: "{{ url_for( 'afis.admin_delete_folder', folder_id = folder_id ) }}",
                            dataType: "json",
                            method: "GET",
                            success: function( data )
                            {
                                if( ! data.error )
                                {
                                    toastr.success( "Deletion done" );
                                    
                                    setTimeout( function(){
                                        window.location.href = "{{ url_for( 'afis.admin_list_folders' ) }}"
                                    }, 500 );
                                } else {
                                    toastr.error( "Error while deleting the folder" );
                                }
                            }
                        } );
                    }
                    
                    $( "<div />" )
                        .attr( "id", "folder_deletion_confirmation" )
                        .text( "Are you sure you want to delete this AFIS search folder?" )
                        .dialog( {
                            title: "Confirm the folder deletion",
                            modal: true,
                            width: "550px",
                            buttons: {
                                "Delete": function(){
                                    delete_folder_to_db();
                                },
                                "Cancel": function()
                                {
                                    $( this ).dialog( "close" );
                                },
                            },
                            close: function()
                            {
                                $( this ).remove();
                            }
                        } );
     
                }
                
                var add_new_segment = function()
                {
                    var create_new_segment = function()
                    {
                        var selected = $( "#segment_select > option:checked" ).val() || null;
                        console.log( selected );
                        
                        $.ajax( {
                            url: "{{ url_for( 'afis.admin_add_segment_to_cnmfolder', folder_id = folder_id ) }}",
                            dataType: "json",
                            method: "POST",
                            data: {
                                fpc: selected
                            },
                            success: function( data )
                            {
                                if( ! data.error )
                                {
                                    toastr.success( "Segment added" );
                                    setTimeout( function(){ window.location.reload(); }, 500 );
                                    
                                } else {
                                    toastr.error( "Error while adding the segment" );
                                }
                                
                                $( "#new_segment" ).remove();
                            }
                        } );
                    }
                    
                    var segment_select = $( "<select >" )
                        .attr( "id", "segment_select" )
                        .attr( "data-placeholder", "segment..." )
                        .addClass( "chosen-select" )
                    
                    segment_select.append( $( "<option />" ) );
                    
                    {% for s in segment_list %}
                        segment_select.append(
                            $( "<option />" )
                                .attr( "value", "{{ s[ 'fpc' ] }}" )
                                .text( "{{ segments_position_code[ s[ 'fpc' ] ] }} ({{ s[ 'fpc' ] }})" )
                        );
                    {% endfor %}
                    
                    var segment_list = $( "<div />" )
                        .css( "margin-top", "5px" )
                        .append( segment_select );
                    
                    $( "<div />" )
                        .attr( "id", "new_segment" )
                        .text( "Add this segment to the AFIS search folder" )
                        .append( segment_list )
                        .dialog( {
                            title: "new AFIS segment",
                            modal: true,
                            height: 450,
                            width: 450,
                            buttons: {
                                "OK": create_new_segment,
                                "Cancel": function()
                                {
                                    $( this ).dialog( "close" );
                                },
                            },
                            open: function()
                            {
                                $( "#segment_select" )
                                    .chosen( {
                                        search_contains: true,
                                        width: "100%"
                                    } );
                                setTimeout( function(){ $( "#segment_select_chosen > a > input" ).trigger( "mousedown" ) }, 0 );
                            },
                            close: function()
                            {
                                $( this ).remove();
                            }
                        } );
                }
                
                var remove_segment_from_db = function( fpc )
                {
                    $.ajax( {
                        url: "{{ url_for( 'afis.admin_remove_segment', folder_id = folder_id ) }}",
                        dataType: "json",
                        method: "POST",
                        data: {
                            fpc: fpc
                        },
                        success: function( data )
                        {
                            if( data.error )
                            {
                                toastr.error( "Error while deleting the segment" );
                            }
                        },
                        error: function()
                        {
                            toastr.error( "Error while deleting the segment" );
                        }
                    } );
                }
                
                var update_users_in_db = function()
                {
                    update_users_in_db_sub( "mark" );
                    update_users_in_db_sub( "ref" );
                }
                
                var update_users_in_db_sub = function( type )
                {
                    var users = [];

                    $.each( $( "#users_" + type + " > select > option:checked" ), function() {
                        users.push( parseInt( $( this ).val() ) );
                    } );

                    $.ajax( {
                        url: "{{ url_for( 'afis.admin_update_users_in_afis_folder', folder_id = folder_id ) }}",
                        dataType: "json",
                        method: "POST",
                        data: {
                            users: JSON.stringify( users ),
                            type: type
                        },
                        success: function( data )
                        {
                            if( data.error )
                                toastr.error( "Server side error" );
                        },
                        error: function( data )
                        {
                            toastr.error( "Network error" );
                        }
                    } );
                }
            {% endif %}
        </script>
    </head>
    <body class="icnml_main_layout">
        {% include "header.html" %}
        {% include navigation %}
        
        <div class="icnml_content">
            {% if admin %}
                <div>
                    <a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="delete_folder_div" role="button" aria-disabled="false">
                        <span class="ui-button-text">Delete folder</span>
                    </a>
                </div>
                <div id="users_mark">
                    <span>Marks</span>
                    <select multiple id="users_select_marks" data-placeholder="Add a user to this folder..." class="chosen-select">
                        {% for user in users %}
                            <option id="user_{{ user[ 'id' ] }}_mark_chosen" value="{{ user[ 'id' ] }}">{{ user[ 'username' ] }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div id="users_ref">
                    <span>References</span>
                    <select multiple id="users_select_refs" data-placeholder="Add a user to this folder..." class="chosen-select">
                        {% for user in users %}
                            <option id="user_{{ user[ 'id' ] }}_ref_chosen" value="{{ user[ 'id' ] }}">{{ user[ 'username' ] }}</option>
                        {% endfor %}
                    </select>
                </div>
            {% endif %}
            <div class="icnml_list_of_boxes">
                {% for s in segment_list_in_folder %}
                    <div id="segment_{{ s[ 'uuid' ] }}_outer">
                        <div class="ui-widget-header ui-corner-top icnml_box_top">{{ s[ 'fpc' ] }}</div>
                        <div class="ui-widget-content ui-corner-bottom icnml_box_content">
                            <div class="icnml_cnm_segments icnml_pointer" id="segment_{{ s[ 'uuid' ] }}"></div>
                        </div>
                    </div>
                {% endfor %}
                {% if admin %}
                    <div>
                        <div class="ui-widget-header ui-corner-top icnml_box_top">New</div>
                        <div class="ui-widget-content ui-corner-bottom icnml_box_content">
                            <div class="icnml_button icnml_cnm_segments icnml_new_button icnml_pointer" id="icnml_new_segment">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
            <div id="zoom_slider"></div>
        </div>
        
        <script type="text/javascript">
            {% for s in segment_list_in_folder %}
                var url = "{{ url_for( 'image.image_segment_serve', tenprint_id = '<tenprintid>', pc = s[ 'fpc' ] ) }}";
                url = url.replace( "%3Ctenprintid%3E", tpid[ "{{ s[ 'fpc' ] }}" ] );
                
                $( "#segment_{{ s[ 'uuid' ] }}" ).css( "background-image", "url( " + url + " )" );
                $( "#segment_{{ s[ 'uuid' ] }}" )
                    .parent()
                    .on( "click", function()
                    {
                        {% if admin %}
                            window.location.href = "{{ url_for( 'afis.admin_view_segment', folder_id = folder_id, fpc = s[ 'fpc' ] ) }}"
                        {% else %}
                            window.location.href = "{{ url_for( 'afis.view_segment', folder_id = folder_id, fpc = s[ 'fpc' ] ) }}"
                        {% endif %}
                    } );
                $( "#segment_{{ s[ 'uuid' ] }}_outer > .icnml_box_top" ).text( segments_position_code[ "{{ s[ 'fpc' ] }}" ].replace( "&#39;", "'" ) );
                
                $( "#segment_{{ s[ 'uuid' ] }}" ).on( "contextmenu", function( event )
                {
                    event.preventDefault();
                    var target = $( event.target ).attr( "id" ).replace( "segment_", "" );
                    $( "#segment_" + target + "_outer" ).hide();
                    
                    remove_segment_from_db( "{{ s[ 'fpc' ] }}" );
                } );
            {% endfor %}
            
            {% for user in users_assigned_refs %}
                $( "#users_select_refs" ).val( "{{ user[ 'id' ] }}" ).trigger( "chosen:updated" );
            {% endfor %}
            {% for user in users_assigned_marks %}
                $( "#users_select_marks" ).val( "{{ user[ 'id' ] }}" ).trigger( "chosen:updated" );
            {% endfor %}
            
            $( "#users_select_marks" )
                .chosen( {
                    search_contains: true,
                    width: "50%"
                } );
            $( "#users_select_refs" )
                .chosen( {
                    search_contains: true,
                    width: "50%"
                } );
            
            {% if admin %}
                $( "#users_select_marks" ).on( "change", update_users_in_db )
                $( "#users_select_refs" ).on( "change", update_users_in_db )
                
                $( "#icnml_new_segment" ).on( "click", add_new_segment );
                $( "#delete_folder_div" ).on( "click", delete_folder );
            {% endif %}
            
            $( "#icnml_navigation_afis" )
                .addClass( "activated" );
            
            $( "#navloc" ).append(
                $( "<a />" )
                    .attr( "href", "{{ url_for( 'afis.admin_list_folders' ) }}" )
                    .text( "AFIS folders" )
            ).append(
                $( "<span />" ).text( ">" )
            ).append(
                $( "<span />" ).text( "{{ username }}" )
            );
        </script>
    </body>
</html>
