<!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' ) }}">
        
        <script type="text/javascript">
            baseurl = "{{ baseurl }}";
            
            var password_local = decrypt( sessionStorage.getItem( "session_key" ), "{{ session_security_key }}" );
            var nickname = decrypt( "{{ nickname }}", password_local );
            var tp_filename = decrypt( "{{ tp_filename }}", password_local );
            
            var update_general_pattern_db = function( gp_id, gp_name )
            {
                $( ".gp_checked" ).css( "visibility", "hidden" )
                $( "#gp_" + gp_id + "_checked" ).css( "visibility", "visible" );
                
                $.ajax( {
                    url: "{{ url_for( 'submission.submission_segment_set_gp', submission_id = submission_id, pc = pc ) }}",
                    dataType: "json",
                    method: "POST",
                    data: {
                        gp: gp_name
                    },
                    success: function( data )
                    {
                        console.log( data );
                    },
                    error: function( data )
                    {
                        $( "#gp_" + gp_id + "_checked" ).css( "visibility", "hidden" );
                        toastr.error( "Error while saving the general pattern" );
                    }
                } );
            }
        </script>
        
        <style type="text/css">
            .mark_preview {
                height: 100%;
                width: 100%;
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
            }
            #general_pattern {
                margin-top: 5px;
                display: grid;
                grid-template-columns: repeat( 4, 1fr );
                grid-gap: 10px;
            }
            #general_pattern > div {
                padding-top: 40px;
                padding-bottom: 40px;
            }
            #general_pattern > div > span {
                margin-top: 35px;
                margin-bottom: 35px;
            }
            .icnml_box_fields {
                margin-bottom: 20px;
            }
            .gp_checked {
                visibility: hidden;
                position: absolute;
                margin-top: 0px;
                margin-bottom: 0px;
                right: -8px;
                top: -8px;
            }
            #next_div {
                margin-top: 30px;
                width: 100%;
            }
            #next_div > a {
                padding: 10px;
                width: calc( 100% - 23px );
            }
        </style>
    </head>
    <body class="icnml_main_layout">
        {% include "header.html" %}
        {% include navigation %}
        
        <div class="icnml_content">
            <div class="icnml_lp_oneperpage">
                <form>
                    <div class="ui-widget-header ui-corner-top icnml_box_top">{{ pc_name }}</div>
                    <div class="ui-widget-content ui-corner-bottom icnml_box_content_central">
                        <div class="icnml_lp_cardbox">
                            <div
                                class="mark_preview"
                                style="background-image: url( {{ url_for( 'image.image_segment_serve', tenprint_id = tenprint_id, pc = pc ) }} )">
                            </div>
                            <div>
                                <div class="icnml_box_fields">
                                    <div>Position code</div>
                                    <div>{{ pc_name }}</div>
                                </div>
                                
                                {% if tp_type == "finger" %}
                                    <div>General pattern</div>
                                    <div id="general_pattern">
                                        
                                        {% macro gp_div( gp_id, gp_name ) %}
                                            <div class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="general_pattern_{{ gp_id }}">
                                                <span class="ui-button-text">{{ gp_name|title }}</span>
                                                <div class="gp_checked" id="gp_{{ gp_id }}_checked">
                                                    <svg width="20px" height="20px" viewBox="0 0 54 54" version="1.1">
                                                        <g id="" fill-rule="evenodd">
                                                            <path
                                                                d="M23.5,31.8431458 L17.5852419,25.9283877 C16.0248253,24.3679711 13.4910294,24.366835 11.9289322,25.9289322 C10.3700136,27.4878508 10.3665912,30.0234455 11.9283877,31.5852419 L20.4147581,40.0716123 C20.5133999,40.1702541 20.6159315,40.2626649 20.7218615,40.3488435 C22.2835669,41.8725651 24.794234,41.8626202 26.3461564,40.3106978 L43.3106978,23.3461564 C44.8771021,21.7797521 44.8758057,19.2483887 43.3137085,17.6862915 C41.7547899,16.1273729 39.2176035,16.1255422 37.6538436,17.6893022 L23.5,31.8431458 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z"
                                                                stroke="#747474" stroke-opacity="0.198794158"
                                                                fill="#109618" fill-opacity="0.816519475"
                                                            ></path>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </div>
                                        {% endmacro %}
                                        
                                        {{ gp_div( 'loop', 'loop' ) }}
                                        {{ gp_div( 'whorl', 'whorl' ) }}
                                        {{ gp_div( 'arch', 'arch' ) }}
                                        {{ gp_div( 'cpl', 'central pocket loop' ) }}
                                        {{ gp_div( 'dl', 'double loop' ) }}
                                        
                                        {{ gp_div( 'ma', 'missing/amputated' ) }}
                                        {{ gp_div( 'sm', 'scarred/mutilated' ) }}
                                        
                                        {{ gp_div( 'unknown', 'unknown' ) }}
                                    </div>
                                {% endif %}
                                
                                {% if next_pc %}
                                    <div id="next_div">
                                        <a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="next_button" href="{{ url_for( 'submission.submission_segment', submission_id = submission_id, tenprint_id = tenprint_id, pc = next_pc ) }}">
                                            <span class="ui-button-text" id="segmentation_button_span_text">Next segment</span>
                                        </a>
                                    </div>
                                {% else %}
                                    <div id="next_div">
                                        <a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="next_button" href="{{ url_for( 'submission.submission_tenprint_list', submission_id = submission_id ) }}">
                                            <span class="ui-button-text" id="segmentation_button_span_text">List of tenprint cards</span>
                                        </a>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        /*
         *    General pattern buttons
         */
        {% macro gp_action( gp_id, gp_name ) %}
            $( "#general_pattern_{{ gp_id }}" ).on( "click", function()
            {
                update_general_pattern_db( "{{ gp_id }}", "{{ gp_name }}" );
            } );
        {% endmacro %}
        
        {{ gp_action( 'loop', 'loop' ) }}
        {{ gp_action( 'whorl', 'whorl' ) }}
        {{ gp_action( 'arch', 'arch' ) }}
        {{ gp_action( 'cpl', 'central pocket loop' ) }}
        {{ gp_action( 'dl', 'double loop' ) }}
        
        {{ gp_action( 'ma', 'missing/amputated' ) }}
        {{ gp_action( 'sm', 'scarred/mutilated' ) }}
        
        {{ gp_action( 'unknown', 'unknown' ) }}
        
        //
            
        $( "#gp_{{ current_gp }}_checked" ).css( "visibility", "visible" );
        
        /*
         *    Navigation UI update
         */
        
        $( "#icnml_navigation_submissions" )
            .addClass( "activated" );
        
        $( "#navloc" ).append(
            $( "<a />" )
                .attr( "href", "{{ url_for( 'submission.submission_list' ) }}" )
                .text( "Submissions" )
        )
        .append(
            $( "<span />" ).text( ">" )
        )
        .append(
            $( "<a />" )
                .attr( "href", "{{ url_for( 'submission.submission_upload_tenprintmark', submission_id = submission_id ) }}" )
                .text( nickname )
        )
        .append(
            $( "<span />" ).text( ">" )
        )
        .append(
            $( "<a />" )
                .attr( "href", "{{ url_for( 'submission.submission_tenprint_list', submission_id = submission_id ) }}" )
                .text( "Tenprints" )
        )
        .append(
            $( "<span />" ).text( ">" )
        )
        .append(
            $( "<a />" )
                .attr( "href", "{{ url_for( 'submission.submission_tenprint', submission_id = submission_id, tenprint_id = tenprint_id ) }}" )
                .text( tp_filename )
        )
        .append(
            $( "<span />" ).text( ">" )
        )
        .append(
            $( "<a />" )
                .attr( "href", "{{ url_for( 'submission.submission_tenprint_segments_list', submission_id = submission_id, tenprint_id = tenprint_id ) }}" )
                .text( "Segments" )
        )
        .append(
            $( "<span />" ).text( ">" )
        )
        .append(
            $( "<span />" ).text( "{{ pc_name }}" )
        );
    </script>
</html>
        
