<!DOCTYPE html>
<html>

<head>
    <title>TissUUmaps</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--<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="qrc:///qtwebchannel/qwebchannel.js"></script>
    <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') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/tmcpstandalone.min.css') }}">
</head>

<body style="background-color:#ccc;">
    <div class="navbar navbar-default">
        
            <ul class="nav navbar-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>
                            <a href="#" id="openImage">
                                <span>Open Image</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" id="exitTissUUmaps">
                                <span>Exit TissUUmaps</span>
                            </a>
                        </li>
                    </ul>
                </li>
                
                <li class="nav-item dropdown">
                    <!--<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Open
                    </a>-->
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Help
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="https://tissuumaps.research.it.uu.se/">
                                <span>About TissUUmaps</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
    </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);">
                <!-- 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" style="position:absolute; width:100%">
                </div>
                <canvas id="gl_canvas" width="500" height="500" style="position:relative; z-index:10; pointer-events:none"></canvas>
                    <!-- 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>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 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 fixed-height">
                        <li> <a href="#markers-iss-gui" data-toggle="tab" aria-expanded="true"
                                class="active main-child">Gene expression</a></li>
                        <li> <a href="#markers-cp-gui" data-toggle="tab"
                                aria-expanded="false">Cell morphology</a></li>
                        <li> <a href="#markers-regions-gui" data-toggle="tab"
                                aria-expanded="false">Regions</a></li>
                        <li> <a href="#image-gui" data-toggle="tab"
                                aria-expanded="false">Image layers</a></li>

                    </ul>

                    <div id="TM-tabs" class="tab-content extended-height">
                        <!-- 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">
                                </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">
                                </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>
                            </div>
                        </div>
                        <!-- TAB 1.4 Overlay data ----------------------------------------------------------------------------- -->
                        <div class="tab-pane" id="image-gui" style="height:100%;">
                            <div class="panel panel-default" style="height:100%;">
                                <div class="panel-body">
                                </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-->
    <!-- end of container-fuild-->
    <div class="modal in" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
        <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" id="modalBody">
                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>
    var backend;
    new QWebChannel(qt.webChannelTransport, function (channel) {
        backend = channel.objects.backend;
    });

    document.getElementById("openImage").addEventListener("click", function(){
        backend.openImage();
    });
    document.getElementById("exitTissUUmaps").addEventListener("click", function(){
        backend.exit();
    });
</script>
{% if message %}
<script>
    $('#modalLabelSmall')[0].innerHTML = "TissUUmaps";
    $('#modalBody')[0].innerHTML = "{{ message }}";
    $('#loadingModal').modal('show');
</script>
{% endif %}

</html>
