<!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">Label Formatting</h4>
                </div>
                <div class="modal-body" style="max-height:542px">
                    <h4>Markdown formatting</h4>
                    <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. 
                    </p>
                    <p>
                        NB: Links are not supported for panel labels.
                    </p>
                    <p>
                        NB: You can escape a certain character to not be interpreted as Markdown by adding \ in front of the 
                        character. Ex: "my_string_" is interpreted as "my<i>string</i>" but "my\_string\_" is now interpreted as "my_string_"
                    </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>**bold** or __bold__</td>
                            <td><strong>bold</strong> or <strong>bold</strong></td>
                        </tr>
                        <tr>
                            <th>ITALIC</th>
                            <td>*italic* or _italic_</td>
                            <td><i>italic</i> or <i>italic</i></td>
                        </tr>
                        <tr>
                            <th>LINKS</th>
                            <td>[Link text](http://link_url.com)</td>
                            <td><a href="#">Link text</a></td>
                        </tr>
                       <!--  <tr><td>You need to use 2 line breaks between paragraphs</td><td></td></tr> -->
                    </table>                    
                    <h4>Dynamic properties</h4>
                    <p>
                        The drop-down menu in the 'Add Labels' form allows you to create labels based on Image metadata. 
                        Labels created with square brackets indicate dynamic properties. The properties within the square 
                        brackets will be dynamically updated upon changes. Additional text can be added outside the square 
                        brackets and will not be affected when the labels are displayed.<br>
                        The following table shows some examples, including the use of dynamic properties and markdown together.
                    </p>
                    <table class="table">
                        <tr>
                            <td></td>
                            <th>This text will be formatted to...</th>
                            <th>...this text</th></tr>
                        <tr>
                        <tr>
                            <th>X and Y in pixels</th>
                            <td>X:[x.pixel] - Y:[y.pixel]</td>
                            <td>X:52 - Y:89</td>
                        </tr>
                        <tr>
                            <th>X and Y in units</th>
                            <td>X:[x.unit] - Y:[y.unit]</td>
                            <td>X:0.43 &#181;m - Y:0.23 &#181;m</td>
                        </tr>
                        <tr>
                            <th>Width</th>
                            <td>Width: [width.pixel]</td>
                            <td>Width: 400</td>
                        </tr>
                        <tr>
                            <th>Height (with markdown formatting)</th>
                            <td>*Height*: **[height.pixel]**</td>
                            <td><i>Height</i>: <strong>300</strong></td>
                        </tr>
                        <tr>
                            <th>Width with decimal precision of 3</th>
                            <td>Width: [width.unit; precision=3]</td>
                            <td>Width: 4.450 &#181;m</td>
                        </tr>
                        <tr>
                            <th>Time relative to the 3rd frame</th>
                            <td>Time: [time.milliseconds; offset=3]</td>
                            <td>Time: -58 ms</td>
                        </tr>
                        <tr>
                            <th>Time with decimal precision 2, <br/>relative to the 3rd frame</th>
                            <td>Time: [time.seconds; precision=2; offset=3]</td>
                            <td>Time: -0.06 s</td>
                        </tr>
                        <tr>
                            <th>Z index with units <br/> (first plane is Z: 0.00 &#181;m), <br/>offset by 3 times the Z pixel size</th>
                            <td>Z: [z.unit; offset=3]</td>
                            <td>Z: -3.00 &#181;m </td>
                        </tr>
                        <tr>
                            <th>Z index (first plane is Z: 1) <br/>offset by 3</th>
                            <td>Z: [z.pixel; offset=3]</td>
                            <td>Z: -2 </td>
                        </tr>
                        <tr>
                            <th>Image ID</th>
                            <td>Image ID: [image.id]</td>
                            <td>Image ID: 23556</td>
                        </tr>
                        <tr>
                            <th>Dataset ID</th>
                            <td>Dataset ID: [dataset.id]</td>
                            <td>Dataset ID: 1654</td>
                        </tr>
                        <tr>
                            <th>Zoom</th>
                            <td>[zoom]</td>
                            <td>100 %</td>
                        </tr>
                    </table>
                    <h4>Legend</h4>
                    <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">
                        <div>                                                    
                            <input type="radio" id="all-keys" name="kvpChoice" value="all-keys" />
                            <label for="all-keys">All Keys </label>
              
                            <input type="radio" id="single-key" name="kvpChoice" value="single-key" checked />
                            <label for="single-key">Choose Key <small class="text-muted">(shows numbers of images)</small>:</label>
                        </div>
                    
                        <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 id="alignment-toolbars" 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 class="btn-group icon-buttons alignment-buttons" style="margin-right: 1px">
                        <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="aright btn btn-default btn-sm" title="Align Right" disabled="disabled">
                            <span class="glyphicon glyphicon-align-right"></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="btn btn-default btn-sm dropdown-toggle" title="Grid spacing options"
                            data-toggle="dropdown" disabled="disabled" style="padding: 5px 3px">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><label><input type="radio" value="auto" checked name="grid_gap"/><span class="glyphicon glyphicon-ok"> </span> 5% of panel width</label></li>
                            <li><label><input type="radio" value="0" name="grid_gap"/><span class="glyphicon glyphicon-ok"> </span> 0 px (no gap)</label></li>
                            <li><label><input type="radio" value="1" name="grid_gap"/><span class="glyphicon glyphicon-ok"> </span> 1 px</label></li>
                            <li><label><input type="radio" value="2" name="grid_gap"/><span class="glyphicon glyphicon-ok"> </span> 2 px</label></li>
                            <li><label><input type="radio" value="5" name="grid_gap"/><span class="glyphicon glyphicon-ok"> </span> 5 px</label></li>
                            <li><label><input type="radio" value="10" name="grid_gap"/><span class="glyphicon glyphicon-ok"> </span> 10 px</label></li>
                            <li><label><input type="radio" value="15" name="grid_gap"/><span class="glyphicon glyphicon-ok"> </span> 15 px</label></li>
                            <li><label><input type="radio" value="20" name="grid_gap"/><span class="glyphicon glyphicon-ok"> </span> 20 px</label></li>
                            <li><label><input type="radio" id="custom_grid_gap" value="" name="grid_gap"/><span class="glyphicon glyphicon-ok"> </span>
                                custom <span id="custom_grid_gap_label"></span>
                            </label></li>
                        </ul>
                    </div>
                    <div class="btn-group icon-buttons alignment-buttons">
                        <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="abottom btn btn-default btn-sm rotate-font" title="Align Bottom" disabled="disabled">
                            <span class="glyphicon glyphicon-align-left"></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>
                    
                        <input id="vp_zoom_value" type="number" size="4"/>
                        
                        <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="Show label formatting options...">
                        Tips
                    </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>