<!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 }}";
        </script>
        
        <style type="text/css">
            :root {
                --imgsize: 300px;
            }
            .icnml_list_of_boxes {
                grid-template-columns: repeat( auto-fill, calc( var( --imgsize ) + 2 * var( --imgmargin ) ) );
            }
        </style>
    </head>
    <body class="icnml_main_layout">
        {% include "header.html" %}
        {% include navigation %}
        
        <div class="icnml_content">
            <div class="icnml_list_of_boxes">
                {% for tenprint in tenprint_cards %}
                    <div style="margin-bottom: 20px">
                        <div class="ui-widget-header ui-corner-top icnml_box_top">{{ tenprint[ 'username' ] }}</div>
                        <div class="ui-widget-content ui-corner-bottom icnml_box_content">
                            <div id="edit_{{ tenprint[ 'id' ] }}"
                                 class="icnml_pointer"
                                 style="background-image: url( {{ url_for( 'image.image_file_serve', file_id = tenprint[ 'uuid' ] ) }} )"></div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <div id="zoom_slider"></div>
        </div>
        
        <script type="text/javascript">
            $( "#icnml_navigation_submissions" )
                .addClass( "activated" );
            
            {% for tenprint in tenprint_cards %}
                $( "#edit_{{ tenprint[ 'id' ] }}" ).on( "click", function()
                {
                    window.location.href = "{{ url_for( 'submission.admin_tenprint', submission_id = tenprint[ 'submission_uuid' ], tenprint_id = tenprint[ 'uuid' ] ) }}";
                })
            {% endfor %}
            
            $( "#navloc" ).append(
                $( "<a />" )
                    .attr( "href", "{{ url_for( 'submission.admin_submission_list' ) }}" )
                    .text( "Submissions" )
            )
            .append(
                $( "<span />" ).text( ">" )
            )
            .append(
                {% if submission_uuid is not none %}
                    $( "<a />" )
                        .attr( "href", "{{ url_for( 'submission.admin_submission_home', submission_id = submission_uuid ) }}" )
                        .text( "{{ selector }}" )
                {% else %}
                    $( "<span />" ).text( "{{ selector }}" )
                {% endif %}
            )
            .append(
                $( "<span />" ).text( ">" )
            )
            .append(
                $( "<span />" ).text( "Tenprint cards" )
            )
        </script>
    </body>
</html>
        
