<!DOCTYPE html>
<html lang="en">
    <head>
        <title>ICNML</title>
        <meta name="description" content="International Close Non-Matches Library">
        
        {% autoescape false %}
            {{ app_files }}
        {% endautoescape %}
        
        <style type="text/css">
            .icnml_form {
                max-width: 600px;
            }
            #location_img {
                position: relative;
                background-image: url( '{{ url_for( 'files.send_static_files', subpath = 'location/main.png' ) }}' );
                background-repeat: no-repeat;
                background-size: 100%;
            }
            #location_img > img {
                width: auto;
            }
            #location_img > div {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                z-index: -1;
                background-repeat: no-repeat;
                background-size: 100%;
            }
            .left_button {
                position: absolute;
                left: 20px;
            }
        </style>
        
        <script type="text/javascript">
            baseurl = "{{ baseurl }}";
            
            {% if admin %}
                var nickname = "";
            {% else %}
                var password_local = localStorage.getItem( "session_key" );
                var nickname = decrypt( "{{ cnm_result[ 'nickname' ] }}", password_local );
            {% endif %}
            if( nickname !== "" )
            {
                var cnm_nickname_navbar = nickname;
            } else {
                var cnm_nickname_navbar = "{{ cnm_uuid[ 0:18 ] }}";
            }
            
            var db_size = "{{ cnm_result[ 'db_size' ] }}";
            if( db_size === "None" )
                db_size = "";
            
            var afis_rank = "{{ cnm_result[ 'afis_rank' ] }}";
            if( afis_rank === "None" )
                afis_rank = "";
            
            var public_notes = `{{ cnm_result[ 'public_notes' ] }}`;
            if( public_notes === "None" )
                public_notes = "";
            
            var current_pfsp = "{{ cnm_result[ 'matched_pfsp' ] }}";
            if( current_pfsp === "None" )
            {
                current_pfsp = [];
            } else {
                current_pfsp = current_pfsp.split( "," );
            }
            
            var update_field = function( field, data )
            {
                $.ajax( {
                    url: "{{ url_for( 'afis.cnm_update_metadata', target_uuid = target_uuid, cnm_uuid = cnm_uuid ) }}",
                    dataType: "json",
                    method: "POST",
                    data: {
                        field: field,
                        data: data
                    }
                } );
            }
            
            {% if not admin %}
                var update_nickname = function()
                {
                    var nickname = $( "#nickname" ).val() || null;
                    nickname = encrypt( nickname, password_local );
                    update_field( "nickname", nickname );
                }
            {% endif %}
            
            var update_dbsize = function()
            {
                var db_size = $( "#db_size" ).val() || null;
                update_field( "db_size", db_size );
            }
            var update_afisrank = function()
            {
                var afis_rank = $( "#afis_rank" ).val() || null;
                update_field( "afis_rank", afis_rank );
            }
            
            var update_public_notes = function()
            {
                var public_notes = $( "#public_notes" ).val() || null;
                update_field( "public_notes", public_notes );
            }
            
            var update_field_db_multi = function( field )
            {
                var field_value = [];
                
                $.each( $( "#" + field + " > select > option:checked" ), function() {
                    field_value.push( $( this ).val() );
                } );
                
                update_field( field, field_value.join( "," ) );
            }
            var update_field_db_single = function( field )
            {
                var field_value = $( "#" + field + " > select > option:checked" ).val();
                update_field( field, field_value );
            }
            
            var is_personal_cnm_sync_with_rank = function()
            {
                var is_personal_cnm = $( "#is_personal_cnm > select > option:checked" ).val();
                
                if( is_personal_cnm === "0" )
                {
                    var current_rank = $( "#afis_rank" ).val();
                    
                    if( current_rank === "" )
                    {
                        $( "#afis_rank" ).val( 1 );
                        update_field( "afis_rank", "1" );
                    }
                }
            }
            
            var set_pfsp = function()
            {
                var updateMapCoordinates = function( data, fac )
                {
                    data.children( "area" ).each( function( i )
                    {
                        $( this )[ 0 ].coords = $( this )[ 0 ].coords
                            .split( "," )
                            .map( x => x * fac )
                            .join( "," );
                    } );
                }
                var updateSelection = function( data, faded_out_current_selection )
                {
                    var location_base_url = "{{ url_for( 'files.send_static_files', subpath = 'location' ) }}";
                    
                    var d = [ "main" ]
                        .concat( data )
                        .filter( x => x != "None" )
                        .filter( x => x != "" )
                        .map( x => "url( " + location_base_url + "/" + x + ".png )" )
                        .join( ", " );
                    
                    $( "#location_img" )
                        .css( "background-image", d );
                    
                    if( faded_out_current_selection )
                    {
                        var d = current_pfsp
                            .filter( x => x != "None" )
                            .filter( x => x != "" )
                            .map( x => "url( " + location_base_url + "/" + x + ".png )" )
                            .join( ", " );
                        
                        $( "#location_img > div" )
                            .css( "background-image", d )
                            .css( "opacity", "0.3" );
                    } else {
                        $( "#location_img > div" )
                            .css( "background-image", "" )
                            .css( "opacity", "" );
                    }
                }
                var update_pfsp_db = function( data )
                {
                    if( data !== null )
                    {
                        $( "#pfsp" ).val( data.join( ", " ) );
                        data = data.join( "," )
                    }
                    
                    $.ajax( {
                        url: "{{ url_for( 'afis.cnm_set_pfsp', target_uuid = target_uuid, cnm_uuid = cnm_uuid ) }}",
                        dataType: "json",
                        method: "POST",
                        data: {
                            pfsp: data
                        },
                        error: function()
                        {
                            toastr.error( "Error while saving the location data" );
                        }
                    } );
                }
                
                var pfsp_div = $( "<div />" ).html( `
                    <div id="pfsp">
                        <div id="location_img">
                            <img src="{{ url_for( 'files.send_static_files', subpath = 'location/empty.png' ) }}" usemap="#location_map" />
                            <div></div>
                        </div>
                        <map id="Map" name="location_map" class="location_map">
                            {% for zone in pfsp_zones %}
                                <area
                                    shape="polygon"
                                    id="area_{{ zone[ 'sel' ] | join( '_' ) }}"
                                    coords="{{ zone[ 'coords' ] }}"
                                    data-selection="{{ zone[ 'sel' ] | join( ',' ) }}"
                                    data-desc="{{ zone[ 'desc' ] }}"
                                    data-zone="{{ zone[ 'zone' ] }}"
                                    data-lat="{{ zone[ 'lat' ] }}"
                                />
                            {% endfor %}
                        </map>
                    </div>
                ` );
                
                $( "<div />" )
                    .attr( "id", "set_pfsp_dialog" )
                    .text( "Click on the corresponding location for the Close Non Match correspondance" )
                    .append( pfsp_div )
                    .dialog( {
                        title: "CNM PFSP",
                        modal: true,
                        width: ( $( window ).height() * 0.7 * 1243 / 656 ) + 33,
                        height: $( window ).height() * 0.7 + 140,
                        buttons: {
                            clean: {
                                class: "left_button",
                                text: "Unset all locations",
                                click: function(){
                                    current_pfsp = [];
                                    updateSelection( current_pfsp );
                                }
                            },
                            "Cancel": function()
                            {
                                $( this ).dialog( "close" );
                            },
                            save: {
                                id: "save_button",
                                text: "Save",
                                click: function(){
                                    update_pfsp_db( current_pfsp );
                                    $( this ).dialog( "close" );
                                }
                            },
                        },
                        open: function()
                        {
                            var imgheight = $( "#set_pfsp_dialog" ).height() - 32;
                            $( "#location_img > img" ).css( "height", imgheight );
                            
                            $( "#save_button" ).focus();
                            
                            // Action for the PFSP zones
                            
                            updateMapCoordinates( $( "#Map" ), $( "#location_img" ).height() / 656 );
                            
                            var areas = new Array();
                            {% for zone in pfsp_zones %}
                                areas.push( "#area_{{ zone[ 'sel' ] | join( '_' ) }}" );
                            {% endfor %}
                            
                            for( var i = 0; i < areas.length; i++ )
                            {
                                $( areas[ i ] )
                                    .mouseover( function()
                                    {
                                        var s = $( this )[ 0 ].dataset.selection.split( "," );
                                        updateSelection( s, true );
                                    } )
                                    .mouseout( function()
                                    {
                                        updateSelection( current_pfsp, false );
                                    } )
                                    .on( "click", function()
                                    {
                                        var s = $( this )[ 0 ].dataset.selection.split( "," );
                                        
                                        current_pfsp.push( ...s );
                                        current_pfsp = current_pfsp.filter( ( v, i, a ) => a.indexOf( v ) === i );
                                        
                                        i = current_pfsp.indexOf( "" )
                                        if( i >= 0 )
                                            current_pfsp.splice( i, 1 );
                                        
                                        updateSelection( current_pfsp );
                                    } );
                            }
                            
                            updateSelection( current_pfsp );
                            
                            var dialog_div = $( this );
                            $( ".ui-widget-overlay" ).bind( "click", function()
                            {
                                dialog_div.dialog( "close" );
                            } );
                        },
                        close: function()
                        {
                            $( this ).remove();
                        }
                    } );
            }
            
            {% if admin %}
                var delete_file = function( uuid )
                {
                    $( "<div />" )
                        .attr( "id", "file_delete_dialog" )
                        .text( "Are you sure you want to delete this file?" )
                        .dialog( {
                            title: "File deletion confirmation",
                            modal: true,
                            width: "550px",
                            buttons: {
                                "Delete": function()
                                {
                                    $.ajax( {
                                        url: "{{ url_for( 'afis.delete_file', target_uuid = target_uuid, cnm_uuid = cnm_uuid ) }}",
                                        dataType: "json",
                                        method: "POST",
                                        data: {
                                            "file_uuid": uuid
                                        },
                                        success: function( data )
                                        {
                                            if( ! data.error )
                                            {
                                                $( "#file_" + uuid + "_outer" ).remove();
                                                $( "#file_delete_dialog" ).dialog( "close" );
                                                
                                            } else {
                                                toastr.error( "Error while deleting the " );
                                            }
                                        },
                                        error: function( data )
                                        {
                                            toastr.error( "Network error" );
                                            $( "#file_delete_dialog" ).dialog( "close" );
                                        }
                                    } );
                                },
                                "Cancel": function()
                                {
                                    $( this ).dialog( "close" );
                                },
                            },
                            close: function()
                            {
                                $( this ).remove();
                            },
                            open: function()
                            {
                                var dialog_div = $( this );
                                $( ".ui-widget-overlay" ).bind( "click", function()
                                {
                                    dialog_div.dialog( "close" );
                                } );
                            }
                        } );
                }
            {% endif %}
        </script>
    </head>
    <body class="icnml_main_layout">
        {% include "header.html" %}
        {% include navigation %}
        
        <div class="icnml_content">
            <div class="icnml_form" style="margin-bottom: 20px;">
                <div class="ui-widget-header ui-corner-top icnml_box_top">Close Non Match upload form</div>
                <div class="ui-widget-content ui-corner-bottom icnml_box_content_central">
                    <div class="icnml_box_fields">
                    
                        <div style="text-align: right;">
                            <label for="target_uuid">Target identifier</label>
                        </div>
                        <div>
                            <input id="target_uuid" name="target_uuid" type="text" value="{{ target_uuid }}" readonly />
                        </div>
                        
                        <div style="text-align: right;">
                            <label for="cnm_uuid">CNM identifier</label>
                        </div>
                        <div>
                            <input id="cnm_uuid" name="cnm_uuid" type="text" value="{{ cnm_uuid }}" readonly />
                        </div>
                    
                        {% if not admin %}
                            <div style="text-align: right;">
                                <label for="nickname">Personal identifier</label>
                            </div>
                            <div>
                                <input id="nickname" name="nickname" type="text" value="" placeholder="Personal encrypted identifier"/>
                            </div>
                        {% else %}
                            <div style="text-align: right;">
                                <label for="uploader">Uploader user</label>
                            </div>
                            <div>
                                <input id="uploader" name="uploader" type="text" value="{{ cnm_result[ 'uploader_username' ] }}" readonly />
                            </div>
                        {% endif %}
                        
                        <div style="text-align: right;">
                            <label for="is_personal_cnm">Selected CNM?</label>
                        </div>
                        <div>
                            <div id="is_personal_cnm">
                                <select id="is_personal_cnm_select" class="chosen-select">
                                    <option value="" disabled selected>Is this the candidate you have selected?</option>
                                    <option value="1">Yes, this is my personal choice</option>
                                    <option value="0">No, this is the best candidate from an AFIS point of view</option>
                                </select>
                            </div>
                        </div>
                        
                        <div style="text-align: right;">
                            <label for="is_a_good_cnm">Good CNM?</label>
                        </div>
                        <div>
                            <div id="is_a_good_cnm">
                                <select id="is_a_good_cnm_select" class="chosen-select">
                                    <option value="" disabled selected>Do you consider this candidate to be a good Close Non Match?</option>
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>
                            </div>
                        </div>
                        
                        <div style="text-align: right;">
                            <label for="db_size">Database size</label>
                        </div>
                        <div>
                            <input id="db_size" name="db_size" type="text" value="" placeholder="people / unique tenprint cards"/>
                        </div>
                        
                        <div style="text-align: right;">
                            <label for="afis_rank">AFIS rank</label>
                        </div>
                        <div>
                            <input id="afis_rank" name="afis_rank" type="text" value="" placeholder="AFIS rank (fingers)"/>
                        </div>
                        
                        <div style="text-align: right;">
                            <label for="pfsp">Location</label>
                        </div>
                        <div>
                            <input id="pfsp" name="pfsp" type="text" value="" placeholder="Click to set the location..." readonly/>
                        </div>
                        
                        <div style="text-align: right;">
                            Quality
                        </div>
                        <div id="quality">
                            <select id="quality_select" data-placeholder="select..." class="chosen-select">
                                {% for q in all_qualities %}
                                    <option value="{{ q[ 'id' ] }}">{{ q[ 'name' ] }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <div style="text-align: right;">
                            <label for="public_notes">Public notes</label>
                        </div>
                        <div>
                            <textarea name="public_notes" id="public_notes" rows="7" placeholder="Publicly readables notes"></textarea>
                        </div>
                        
                        {% if not admin %}
                            <div style="text-align: right;">
                                <label for="upload_card">CNM card</label>
                            </div>
                            <div id="card_dropzone_outer">
                                <div id="card_dropzone" class="dropzone icnml_pointer"></div>
                            </div>

                            <div style="text-align: right;">
                                <label for="upload_file">Screenshot</label>
                            </div>
                            <div id="upload_file_dropzone_outer">
                                <div id="upload_file_dropzone" class="dropzone icnml_pointer"></div>
                            </div>
                        {% endif %}
                        
                    </div>
                </div>
            </div>
            
            <div class="icnml_list_of_boxes_outer">
                <div class="icnml_list_of_boxes_desc">Uploaded tenprint cards ({{ uploaded_cards|length }})</div>
                <div class="icnml_list_of_boxes">
                    {% for f in uploaded_cards %}
                        <div id="file_{{ f[ 'uuid' ] }}_outer">
                            <div class="ui-widget-header ui-corner-top icnml_box_top" id="file_{{ f[ 'uuid' ] }}_filename">-</div>
                            <div class="ui-widget-content ui-corner-bottom icnml_box_content">
                                <div
                                    id="file_{{ f[ 'uuid' ] }}"
                                    class="icnml_pointer"
                                    style="background-image: url( {{ url_for( 'afis.image_auto_detect_format', cnm_uuid = cnm_uuid, file_uuid = f[ 'uuid' ], fpc = 0 ) }} )">
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
            
            <div class="icnml_list_of_boxes_outer">
                <div class="icnml_list_of_boxes_desc">Uploaded screenshot files ({{ uploaded_screenshots|length }})</div>
                <div class="icnml_list_of_boxes">
                    {% for f in uploaded_screenshots %}
                        <div id="file_{{ f[ 'uuid' ] }}_outer">
                            <div class="ui-widget-header ui-corner-top icnml_box_top" id="file_{{ f[ 'uuid' ] }}_filename">-</div>
                            <div class="ui-widget-content ui-corner-bottom icnml_box_content">
                                <div
                                    id="file_{{ f[ 'uuid' ] }}"
                                    class="icnml_pointer"
                                    style="background-image: url( {{ url_for( 'afis.screenshot_preview', file_uuid = f[ 'uuid' ] ) }} )">
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div id="zoom_slider"></div>
        </div>
        <script type="text/javascript">
            {% if not admin %}
                $( "#nickname" ).val( nickname );
                $( "#nickname" ).on( "change", update_nickname );
            {% endif %}
            
            $( "#db_size" ).val( db_size );
            $( "#db_size" ).on( "change", update_dbsize );
            
            $( "#afis_rank" ).val( afis_rank );
            $( "#afis_rank" ).on( "change", update_afisrank );
            
            $( "#public_notes" ).val( public_notes );
            $( "#public_notes" ).on( "change", update_public_notes );
            
            {% for f in [ "quality" ] %}
                $( "#{{ f }}_select" )
                    .val( "{{ cnm_result[ f ] }}".split( "," ) )
                    .trigger( "chosen:updated" );
            {% endfor %}
            
            {% for field_name in [ "is_personal_cnm", "is_a_good_cnm" ] %}
                {% if cnm_result[ field_name ] != None %}
                    {% if cnm_result[ field_name ] %}
                        $( "#{{ field_name }}_select"  )
                            .val( "1" )
                            .trigger( "chosen:updated" );
                    {% else %}
                        $( "#{{ field_name }}_select"  )
                            .val( "0" )
                            .trigger( "chosen:updated" );
                    {% endif %}
                {% endif %}
            {% endfor %}
            
            $( "#pfsp" )
                .val( current_pfsp.join( ", " ) )
                .on( "click", set_pfsp );
            
            {% for f in uploaded_cards %}
                {% if f[ 'extension' ]|lower in [ 'nist', 'nst', 'eft' ] %}
                    {% if admin %}
                        $( "#file_{{ f[ 'uuid' ] }}_outer" ).on( "click", function(){
                            window.location = "{{ url_for( 'afis.admin_cnm_view_nist_file', target_uuid = target_uuid, cnm_uuid = cnm_uuid, file_uuid = f[ 'uuid' ] ) }}";
                        } );
                    {% else %}
                        $( "#file_{{ f[ 'uuid' ] }}_outer" ).on( "click", function(){
                            window.location = "{{ url_for( 'afis.cnm_view_nist_file', target_uuid = target_uuid, cnm_uuid = cnm_uuid, file_uuid = f[ 'uuid' ] ) }}";
                        } );
                    {% endif %}
                {% endif %}
                
                {% if admin %}
                    $( "#file_{{ f[ 'uuid' ] }}_outer" ).on( "contextmenu", function(){
                        delete_file( "{{ f[ 'uuid' ] }}"  );
                    } );
                {% endif %}
                
                {% if not admin %}
                    var filename = decrypt( "{{ f[ 'filename' ] }}", password_local );
                    filename = truncate( filename, 18 );
                {% else %}
                    var filename = "{{ f[ 'uuid' ][ 0:18 ] }}";
                {% endif %}
                $( "#file_{{ f[ 'uuid' ] }}_filename" ).text( truncate( filename, 18 ) );
            {% endfor %}
            
            {% for f in uploaded_screenshots %}
                {% if admin %}
                    $( "#file_{{ f[ 'uuid' ] }}_outer" ).on( "contextmenu", function(){
                        delete_file( "{{ f[ 'uuid' ] }}"  );
                    } );
                {% endif %}
                
                {% if not admin %}
                    var filename = decrypt( "{{ f[ 'filename' ] }}", password_local );
                    filename = truncate( filename, 18 );
                {% else %}
                    var filename = "{{ f[ 'uuid' ][ 0:18 ] }}";
                {% endif %}
                $( "#file_{{ f[ 'uuid' ] }}_filename" ).text( truncate( filename, 18 ) );
            {% endfor %}
            
            //
            Dropzone.autoDiscover = false;
            
            {% if not admin %}
                $( function()
                {
                    new Dropzone(
                        "#card_dropzone",
                        {
                            url: "{{ url_for( 'afis.upload_file', target_uuid = target_uuid, cnm_uuid = cnm_uuid ) }}",
                            timeout: 600000,
                            createImageThumbnails: false,
                            parallelUploads: 1,
                            params: {
                                file_type: "card"
                            },
                            renameFile: function( file )
                            {
                                var newName = encrypt( file.name, password_local );
                                return newName;
                            }
                        }
                    )
                    .on( "addedfile", function( file )
                    {
                        var ext = file.name.split( "." ).pop();
                        this.options.params[ "extension" ] = ext;
                        
                        $( "#card_dropzone > .dz-default.dz-message" ).remove();
                    } )
                    .on( "success", function( p ) {
                        var response = JSON.parse( p.xhr.response );
                        if( response.error )
                            toastr.error( response.message );
                    } )
                    .on( "error", function( p )
                    {
                        toastr.error( "Error" );
                    } );
                } );

                $( function()
                {
                    new Dropzone(
                        "#upload_file_dropzone",
                        {
                            url: "{{ url_for( 'afis.upload_file', target_uuid = target_uuid, cnm_uuid = cnm_uuid ) }}",
                            timeout: 600000,
                            createImageThumbnails: false,
                            parallelUploads: 1,
                            params: {
                                file_type: "screenshot"
                            },
                            renameFile: function( file )
                            {
                                var newName = encrypt( file.name, password_local );
                                return newName;
                            }
                        }
                    )
                    .on( "addedfile", function( file )
                    {
                        var ext = file.name.split( "." ).pop();
                        this.options.params[ "extension" ] = ext;
                        
                        $( "#upload_file_dropzone > .dz-default.dz-message" ).remove();
                    } )
                    .on( "success", function( p ) {
                        var response = JSON.parse( p.xhr.response );
                        if( response.error )
                            toastr.error( response.message );
                    } )
                    .on( "error", function( p )
                    {
                        toastr.error( "Error" );
                    } );
                } );
            {% endif %}
            
            //
            _.forEach( [ "quality", "is_personal_cnm", "is_a_good_cnm" ], function( f )
            {
                $( "#" + f + "_select" )
                    .chosen( {
                        search_contains: true,
                        width: "100%"
                    } );
            } );
            
            _.forEach( [ "quality" ], function( f ){
                $( "#" + f + " > select" ).on( "change", function(){ update_field_db_multi( f ); } )
            } );
            _.forEach( [ "is_personal_cnm", "is_a_good_cnm" ], function( f ){
                $( "#" + f + " > select" ).on( "change", function(){ update_field_db_single( f ); } )
            } );
            $( "#is_personal_cnm > select" ).on( "change", is_personal_cnm_sync_with_rank );
            
            //
            $( "#icnml_navigation_afis" )
                .addClass( "activated" );
            
            {% if admin %}
                $( "#navloc" ).append(
                    $( "<a />" )
                        .attr( "href", "{{ url_for( 'submission.admin_submission_list' ) }}" )
                        .text( "Submissions" )
                )
                .append(
                    $( "<span />" ).text( ">" )
                )
                .append(
                    $( "<a />" )
                        .attr( "href", "{{ url_for( 'submission.admin_submission_home', submission_id = submission_id ) }}" )
                        .text( "{{ username }}" )
                )
                .append(
                    $( "<span />" ).text( ">" )
                )
                .append(
                    $( "<a />" )
                        .attr( "href", "{{ url_for( 'afis.admin_show_target_list', submission_uuid = submission_id ) }}" )
                        .text( "Targets" )
                )
                .append(
                    $( "<span />" ).text( ">" )
                )
                .append(
                    $( "<a />" )
                        .attr( "href", "{{ url_for( 'afis.admin_show_target', uuid = target_uuid ) }}" )
                        .text( "{{ finger_name }}" )
                )
                .append(
                    $( "<span />" ).text( ">" )
                )
                .append(
                    $( "<span />" ).text( cnm_nickname_navbar )
                )
            {% else %}
                $( "#navloc" ).append(
                    $( "<a />" )
                        .attr( "href", "{{ url_for( 'afis.list_folders' ) }}" )
                        .text( "AFIS targets" )
                )
                .append(
                    $( "<span />" ).text( ">" )
                )
                .append(
                    $( "<a />" )
                        .attr( "href", "{{ url_for( 'afis.show_folder', uuid = target_uuid ) }}" )
                        .text( "{{ target_uuid[ 0:18 ] }}" )
                )
                .append(
                    $( "<span />" ).text( ">" )
                )
                .append(
                    $( "<a />" )
                        .attr( "href", "{{ url_for( 'afis.upload_cnm_list_page', uuid = target_uuid ) }}" )
                        .text( "All CNM" )
                )
                .append(
                    $( "<span />" ).text( ">" )
                )
                .append(
                    $( "<span />" ).text( cnm_nickname_navbar )
                )
            {% endif %}
        </script>
    </body>
</html>

