<!DOCTYPE html>
<html>

<head>
    <title>TissUUmaps</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta charset="utf-8"/>
    <!--<script src="https://d3js.org/d3.v4.min.js"></script>-->
    <!--<script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script>-->
    <script src="{{ url_for('static', filename='js/d3.v4.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/d3-scale-chromatic.v0.3.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/jquery-3.5.1.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/chosen.jquery.min.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/chosen.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/tmcpmain.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/TissueMapsTheme.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/tm-icon-style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/dropdowns.css') }}">
</head>

<body style="background-color:#ccc;">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" target="_blank" href="https://tissuumaps.research.it.uu.se/"><img style="height:50px; margin-top:-15px; overflow: visible; z-index: 9999;" src="{{ url_for( 'static', filename='misc/uulogowhitetuum.png' ) }}"> </a>
        </div>
        <div class="navbar-collapse collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav" id="topmenu-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    File
                    </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                <span class="nav-label">Open File</span>
                            </a>
                            <ul class="dropdown-menu">
                                {% for entry in root_dir.children recursive %} {% if entry.url_path %}
                                <li>
                                    <a href="{{ url_for('slide', path=entry.url_path) }}">
                                        <span>{{ entry.name }}</span>
                                    </a>
                                </li>
                                {% else %}
                                <!--<span class='title'>{{ entry.name }}</span>-->
                                {% endif %} {% if entry.children %}
                                <li class="dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                        <span class="nav-label">{{ entry.name }}</span>
                                    </a>
                                    <ul class="dropdown-menu">
                                        {{ loop(entry.children) }}
                                    </ul>
                                </li>
                                {% endif %} {% else %}
                                <!--<li class="none">None</li>-->
                                {% endfor %}
                            </ul>
                        </li>
                        {% if jsonProject %}
                        <li>
                            <a href="#" id="project_settings_menu">
                                <span>Project advanced settings</span>
                            </a>
                        </li>
                        {% endif %}
                        <li>
                            <a href="#" id="save_project_menu">
                                <span>Save project</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" id="capture_viewport">
                                <span>Capture viewport</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item dropdown" id="plugin-dropdown" style="display:none;">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Plugins
                    </a>
                    <ul class="dropdown-menu">
                        {% for plugin in plugins %} {% if plugin %}
                        <li class="dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                <span class="nav-label">{{ plugin }}</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li id="dropdown-menu-{{ plugin }}">
                                </li>
                            </ul>
                        </li>
                        {% endif %}{% endfor %}
                    </ul>
                </li>
                <li>
                    <a id="project_title" href="#"> Slide Name</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <!-- Row for viewer  -->
            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" style="max-width: calc(100% - 506px);" id="ISS_viewer_container">
                <!-- The id is what OSD will look for to draw the viewer, the class is our own css to stylize 
                The ID will give the prefix for all the objects related to the viewer in this case ISS-->
                <div id="ISS_viewer" class="ISS_viewer">
                </div>
                <!-- Global marker size slider -->
                <div id="ISS_globalmarkersize">
                    <label>Marker size</label><br>
                    <input class="form-control" type="range" style="box-shadow: none;"
                        id="ISS_globalmarkersize_text"
                        value="100" min="0" max="500" step="10"
                        oninput="document.getElementById('ISS_globalmarkersize_label').innerHTML = this.value;"/>
                    <em class="range-label" id="ISS_globalmarkersize_label">100</em>
                </div>
                <div class="btn btn-secondary" id="ISS_collapse_btn">&gt;</div>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 ISS_menu" id="ISS_menu" style="overflow-y:hidden; overflow-x:auto;min-width: 506px;">
                <div class="row row-fullheight" style="padding-bottom: 0px;">
                    <!-- Level 0 tabs -->
                    <ul class="nav nav-tabs L0-tabs">
                        <li> <a href="#markers-iss-gui" data-toggle="tab" aria-expanded="true"
                                class="active main-child" id="title-tab-markers">Gene expression</a></li>
                        <li> <a href="#markers-cp-gui" data-toggle="tab"
                                aria-expanded="false" id="title-tab-CPmarkers">Cell morphology</a></li>
                        <li> <a href="#markers-regions-gui" data-toggle="tab"
                                aria-expanded="false" id="title-tab-regions">Regions</a></li>
                        <li> <a href="#image-gui" data-toggle="tab"
                                aria-expanded="false" id="title-tab-image">Image layers</a></li>

                    </ul>

                    <div id="TM-tabs" class="tab-content extended-height" style="overflow-y:auto;">
                        <!-- TAB 1.1 ISS data  -------------------------------------------------------------------------------- -->
                        <div class="tab-pane active" id="markers-iss-gui" style="height:100%;">
                            <div class="panel panel-default" style="height:100%;">
                                <div class="panel-body row-fullheight">
                                    <!-- 1.1 Row download -->
                                    <div id="ISS_rowDownloadMarkers">
                                    </div>
                                    <div class="row" id="ISS_csv_progress_parent" style="visibility:hidden; display:none; margin: 0px 10px 0px 10px;">
                                        Loading markers...
                                        <div class="progress">
                                            <div id="ISS_csv_progress" class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%; " aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                     <!-- 1.1.1 Row of file selection -->
                                     <div class="row" id="ISS_data_panel">
                                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                            <div id="ISS_input_csv" style="margin-bottom: 5px;">
                                                <label id="label_ISS_csv" for="ISS_csv">Import gene expression from CSV file:</label>
                                                <input class="form-control-file form-control form-control-sm" type="file" id="ISS_csv" name="ISS_csv"
                                                    accept=".csv,.tsv,.txt">
                                                <script type="text/javascript">
                                                    d3.select("#ISS_csv")
                                                        .on("change", function () {
                                                            var file = d3.event.target.files[0];
                                                            if (file) {
                                                                var reader = new FileReader();
                                                                reader.onloadend = function (evt) {
                                                                    var dataUrl = evt.target.result;
                                                                    dataUtils.readCSV(dataUrl);
                                                                };
                                                                reader.readAsDataURL(file);
                                                            }
                                                        });
                                                </script>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 1.2 Row header selection -->
                                    <div class="row" id="ISS_csv_headers"
                                        style="visibility: hidden; display:none;">
                                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                            <div class="row">
                                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                    <label for="ISS_barcode_header">Barcode
                                                        column</label>
                                                </div>
                                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                    <select class="custom-select"
                                                        id="ISS_barcode_header">
                                                        <option value="null"> </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                    <label for="ISS_name_header">Name column</label>
                                                </div>
                                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                    <select class="custom-select" id="ISS_name_header">
                                                        <option value="null"></option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                    <label for="ISS_X_header">X column</label>
                                                </div>
                                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                    <select class="custom-select" id="ISS_X_header">
                                                        <option value="null"></option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                    <label for="ISS_Y_header">Y column</label>
                                                </div>
                                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                    <select class="custom-select" id="ISS_Y_header">
                                                        <option value="null"></option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                    <label for="ISS_key_header">Key</label>
                                                </div>
                                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                    <select class="custom-select" id="ISS_key_header">
                                                        <option value="letters">Barcode</option>
                                                        <option value="gene_name">Name</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <a href="#advancedSettings" data-toggle="collapse" aria-expanded="false">[Advanced settings]</a>
                                            </div>
                                            <div id="advancedSettings" class="collapse">
                                                <div class="row">
                                                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                        <label for="ISS_color_header">Color (only if one color per marker)</label>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                        <select class="custom-select" id="ISS_color_header">
                                                            <option value="null"></option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                        <label for="ISS_scale_header">Scale (only if one scale per marker)</label>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                        <select class="custom-select" id="ISS_scale_header">
                                                            <option value="null"></option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                        <label for="ISS_piechart_header">Pie-Charts</label>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                        <select class="custom-select" id="ISS_piechart_header">
                                                            <option value="null"></option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">

                                                </div>
                                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                                    <button id="ISS_bringmarkers_btn"
                                                        class="btn btn-primary" type="button">
                                                        Load markers</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 1.3 Row for barcode search -->
                                    <div class="row" id="ISS_searchmarkers_row" style="display:None;">
                                        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                                            <label for="ISS_search">Filter:</label>
                                            <input class="form-control" type="text" id="ISS_search">
                                        </div>
                                    </div>
                                    <!-- 1.4 Row for markers -->
                                    <div class="row extended-height" id="ISS_markers">

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- TAB 1.2 CP data  -------------------------------------------------------------------------------- -->
                        <div class="tab-pane" id="markers-cp-gui" style="height:100%;">
                            <div class="panel panel-default" style="height:100%;">
                                <div class="panel-body">
                                    <!-- 1.1 Row download -->
                                    <div id="ISS_rowDownloadMarkersCP">
                                    </div>
                                    <div class="row" id="ISS_CP_csv_progress_parent" style="visibility:hidden; display:none; margin: 0px 10px 0px 10px;">
                                        Loading markers...
                                        <div class="progress">
                                            <div id="ISS_CP_csv_progress" class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%; " aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                    <!-- 2.1 Row of file selection -->
                                    <div class="row" id="CP_data_panel">
                                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                            <div id="CP_input_csv" style="margin-bottom: 5px;">
                                                <label id="label_CP_csv" for="CP_csv">Import cell morphology from CSV file:</label>
                                                <input class="form-control-file form-control form-control-sm" type="file" id="CP_csv" name="CP_csv"
                                                    accept=".csv,.tsv,.txt">
                                                <script type="text/javascript">
                                                    d3.select("#CP_csv")
                                                        .on("change", function () {
                                                            var file = d3.event.target.files[0];
                                                            if (file) {
                                                                var reader = new FileReader();
                                                                reader.onloadend = function (evt) {
                                                                    var dataUrl = evt.target.result;
                                                                    CPDataUtils.readCSV(dataUrl);
                                                                };
                                                                reader.readAsDataURL(file);
                                                            }
                                                        });
                                                </script>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 2.2 Row header selection -->
                                    <div class="row" id="CP_csv_headers"
                                        style="visibility: hidden; display:none;">
                                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                            <div class="row">
                                                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                                                    <label for="CP_key_header">Select global ID</label>
                                                </div>
                                                <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                                                    <select class="custom-select" id="CP_key_header">
                                                        <option value="null"> </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                                                    <label for="CP_property_header">Property</label>
                                                </div>
                                                <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                                                    <select class="custom-select"
                                                        id="CP_property_header">
                                                        <option value="null"> </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                                                    <label for="CP_X_header">X column</label>
                                                </div>
                                                <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                                                    <select class="custom-select" id="CP_X_header">
                                                        <option value="null"></option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                                                    <label for="CP_Y_header">Y column</label>
                                                </div>
                                                <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                                                    <select class="custom-select" id="CP_Y_header">
                                                        <option value="null"></option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                                                    <label for="CP_colorscale">Color scale</label>
                                                </div>
                                                <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                                                    <select class="custom-select" id="CP_colorscale">
                                                        <option value="null"></option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">

                                                </div>
                                                <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                                                    <button id="CP_bringmarkers_btn"
                                                        class="btn btn-primary" type="button">
                                                        Select</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- TAB 1.3 Region data ----------------------------------------------------------------------------- -->
                        <div class="tab-pane" id="markers-regions-gui" style="height:100%;">
                            <div class="panel panel-default" style="height:100%;">
                                <div class="panel-body" style="height:100%;">
                                    <div class="row row-fullheight">
                                        <!-- Tabs 1.3.0 region subtabs -->
                                        <ul class="nav nav-tabs L2-tabs">
                                            <li><a href="#markers-regions-project-gui" data-toggle="tab" aria-expanded="false" class="active main-child">Regions</a></li>
                                            <li><a href="#markers-regions-import-gui" data-toggle="tab"
                                                    aria-expanded="false">Import</a></li>
                                            <li><a href="#markers-regions-export-gui" data-toggle="tab"
                                                    aria-expanded="false">Export</a></li>
                                        </ul>
                                        <div id="markers-region-subtabs" class="tab-content extended-height">
                                            <!-- Tabs 1.3.1 -->
                                            <div class="tab-pane active" id="markers-regions-project-gui" style="height:100%;">
                                                <div class="panel panel-default" style="height:100%;">
                                                    <div class="panel-body row-fullheight">
                                                        <div id="ISS_rowDownloadRegions">
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                                                                <button id="ISS_drawregions_btn"
                                                                    class="btn btn-secondary" type="button">
                                                                    Draw regions</button>
                                                            </div>
                                                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                                                                <button id="ISS_fillregions_btn"
                                                                    class="btn btn-primary" type="button"> Fill
                                                                    regions</button>
                                                            </div>
                                                        </div>
                                                        <div class="extended-height" id="markers-regions-div">
                                                            <div class="row" id="markers-regions-panel">

                                                            </div>                                                                   
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Tabs 1.3.2 -->
                                            <div class="tab-pane" id="markers-regions-import-gui">
                                                <div class="panel panel-default">
                                                    <div class="panel-body">
                                                        <div class="row">
                                                            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                                                                <input
                                                                    class="form-control-file form-control form-control-sm"
                                                                    type="file" id="ISS_region_files_import"
                                                                    name="files[]" />
                                                                <br>
                                                            </div>
                                                            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                                                                <button id="ISS_import_regions"
                                                                    class="btn btn-primary" type="button">
                                                                    Import</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Tabs 1.3.3 -->
                                            <div class="tab-pane" id="markers-regions-export-gui">
                                                <div class="panel panel-default">
                                                    <div class="panel-body">
                                                        <div class="row">
                                                            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                                                                <label for="ISS_region_file_name">Download
                                                                    regions for later use</label>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                                                                <input class="form-control form-control-sm"
                                                                    type="text" id="ISS_region_file_name"
                                                                    placeholder="regions.json"
                                                                    value="regions.json">
                                                            </div>
                                                            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                                                                <button id="ISS_export_regions"
                                                                    class="btn btn-primary" type="button">
                                                                    Export</button>
                                                            </div>
                                                        </div>
                                                        <br>
                                                        <div class="row">
                                                            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                                                                <label for="ISS_region_csv_name">Download
                                                                    expression in regions</label>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                                                                <input class="form-control form-control-sm"
                                                                    type="text" id="ISS_region_csv_name"
                                                                    placeholder="regions.csv"
                                                                    value="regions.csv" />
                                                            </div>
                                                            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                                                                <button id="ISS_export_regions_csv"
                                                                    class="btn btn-primary" type="button">
                                                                    Export</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- TAB 1.4 Overlay data ----------------------------------------------------------------------------- -->
                        <div class="tab-pane" id="image-gui" style="height:auto; overflow:auto;">
                            <div class="panel panel-default" style="height:100%;">
                                <div class="panel-body">
                                    <div class="row" id="image-overlay-panel" style="overflow-x:auto;">
                                        
                                    </div>
                                    <br/>
                                    {% set layerCount = [] %}
                                    {% for entry in folder_dir.children recursive %}
                                        {% if entry.url_path %}
                                            {% if url_for('slide', path=entry.url_path)+".dzi" != slide_url %}
                                                {% if layerCount.append(1) %}{% endif %}
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                                    {% if layerCount|length > 0 %}
                                        <select id="layerSelect">
                                            {% for entry in folder_dir.children recursive %}
                                                {% if entry.url_path %}
                                                    {% if url_for('slide', path=entry.url_path)+".dzi" != slide_url %}
                                                        <option value="{{ url_for('slide', path=entry.url_path) }}.dzi">
                                                            {{ entry.name }}
                                                        </option>
                                                    {% endif %}
                                                {% endif %}
                                            {% endfor %}
                                        </select>
                                        <button id="ISS_add_layer_btn" class="btn btn-primary btn-sm" type="button">
                                            Add image as a layer</button>
                                    {% endif %}
                                    <div class="row">
                                        <a href="#filterSettings" data-toggle="collapse" aria-expanded="false">[Filter settings]</a>
                                    </div>
                                    <div class="row collapse" id="filterSettings">
                                        
                                    </div>
                                </div>
                            </div> <!-- end of a main panel -->
                        </div> <!-- end of image-gui-->
                    </div> <!-- end of TM-tabs-->
                </div> <!-- end of Level 0 tabs -->
            </div> <!-- end of lateral panel -->
        </div><!-- end of single row -->
    </div><!-- end of container-fuild-->
    <div class="modal in" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true" style="display:None;">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                
                <div class="modal-header">
                    <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>-->
                    <h4 class="modal-title" id="modalLabelSmall">Loading</h4>
                </div>
                
                <div class="modal-body">
                Operation in progress, please wait.
                </div>
            
            </div>
        </div>
    </div>
