<!DOCTYPE html>
<!--
  Copyright (C) 2014 University of Dundee & Open Microscopy Environment.
  All rights reserved.

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as
  published by the Free Software Foundation, either version 3 of the
  License, or (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU Affero General Public License for more details.

  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>OMERO.figure</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="{% static 'figure/3rdparty/bootstrap-3.0.0/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'figure/3rdparty/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css' %}">
    <link rel="stylesheet" href="{% static 'figure/css/figure.css' %}?version={{ version }}">

    <!-- Currently we use jQuery 1.11.1 and jQuery-UI 1.10.4 -->
    <script src="{% static 'figure/3rdparty/jquery-1.11.1/jquery.min.js' %}"></script>
    <script src="{% static 'figure/3rdparty/jquery-ui-1.10.4/jquery-ui.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'figure/3rdparty/jquery-ui-1.10.4/css/jquery.ui.base.css' %}">

    <script>

    var RELEASE_VERSION = "v{{ version }}";

    var BASE_WEBFIGURE_URL = "{% url 'figure_index' %}",
        SAVE_WEBFIGURE_URL = "{% url 'save_web_figure' %}",
        LIST_WEBFIGURES_URL = "{% url 'list_web_figures' %}",
        DELETE_WEBFIGURE_URL = "{% url 'delete_web_figure' %}",
        MAKE_WEBFIGURE_URL = "{% url 'make_web_figure' %}",
        API_BASE_URL_V0 = "{% url 'api_base' '0' %}",
        ACTIVITIES_JSON_URL = "{% url 'activities_json' %}",
        WEBGATEWAYINDEX = "{% url 'webgateway' %}",
        WEBINDEX_URL = "{% url 'webindex' %}",
        WEBLOGIN_URL = "{% url 'weblogin' %}",
        ROIS_JSON_URL = "{% url 'api_rois' '0' %}",
        USER_FULL_NAME = "{{ userFullName }}",
        USER_ID = {{ userId }},
        LENGTH_UNITS = {{ lengthUnits|safe }},
        IS_PUBLIC_USER = {% if isPublicUser %}true{% else %}false{% endif %},
        // Images larger than this are 'big' tiled images
        MAX_PLANE_SIZE = "{{ maxPlaneSize }}";

    var LOCAL_STORAGE_RECOVERED_FIGURE = "recoveredFigure" + USER_ID;

    $(document).ready(function() {

        // keep-alive ping every minute, so that OMERO session doesn't die
        setInterval(function (){
            $.get("{% url 'keepalive_ping' %}");
        }, 60000);
    });

    </script>

</head>

<body id="body">

    <!-- Welcome splash-screen Modal -->
    <div class="modal" id="welcomeModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Welcome to OMERO.figure</h4>
                </div>
                <div class="modal-body" style="padding: 25px 25px 35px 25px">
                    <p>To get started...</p>
                    <div style="margin-left: auto; margin-right: auto; display: block; width: 70%">
                        <!-- Two buttons - use different elements in different ways -->
                        <button type="button" class="new_figure btn btn-lg btn-primary">
                            Create New File
                        </button>
                        <button type="button" class="open_figure btn btn-lg btn-primary pull-right">
                            Open File
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- About OMERO.figure Modal -->
    <div class="modal" id="aboutModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="padding:15px; text-align:center">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">About OMERO.figure</h4>
                </div>
                <div class="modal-body" style="padding: 25px 25px 35px 25px; text-align:center">
                    <p><strong>Version</strong>: <script>document.write(RELEASE_VERSION)</script></p>
                    <p>For more information, visit the
                        <a target="new" href="https://www.openmicroscopy.org/omero/figure/">OMERO.figure Home Page</a>
                    </p>
                    <p>
                        &copy; 2013-{% now "Y" %} University of Dundee &amp; Open Microscopy Environment<br/>
                        OMERO is distributed under the terms of the GNU GPL and OMERO.figure under AGPL.<br/>
                        See: <a target="new" href="http://www.openmicroscopy.org">openmicroscopy.org</a>
                    </p>
                </div>
                <div class="modal-footer" style="margin-top:0">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- ROI editing modal dialog -->
    <div class="modal" id="roiModal" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style="width: 920px">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="float: left; padding-right: 20px;">
                        Edit ROIs
                    </h4>
                    <p style="margin: 4px 0 0 0;">
                        Draw & edit ROIs and load ROIs from OMERO
                    </p>
                </div>
                <form class="roiModalForm" role="form">
                    <div class="modal-body">
                        <div class="col-xs-8">
                            <div id="roi_toolbar" class="roi_toolbar btn-toolbar" role="toolbar" aria-label="...">
                            </div>
                            <div id="roiViewer" class="roiViewer">
                                <!-- Show / add ROIs on image -->
                                <!-- <div id="roi_image" style="position: absolute"> -->
                                    <img class="roi_image" style="position: absolute" />
                                <!-- </div> -->
                                <div id="roi_paper" class="roi_paper" style="position: absolute; top: 0; left: 0; overflow: hidden">
                                    <!-- svg is added here by Raphael.js -->
                                </div>

                                <div id="roi_zt_buttons" style="position: absolute; top: 5px; left: 5px">
                                </div>
                            </div>
                        </div>
                        <div id="roiModalSidebar" class="col-xs-4" style="padding: 0">
                            <span id="roiPageControls" style="color: #999; line-height: 30px;">
                            </span>
                            <div style="clear:both; padding: 5px"></div>
                            <div style="padding:0; height:550px; overflow-y:auto">
                                <div id="roiModalRoiList">
                                    <table style="width: 100%" class="table table-hover table-condensed"></table>
                                </div>
                                <p id="roiModalTip" style="position:absolute; top:0"></p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer" style="margin-top: 0">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">OK</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Confirm modal for custom messages -->
    <div class="modal" id="confirmModal" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Save Changes to Figure?</h4>
                </div>
                <div class="modal-body" style="padding: 25px 25px 35px 25px">
                    <p>Your changes will be lost if you don't save them</p>
                </div>
                <div class="modal-footer" style="margin-top:0">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Don't Save</button>
                    <button type="submit" class="btn btn-primary" data-dismiss="modal">Save</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Paper setup Modal -->
    <div class="modal" id="paperSetupModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Paper Setup</h4>
                </div>
                <form class="paperSetupForm" role="form">
                    <div class="modal-body">
                        <!-- Content added from paper_setup_modal_template -->
                    </div>
                    <div class="modal-footer" style="margin-top: 0">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">OK</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- chgrp Modal -->
    <div class="modal" id="chgrpModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Move Figure to Group</h4>
                </div>
                <form class="chgrpForm" role="form">
                    <div class="modal-body">
                        <!-- Content added -->
                    </div>
                    <div class="modal-footer" style="margin-top: 0">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">OK</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- dpi modal -->
    <div class="modal" id="dpiModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Resample Panels</h4>
                </div>
                <form class="dpiModalForm form-horizontal" role="form">
                    <div class="modal-body">
                        <p>
                            Set a resolution range for selected panels. When exported as
                            <strong>PDF</strong>, panel images outside this dpi range will be
                            resampled as necessary. 
                        </p>
                        <div class="form-group" style="margin-top: 15px; margin-bottom: 0px">
                            <label class="col-sm-4 control-label">
                                Minimum (optional)
                            </label>
                            <div class="col-sm-8 input-group">
                                <input type="number" class="form-control min_export_dpi"
                                    placeholder="min">
                                <div class="input-group-addon">dpi</div>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 15px; margin-bottom: 0px">
                            <label class="col-sm-4 control-label">
                                Maximum (required)
                            </label>
                            <div class="col-sm-8 input-group">
                                <input type="number" class="form-control max_export_dpi"
                                    placeholder="max">
                                <div class="input-group-addon">dpi</div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer" style="margin-top: 0">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">OK</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Crop Modal -->
    <div class="modal" id="cropModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style="width: 900px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Crop to Region</h4>
                </div>
                <form class="cropModalForm" role="form">
                    <div class="modal-body" style="height: 500px; max-height: 500px; padding-bottom:0">
                        <div class="col-xs-4" style="height: 485px; overflow: auto">
                            <p>
                                Click and drag on the image to choose a crop region or
                                pick an ROI from the list below.
                            </p>
                            <h4>ROIs:</h4>
                            <table class="roiPicker roisFromFigure table table-condensed">
                                <thead><td>
                                    <strong title="Crop to rectangles on this image in the figure">from Figure</strong>
                                </td><td></td><td></td></thead>
                                <tbody>
                                <!-- ROIs loaded here... -->
                                </tbody>
                            </table>
                            <table class="roiPicker roisFromClipboard table table-condensed">
                                <thead><td>
                                    <strong title="Crop to rectangles copied to clipboard">from Clipboard</strong>
                                </td><td></td><td></td></thead>
                                <tbody>
                                <!-- ROIs loaded here... -->
                                </tbody>
                            </table>
                            <table class="roiPicker roisFromOMERO table table-condensed">
                                <thead><td>
                                    <strong title="Crop to rectangles saved on this image on the OMERO server">from OMERO</strong>
                                </td><td>Z-index</td><td>T-index</td></thead>
                                <tbody>
                                <!-- ROIs loaded here... -->
                                </tbody>
                            </table>
                            <button style="float: right" class="btn btn-sm btn-default loadRoiRects">Load More...</button>
                            <!-- Additional message/status -->
                            <p style="color: #999; margin: 10px" id='cropRoiMessage'></p>
                        </div>
                        <div class="col-xs-8">
                            <div id="cropViewer">
                                <!-- Show / add ROIs on image -->
                                <div id="crop_paper" style="position: absolute; top: 0; left: 0; right: 10px; bottom:10px; overflow: hidden">
                                    <!-- svg is added here by Raphael.js -->
                                </div>
                                <img class="crop_image" style="position: absolute; top: 0; left:0" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer" style="margin-top: 0">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" disabled="disabled">OK</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- SetId Modal - behaviour handled by SetIdModalView -->
    <div class="modal" id="setIdModal" tabindex="-1" role="dialog" aria-labelledby="setIdLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="setIdLabel">Edit Image ID</h4>
                </div>
                <div class="modal-body">
                    <p>Choose a new Image ID for the selected panels</p>
                    <form class="setIdForm form-inline" role="form" style="margin-top: 10px; margin-bottom: 10px">
                        <div class="form-group">
                            <input type="text" class="form-control imgId" placeholder="Image ID">
                        </div>
                        <button type="submit" class="btn btn-primary preview" disabled="disabled">Preview</button>
                    </form>
                    <div class="previewIdChange">
                    </div>
                </div>
                <div class="modal-footer" style="margin-top:0">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary doSetId" data-dismiss="modal" disabled="disabled">Update</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Color-picker Modal -->
    <div class="modal" id="colorpickerModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Color Picker</h4>
                </div>
                <form class="colorpickerForm" role="form">
                    <div class="modal-body">
                        <div id="demo_cont" class="demo demo-auto inl-bl"
                            data-container="#demo_cont" data-color="#ff0000" data-inline="true">
                            <div style="position: absolute; left: 280px; top: 200px;">
                                <input name="color" style="width: 100px" value="test" class="form-control" />
                            </div>
                        </div>
                        <div class="rgb-group form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">Red</label>
                                <div class="col-sm-8">
                                    <input type="number" name="red" class="form-control" placeholder="255">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">Green</label>
                                <div class="col-sm-8">
                                    <input type="number" name="green" class="form-control" placeholder="255">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">Blue</label>
                                <div class="col-sm-8">
                                    <input type="number" name="blue" class="form-control" placeholder="255">
                                </div>
                            </div>
                        </div>
                        <ul class="list-group oldNewColors">
                            <li class="list-group-item"></li>
                            <li class="list-group-item" style="border-top-width: 0"></li>
                        </ul>

                        <div id="pickedColors" class="btn-toolbar pickedColors" role="toolbar">
                            <!-- picked colors added here by render() -->
                        </div>
                    </div>
                    <div class="modal-footer" style="margin-top: 0">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">OK</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- LUT-picker Modal -->
    <div class="modal" id="lutpickerModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Lookup Table Chooser</h4>
                </div>
                <div class="modal-body" style="height: 500px">
                    <p>Loading Lookup Tables...</p>
                </div>
                <div class="lutPreview lutBg"> &nbsp </div>
                <div class="modal-footer" style="margin-top: 0">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" disabled="disabled">OK</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Add-Images Modal - behaviour handled by AddImagesModalView -->
    <div class="modal" id="addImagesModal" tabindex="-1" role="dialog" aria-labelledby="addImagesLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="addImagesLabel">Add Images</h4>
                </div>
                <form class="addImagesForm" role="form">
                    <div class="modal-body">
                        <p>Add images to the figure by entering their IDs, separated by commas.<br>
                            Hint: You can also select images in the webclient, click the link in right panel,
                            copy the URL and paste it here:
                        </p>
                        <div class="form-group" style="margin-top: 15px; margin-bottom: 0px">
                            <input type="text" class="form-control imgIds" placeholder="Image IDs or URL">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" data-dismiss="modal" disabled="disabled">Add Images</button>
                    </div>
                </form>
            </div>
        </div>
    </div><!-- /.modal -->

    <!-- Export json Modal -->
    <div class="modal" id="exportJsonModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style="width:800px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="addImagesLabel">Export as JSON</h4>
                </div>
                <form class="addImagesForm" role="form">
                    <div class="modal-body">
                        <p>The current Figure is entirely defined by the JSON data below.
                        </p>
                        <div class="form-group" style="margin-top: 15px; margin-bottom: 0px">
                            <textarea class="form-control" rows="15"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Import json Modal -->
    <div class="modal" id="importJsonModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style="width:800px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="addImagesLabel">Import from JSON</h4>
                </div>
                <form class="importJsonForm" role="form">
                    <div class="modal-body">
                        <p>Paste the JSON data for the Figure into the text box below.
                        </p>
                        <div class="form-group" style="margin-top: 15px; margin-bottom: 0px">
                            <textarea class="form-control" rows="15"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer" style="margin-top: 0">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">OK</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Markdown Info Modal -->
    <div class="modal" id="markdownInfoModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style="width:800px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Markdown Formatting</h4>
                </div>
                <div class="modal-body">
                    <p>
                        You can use "Markdown" syntax to add formatting to plain text. For example,
                        **this text will be bold** and this *word* will be italic. NB: Links are not
                        supported for panel labels.
                    </p>

                    <table class="table">
                        <tr>
                            <td></td>
                            <th>This text will be formatted to...</th>
                            <th>...this text</th></tr>
                        <tr>
                            <th>BOLD</th>
                            <td>Use 2 stars for **bold**.</td>
                            <td>Use 2 stars for <strong>bold</strong>.</td>
                        </tr>
                        <tr>
                            <th>ITALIC</th>
                            <td>Use 1 star for *italic*.</td>
                            <td>Use 1 star for <i>italic</i>.</td>
                        </tr>
                        <tr>
                            <th>LINKS</th>
                            <td>Add links with [Link text](http://link_url.com)</td>
                            <td>Add links with <a href="#">Link text</a></td>
                        </tr>
                       <!--  <tr><td>You need to use 2 line breaks between paragraphs</td><td></td></tr> -->
                    </table>
                    <p>The figure legend will be included in the PDF info page when the figure is
                        exported.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- File Open Modal -->
    <div class="modal" id="openFigureModal" tabindex="-1" role="dialog" aria-labelledby="addImagesLabel" aria-hidden="true">
        <div class="modal-dialog" style="width:850px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Open</h4>
                </div>
                
                    <div class="modal-body" style="height:450px">
                        <table class="table table-condensed">
                            <thead>
                                <tr>
                                    <th style="width:7%"></th>
                                    <th style="width:47%">
                                        <form class="form-inline" role="form">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">Name</label>
                                            </div>
                                            <button type="button" class="btn btn-link btn-sm sort-name muted table-sort-btn">
                                                <span class="glyphicon glyphicon-chevron-up"></span>
                                            </button>
                                            <button type="button" class="btn btn-link btn-sm sort-name-reverse muted table-sort-btn">
                                                <span class="glyphicon glyphicon-chevron-down"></span>
                                            </button>
                                            <div class="form-group" style="width:60%">
                                                <input class="form-control" id="file-filter" placeholder="Filter">
                                            </div>
                                        </form>
                                    </th>
                                    <th style="width:22%">
                                        Created
                                        <button type="button" class="btn btn-link btn-sm sort-created sort table-sort-btn">
                                            <span class="glyphicon glyphicon-chevron-up"></span>
                                        </button>
                                        <button type="button" class="btn btn-link btn-sm sort-created-reverse muted table-sort-btn">
                                            <span class="glyphicon glyphicon-chevron-down"></span>
                                        </button>
                                    </th>
                                    <th style="width:12%">
                                        <div class="btn-group" title="Filter files by owner">
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                                <b>Owner</b> <span class="caret"></span>
                                            </button>
                                            <ul id="owner-menu" class="dropdown-menu pull-right" role="menu">
                                                <!-- owners added here -->
                                            </ul>
                                        </div>
                                    </th>
                                    <th style="width:12%">
                                        <div class="btn-group" title="Filter files by group">
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                                <b>Group</b> <span class="caret"></span>
                                            </button>
                                            <ul id="group-menu" class="dropdown-menu pull-right" role="menu">
                                                <!-- groups added here -->
                                            </ul>
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer" style="margin-top:0px">
                        <button title="Refresh file list" type="button" class="btn btn-default pull-left refresh-files">Refresh</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>
            </div>
        </div>
    </div>
    <!-- Labels from Map Annotations Modal -->
    <div class="modal" id="labelsFromMapAnns" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style="width:400px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="addImagesLabel">Labels from Key-Value Pairs</h4>
                </div>
                <form class="labelsFromMapAnnsForm" role="form">
                    <div class="modal-body">
                        <p>Choose Key
                            <small class="text-muted">(shows numbers of images)</small>:</p>
                        <select>
                        </select>
                        <div class="checkbox">
                            <label>
                                Include Key in Label
                                <input name="includeKey" type="checkbox" checked>
                            </label>
                        </div>
                        <hr>
                        <h5>Example Label</h5>
                        <div id="exampleLabelFromMap" class="well"
                            style="background-color: transparent; margin: 0">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">OK</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


<!-- -- END OF MODAL DIALOGS -- -->

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header" title="Back to OMERO.webclient">
                <a class="navbar-brand" href="{% url 'webindex' %}">OMERO</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <!-- <li class="active dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Figure <b class="caret"></b></a>
                        <ul class="active dropdown-menu">
                        </ul>
                    </li> -->
                    <!-- <li><a href="#about">About</a></li> -->

                    <li class="active dropdown" id="file_actions">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">File <b class="caret"></b></a>
                        <ul class="active dropdown-menu">
                            <li class="new_figure">
                                <a href="#">
                                    New
                                </a>
                            </li>
                            <li class="open_figure">
                                <a href="#">
                                    <span class="pull-right">Ctrl+O</span>
                                    Open...
                                </a>
                            </li>
                            <li class="save_figure disabled">
                                <a href="#">
                                    <span class="pull-right">Ctrl+S</span>
                                    Save
                                </a>
                            </li>
                            <li class="save_as">
                                <a href="#">Save a Copy...</a>
                            </li>
                            <li class="local_storage" title="Open or Clear recovered data from local storage">
                                <a href="#">Local storage...</a>
                            </li>
                            <li class="export_json">
                                <a href="#">Export as JSON...</a>
                            </li>
                            <li class="import_json">
                                <a href="#">Import from JSON...</a>
                            </li>
                            <li class="delete_figure">
                                <a href="#">Delete</a>
                            </li>
                            <li class="chgrp_figure">
                                <a href="#">Move Figure to Group...</a>
                            </li>
                            <li class="paper_setup">
                                <a href="#">Paper Setup...</a>
                            </li>
                            <!-- Handled by LegendView -->
                            <li class="edit-legend">
                                <a href="#">Add Figure Legend...</a>
                            </li>
                         </ul>
                    </li>

                    <li class="active dropdown" id="edit_actions">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit <b class="caret"></b></a>
                        <ul class="active dropdown-menu">
                            <!-- We add <a> to undo/redo to enable. See undo.js -->
                            <li class="undo disabled">
                                <a href="#">
                                    <span class="pull-right">Ctrl+Z</span>
                                    Undo
                                </a>
                            </li>
                            <li class="redo disabled">
                                <a href="#">
                                    <span class="pull-right">Ctrl+Y</span>
                                    Redo
                                </a>
                            </li>
                            <li class="copy disabled">
                                <a href="#">
                                    <span class="pull-right">Ctrl+C</span>
                                    Copy
                                </a>
                            </li>
                            <li class="paste disabled">
                                <a href="#">
                                    <span class="pull-right">Ctrl+V</span>
                                    Paste
                                </a>
                            </li>

                         </ul>
                    </li>

                    <li class="active dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Help <b class="caret"></b></a>
                        <ul class="active dropdown-menu">
                            <li class="about_figure">
                                <a href="#">About OMERO.figure</a>
                            </li>
                            <li>
                                <a href="https://www.openmicroscopy.org/omero/figure/" target="new">
                                    Home Page
                                </a>
                            </li>
                         </ul>
                    </li>

                </ul>

                <form class="navbar-form navbar-left">

                    <button class="save_figure btn btn-default btn-sm" title="Save Figure to OMERO" disabled="disabled">
                        Save
                    </button>
                </form>

                <div class="navbar-header figure-title" title="Edit Name">
                    <!-- Figure Title will be added here -->
                </div>

                <form class="navbar-form navbar-right">

                    <!-- Add a New Panel Button -->
                    <div class="btn-group" style="margin-right:20px">
                        <button type="button" class="btn btn-sm btn-default" data-toggle="modal" data-target="#addImagesModal" title="Add images to figure">
                            Add Image
                            <span id="addImagesSpinner" class="glyphicon glyphicon-refresh" title="Loading images..." style="display: none"></span>
                        </button>
                        <button type="button" class="btn btn-sm btn-default delete_panel" title="Delete selected panels">
                            Delete
                        </button>
                    </div>

                    <!-- Buttons for Alignment of Panels. see AlignmentToolbarView -->
                    <div id="alignment-toolbar" class="btn-group icon-buttons">
                        <button type="button" class="aleft btn btn-default btn-sm" title="Align Left" disabled="disabled">
                            <span class="glyphicon glyphicon-align-left"></span>
                        </button>
                        <button type="button" class="agrid btn btn-default btn-sm" title="Align To Grid" disabled="disabled">
                            <span class="glyphicon glyphicon-th"></span>
                        </button>
                        <button type="button" class="atop btn btn-default btn-sm rotate-font" title="Align Top" disabled="disabled">
                            <span class="glyphicon glyphicon-align-right"></span>
                        </button>
                        <button type="button" class="btn btn-default btn-sm dropdown-toggle" title="Align Sizes"
                            disabled="disabled" data-toggle="dropdown">
                            <span class="glyphicon glyphicon-fullscreen"></span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#" class="awidth">
                                <span class="glyphicon glyphicon-resize-horizontal"></span> Align Width</a>
                            </li>
                            <li><a href="#" class="aheight">
                                <span class="glyphicon glyphicon-resize-vertical"></span> Align Height</a>
                            </li>
                            <li><a href="#" class="asize">
                                <span class="glyphicon glyphicon-fullscreen"></span> Width &amp; Height</a>
                            </li>
                            <li><a href="#" class="amagnification">
                                <span class="glyphicon glyphicon-fullscreen"></span> Align Magnification</a>
                            </li>
                        </ul>
                    </div>

                    <button id="pdf_inprogress" style="display:none" class="btn btn-primary btn-sm"
                            title="Figure generation in progress..." onClick="return false;">
                        Exporting Figure
                        <span class="glyphicon glyphicon-refresh"></span>
                    </button>

                    <a id="pdf_download" href="#" target="_blank"
                            style="padding: 4px 10px; display: none;"
                            class="btn btn-primary btn-sm script-result" title="Download Figure">
                        <!-- Tooltip and glyphicon also set on script completion in figure_view.js -->
                        <span class="glyphicon glyphicon-download-alt" style="font-size: 14px"></span>
                    </a>

                    <a id="script_error" href="#" target="script_error"
                            style="padding: 4px 10px; display: none;"
                            class="btn btn-danger btn-sm script-result" title="Show Error">
                        <span class="glyphicon glyphicon-warning-sign" style="font-size: 14px"></span>
                    </a>

                    <div class="btn-group" {% if scriptMissing %}title="PDF script not installed"{% endif %}>
                        <button id="create_figure_pdf" title="Generate figure for download"
                            {% if scriptMissing %}disabled="disabled"{% endif %}
                            data-export-option="PDF"
                            type="button" class="btn btn-success btn-sm export_pdf">
                            Export PDF
                        </button>
                        <button type="button" class="btn btn-success btn-sm dropdown-toggle" title="Export Options"
                            data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu export_options" role="menu">
                            <!-- NB: data-export-option attr used to label export button & handled by js on click -->
                            <li><a href="#" data-export-option="PDF"
                                    title="Export figure as PDF">
                                <span class="glyphicon glyphicon-ok"></span>
                                PDF</a>
                            </li>
                            <li><a href="#" data-export-option="PDF & images"
                                    title="Export as PDF, in zip with panel images">
                                <span class="glyphicon glyphicon-ok" style="visibility:hidden"></span>
                                PDF with images</a>
                            </li>
                            <li><a href="#" data-export-option="TIFF"
                                    title="Export figure as a TIFF image per page">
                                <span class="glyphicon glyphicon-ok" style="visibility:hidden"></span>
                                TIFF (300 dpi)</a>
                            </li>
                            <li><a href="#" data-export-option="TIFF & images"
                                    title="Export as TIFF, in zip with panel images">
                                <span class="glyphicon glyphicon-ok" style="visibility:hidden"></span>
                                TIFF with images</a>
                            </li>
                            <li><a href="#" data-export-option="to OMERO"
                                    title="Export each page as an Image in OMERO">
                                <span class="glyphicon glyphicon-ok" style="color:#333; visibility:hidden"></span>
                                New OMERO Image</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div><!--/.navbar-collapse -->
        </div>
    </div>

    <main>
        <div id="canvas_wrapper" class="canvas_wrapper">
            <!-- <div id="canvas_overlay"></div> -->
            <article id="canvas">
                <div id="figure">
                    <!-- All panels etc are appended to figure. -->
                    <!-- We also dynamically add <div class="paper"> -->
                </div>
            </article>
        </div>
    </main>


    <div id="js-legend" class="legend-container">
        <div class="panel panel-default" style="display:none">
            <button type="button" class="close collapse-legend" title="Collapse legend" style="margin-right:3px">
                <span class="glyphicon glyphicon-collapse-down" aria-hidden="true"></span>
            </button>
            <button type="button" class="close expand-legend" title="Collapse legend" style="margin-right:3px">
                <span class="glyphicon glyphicon-collapse-up" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-link pull-right markdown-info"
                    title="Use Markdown formatting. Click for more info...">
                Legend formatting
            </button>
            <div class="legend panel-body">
                <p>
                    <!-- Legend rendered here by LegendView -->
                </p>
            </div>
        </div>
        <div class="legend-footer">
            <button type="button" class="btn btn-default btn-xs cancel-legend"
                title="Cancel editing legend" style="margin: 3px; display: none">
                Cancel
            </button>
            <button type="button" class="btn btn-success btn-xs save-legend"
                title="Save figure legend" style="margin: 3px; display: none">
                Save
            </button>
            <button type="button" class="btn btn-default btn-xs edit-legend"
                title="Add figure legend" style="margin: 3px">
                Add Figure Legend
            </button>
        </div>
    </div>


    <footer>
        <div id="zoom_slider" title="Zoom"></div>
        <input id="zoom_input" type="text" size="3" maxlength="3" disabled="disabled" title="zoom"/>
        <button type="button" class="zoom-paper-to-fit btn btn-default btn-xs" title="Zoom paper to fit">
            <span class="glyphicon glyphicon-resize-full"></span>
        </button>
    </footer>


    <!-- Hacked Bootstrap's modal dialog to be non-modal -->
    <div class="modal-dialog non-modal-dialog draggable-dialog">
        <div class="modal-content">

            <ul class="nav nav-tabs" id="previewInfoTabs">
                <li><a href="#infoTab">Info</a></li>
                <li class="active"><a href="#previewTab">Preview</a></li>
                <li><a href="#labelsTab">Labels</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane" id="infoTab"></div>

                <div class="tab-pane active" id="previewTab">
                    <div class="col-sm-2 no-padding" id="channelToggle"></div>
                    <div class="col-sm-10 no-padding" id="viewportContainer">
                        <div id="vp_z_slider" class="pull-left">
                            <button type="button" class="btn btn-link btn-sm z-decrement" title="Decrease Z-index">
                                <span class="glyphicon glyphicon-chevron-down"></span>
                            </button>
                            <button type="button" class="btn btn-link btn-sm z-increment" title="Increase Z-index">
                                <span class="glyphicon glyphicon-chevron-up"></span>
                            </button>
                        </div>
                        <div id="vp_t_slider">
                            <button type="button" class="btn btn-link btn-sm time-decrement" title="Decrease T-index">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </button>
                            <button type="button" class="btn btn-link btn-sm time-increment" title="Increase T-index">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </button>
                        </div>
                    </div>
                    <div class='clearfix' style="padding-bottom:13px"></div>
                    <div id="channel_sliders"></div>
                    <div class='clearfix'></div>
                    <div class='tab-footer'>
                        <div class="col-sm-2 no-padding">
                            <h5>Zoom</h5>
                        </div>
                        <div class="col-sm-8 no-padding">
                            <div id="vp_zoom_slider"></div>
                        </div>
                        <div id="vp_zoom_value" class="col-sm-2" style="padding: 8px 0 0; text-align:right"></div>
                        <div class='clearfix'></div>
                        <div id="reset-zoom-view">
                            <!-- button added by ZoomView render() -->
                        </div>
                    </div>
                </div>


                <!-- events for this pane handled by LabelsPanelView -->
                <div class="tab-pane" id="labelsTab">

                    <div id="edit_rois_form"></div>

                    <div class="clearfix">
                    </div>
                    <hr/>

                    <h5>Scalebar</h5>
                    <div id="scalebar_form"></div>

                    <hr />

                    <h5 style="float: left">Add Labels</h5>

                    <button type="button" class="btn btn-link markdown-info"
                        title="Use Markdown formatting. Click for more info..."></button>
                    <div class="clearfix"></div>
                    <form class="new-label-form form-inline" role="form">
                    </form>

                    <h5>Edit Labels</h5>
                    <div id="selected_panels_labels"></div>
                </div>
            </div>

        </div>
    </div>


    <script src="{% static 'figure/3rdparty/ome.csrf.js' %}"></script>
    <script src="{% static 'figure/3rdparty/json2.js' %}"></script>
    <script src="{% static 'figure/3rdparty/underscore-1.13.1-umd-min.js' %}"></script>
    <script src="{% static 'figure/3rdparty/backbone-1.0.0.js' %}"></script>
    <script src="{% static 'figure/3rdparty/raphael-2.1.2/raphael-min.js' %}"></script>
    <script src="{% static 'figure/3rdparty/mousetrap-1.5.3/mousetrap.min.js' %}"></script>
    <script src="{% static 'figure/3rdparty/backbone.mousetrap/backbone.mousetrap.js' %}"></script>
    <script src="{% static 'figure/3rdparty/bootstrap-3.0.0/js/bootstrap.js' %}"></script>
    <script src="{% static 'figure/3rdparty/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js' %}"></script>
    <script src="{% static 'figure/3rdparty/markdown-browser-0.6.0-beta1/markdown.min.js' %}"></script>
    <script src="{% static 'figure/3rdparty/shape-editor-4.0.0/shape-editor.js' %}"></script>

    <!-- underscore templates at static/figure/templates are compiled with '$ grunt jst' -->
    <script src="{% static 'figure/templates.js' %}?version={{ version }}"></script>

    <!-- static/figure/js/ files are concatenated with '$ grunt concat' into static/figure.js -->
    <script type="text/javascript" src="{% static 'figure/figure.js' %}?version={{ version }}"></script>

</body>

</html>