<!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' ) }}">
        <link type="text/css" rel="stylesheet" href="{{ url_for( 'files.send_app_files', subpath = 'dropzone.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_list_of_boxes_outer {
                border: 1px solid #ccc;
                border-radius: 10px;
                padding: 10px;
                margin-top: 10px;
                margin-bottom: 20px;
            }
            .icnml_list_of_boxes_desc {
                position: relative;
                top: -19px;
                padding-left: 10px;
                padding-right: 20px;
                width: fit-content;
                width: -moz-fit-content;
                background-color: rgb( 238, 238, 238 );
            }
        </style>

        <script type="text/javascript">
            baseurl = "{{ baseurl }}";
            var folder_id = "{{ folder_id }}";
            
            var segments_position_code = {};
            {% for key, value in segments_position_code.iteritems() %}
                segments_position_code[ {{ key }} ] = "{{ value }}";
            {% endfor %}
            
            {% if admin %}
                var remove_annotation_from_db = function( annotation )
                {
                    $.ajax( {
                        url: "{{ url_for( 'afis.admin_remove_illustration', folder_id = folder_id, fpc = fpc ) }}",
                        dataType: "json",
                        method: "POST",
                        data: {
                            uuid: annotation
                        },
                        success: function( data )
                        {
                            if( data.error )
                            {
                                toastr.error( "Error while deleting the illustration" );
                            } else {
                                $( "#annotations_" + annotation + "_outer" ).hide();
                            }
                        },
                        error: function()
                        {
                            toastr.error( "Error while deleting the illustration" );
                        }
                    } );
                }
            {% endif %}
        </script>
    </head>
    <body class="icnml_main_layout">
        {% include "header.html" %}
        {% include navigation %}
        
        <div class="icnml_content">
            <div class="icnml_list_of_boxes_outer">
                <div class="icnml_list_of_boxes_desc">Annotation illustration PiAnoS ({{ annotations|length }})</div>
                <div class="icnml_list_of_boxes">
                    {% for a in annotations %}
                        <div id="annotations_{{ a[ 'uuid' ] }}_outer">
                            <div class="ui-widget-header ui-corner-top icnml_box_top">{{ a[ 'id' ] }}</div>
                            <div class="ui-widget-content ui-corner-bottom icnml_box_content">
                                <div
                                    class="icnml_pointer"
                                    id="annotation_{{ a[ 'uuid' ] }}"
                                    style="background-image: url( {{ url_for( 'afis.admin_get_annotation_image', a_uuid = a[ 'uuid' ], folder_id = folder_id) }}  )">
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                    {% if admin %}
                        <div>
                            <div class="ui-widget-header ui-corner-top icnml_box_top">Add illustration</div>
                            <div class="ui-widget-content ui-corner-bottom icnml_box_content">
                                <div>
                                    <div id="segment_annotation_illustration_dropzone" class="dropzone icnml_pointer"></div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
            {% if tenprints_list|length > 0 %}
                <div class="icnml_list_of_boxes_outer">
                    <div class="icnml_list_of_boxes_desc">Tenprint ({{ tenprints_list|length }})</div>
                    <div class="icnml_list_of_boxes">
                        {% for tenprint in tenprints_list %}
                            <div>
                                <div class="ui-widget-header ui-corner-top icnml_box_top">Segment {{ tenprint[ 'pc' ] }}</div>
                                <div class="ui-widget-content ui-corner-bottom icnml_box_content">
                                    <div
                                        class="icnml_pointer"
                                        id="segment_preview_{{ tenprint[ 'file_uuid' ] }}"
                                        style="background-image: url( {{ url_for( 'image.image_segment_serve', tenprint_id = tenprint[ 'tenprint' ], pc = tenprint[ 'pc' ] ) }}  )">
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
            {% if mark_list|length > 0 %}
                <div class="icnml_list_of_boxes_outer">
                    <div class="icnml_list_of_boxes_desc">Marks ({{ mark_list|length }})</div>
                    <div class="icnml_list_of_boxes">
                        {% for mark in mark_list %}
                            <div>
                                <div class="ui-widget-header ui-corner-top icnml_box_top">Mark {{ mark[ 'id' ] }}</div>
                                <div class="ui-widget-content ui-corner-bottom icnml_box_content">
                                    <div
                                        class="icnml_pointer"
                                        id="mark_preview_{{ mark[ 'uuid' ] }}"
                                        style="background-image: url( {{ url_for( 'image.image_file_serve', file_id = mark[ 'uuid' ] ) }} )">
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
            <div id="zoom_slider"></div>
        </div>
        
        <script type="text/javascript">
            {% if admin %}
                Dropzone.autoDiscover = false;

                $( function()
                {
                    new Dropzone(
                        "#segment_annotation_illustration_dropzone",
                        {
                            url: "{{ url_for( 'afis.admin_add_illustration', folder_id = folder_id, fpc = fpc ) }}",
                            timeout: 600000,
                            createImageThumbnails: false,
                            parallelUploads: 1,
                            params: {
                                "type": "annotation",
                                "folder_id": "{{ folder_id }}",
                                "fpc": "{{ fpc }}"
                            }
                        }
                    )
                    .on( "addedfile", function( file )
                    {
                        $( "#segment_annotation_illustration_dropzone > .dz-default.dz-message" ).remove();
                    } )
                    .on( "queuecomplete", function()
                    {
                        window.location.reload();
                    } )
                    .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" );
                    } );
                } );
                
                {% for a in annotations %}
                    $( "#annotation_{{ a[ 'uuid' ] }}" ).on( "contextmenu", function( event )
                    {
                        event.preventDefault();
                        var target = $( event.target ).attr( "id" ).replace( "annotation_", "" );
                        remove_annotation_from_db( target );

                        return false;
                    } );
                {% endfor %}
            {% endif %}

            $( "#icnml_navigation_afis" )
                .addClass( "activated" );
            
            {% if admin %}
                $( "#navloc" ).append(
                    $( "<a />" )
                        .attr( "href", "{{ url_for( 'afis.admin_list_folders' ) }}" )
                        .text( "AFIS folders" )
                ).append(
                    $( "<span />" ).text( ">" )
                ).append(
                    $( "<a />" )
                        .attr( "href", "{{ url_for( 'afis.admin_folder_show', folder_id = folder_id ) }}" )
                        .text( "{{ username }}" )
                ).append(
                    $( "<span />" ).text( ">" )
                ).append(
                    $( "<span />" ).text( segments_position_code[ {{ fpc }} ] )
                );
            {% else %}
                $( "#navloc" ).append(
                    $( "<a />" )
                        .attr( "href", "{{ url_for( 'afis.list_folders' ) }}" )
                        .text( "AFIS folders" )
                ).append(
                    $( "<span />" ).text( ">" )
                ).append(
                    $( "<a />" )
                        .attr( "href", "{{ url_for( 'afis.folder_show', folder_id = folder_id ) }}" )
                        .text( "{{ username }}" )
                ).append(
                    $( "<span />" ).text( ">" )
                ).append(
                    $( "<span />" ).text( segments_position_code[ {{ fpc }} ] )
                );
            {% endif %}
        </script>
    </body>
</html>