</body>
<script src="{{ url_for('static', filename='js/bootstrap.4.0.0.bundle.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/openseadragon.2.4.2.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/caman.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/openseadragon-filtering.js') }}"></script>
<script src="{{ url_for('static', filename='js/openseadragon-svg-overlay.js') }}"></script>
<script src="{{ url_for('static', filename='js/openseadragon-scalebar.js') }}"></script>
<script src="{{ url_for('static', filename='js/utils/interfaceUtils.js') }}"></script>
<script src="{{ url_for('static', filename='js/utils/dataUtils.js') }}"></script>
<script src="{{ url_for('static', filename='js/utils/CPDataUtils.js') }}"></script>
<script src="{{ url_for('static', filename='js/utils/markerUtils.js') }}"></script>
<script src="{{ url_for('static', filename='js/utils/OSDViewerUtils.js') }}"></script>
<script src="{{ url_for('static', filename='js/utils/HTMLElementUtils.js') }}"></script>
<script src="{{ url_for('static', filename='js/utils/regionUtils.js') }}"></script>
<script src="{{ url_for('static', filename='js/utils/overlayUtils.js') }}"></script>
<script src="{{ url_for('static', filename='js/utils/filterUtils.js') }}"></script>
<script src="{{ url_for('static', filename='js/utils/geometryUtils.js') }}"></script>
<script src="{{ url_for('static', filename='js/utils/glUtils.js') }}"></script>
<script src="{{ url_for('static', filename='js/utils/projectUtils.js') }}"></script>
<script src="{{ url_for('static', filename='js/tmapp.js') }}"></script>
{% for plugin in plugins %}{% if plugin %}
    <script src="/plugin/{{ plugin }}.js"></script>
{% endif %}{% endfor %}
<script>
    document.getElementById("project_title").innerText = "{{ slide_filename }}";
    // ----------
    $(document).ready(function() {
        tmapp.fixed_file = "";
        tmapp.mpp = "{{ slide_mpp }}";
        tmapp.slideFilename = "{{ slide_filename }}"
        tmapp.layers = [
            {% if slide_url %}
            {
                tileSource:"{{ slide_url }}",
                name:"{{ slide_filename }}"
            },
            {% endif %}
            {% if associated %}
                {% for name in associated|sort %}
                {
                    tileSource:"{{ associated[name] }}",
                    name:"{{ slide_filename }}/{{ name }}"
                },
                {% endfor %}
            {% endif %}
        ]
        
        tmapp.registerActions();
        tmapp.init();
        {% for plugin in plugins %}{% if plugin %}
            {{ plugin }}.init(tmapp);
            document.getElementById("plugin-dropdown").style.display="block";
        {% endif %}{% endfor %}
        
        

        {% if jsonProject %}
            jsonState = {{jsonProject|tojson|safe}}
            projectUtils.loadProject(jsonState);
        {% endif %}
    });
</script>

</html>
