{% extends "webclient/scripts/base_custom_dialog.html" %}
{% load i18n %}

{% comment %}
<!--
  Copyright (C) 2011 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/>.
-->
{% endcomment %}

{% comment %}
<!--
    This page displays a UI for Split View Figure
-->
{% endcomment %}

{% block title %}
    Create Thumbnail Figure
{% endblock %}



{% block script %}
    {{ block.super }}
    <script type="text/javascript" src="{% static "webclient/javascript/ome.thumbnail_figure.js"|add:url_suffix %}"></script>
    <link rel="stylesheet" href="{% static '3rdparty/jquery.chosen-1.8.7/chosen.css' %}" type="text/css" media="screen"/>
    <script type="text/javascript" src="{% static '3rdparty/jquery.chosen-1.8.7/chosen.jquery.js' %}"></script>

    <style type="text/css">
        .thumbnail_set {
            border-collapse:separate;
            border-spacing:0 15px;
        }
        .thumbnail_set th {
            vertical-align: middle;
            border-right: solid black 1px;
            padding: 5px;
        }
        .thumbnail_set td div {
            margin-left: 5px;
        }
        .img_panel {
            margin: 5px 0px 5px 10px;
            max-width: 50px;
            max-height: 50px;
        }
        .subsetLabel {
            position: relative;
            top: 4px;
        }
    </style>
{% endblock %}



    {% block script_form %}

        <h1>Create Thumbnail Figure</h1>

        <hr/>

        <!-- Data_Type and IDs are already set (we can hide these) -->
        <input name="Data_Type" style="display:none" value="{{ dtype }}" />
        <input type="text" name="IDs" value="{{ idString }}" style="display:none">

        <span title="File name of the figure to save.">
            Figure Name:
            <input type="text" name="Figure_Name"  value="{{ figureName }}"  />
        </span>

        <span title="Format to save image">
            Format:
            <select name="Format">
                <option value="JPEG"  selected="True"  >JPEG</option>
                <option value="PNG"  >PNG</option>
                <option value="TIFF"  >TIFF</option>
            </select>
        </span>

        <hr/>

        <!-- Thumbnail size - we provide a dropdown selection (hide the number field) -->
        <span>
            Thumbnail size:
            <!--<input type="text" name="Thumbnail_Size" class="number" value="96" style="display:none"/>-->
            <select name="Thumbnail_Size">
                <option value="24">24x24</option>
                <option value="32">32x32</option>
                <option value="48">48x48</option>
                <option value="64">64x64</option>
                <option value="96" selected>96x96</option>
                <option value="128">128x128</option>
                <option value="160">160x160</option>
            </select>
        </span>

        <span>
            Images per row:
            <input type="number" name="Max_Columns" class="number" size="3" value="10"  />
        </span>

        <hr/>

        {% if tags %}
        <!-- Allow user to pick Tags for filtering -->
        <h2>Sort by Tag</h2>

        <!-- Since the Tags <select> with Chosen doesn't remember order... -->
        <input type="text" name="Tag_IDs" style="display:none"/>

        <select id="tagChooser" multiple="multiple">
            {% for t in tags %}
                <option value="{{ t.id }}">{{ t.getTextValue|escape }}</option>
            {% endfor %}
        </select>

        <span title="Include thumbnails that have none of the chosen tags"
                style="position:relative; top: -10px">
            Show Untagged Images:
            <input type="checkbox" name="Show_Untagged_Images" checked/>
        </span>
        {% else %}
        <h2>No Tags Added</h2>
        NB: If you add Tags to your images, you can sort these thumbnails by Tag.
        {% endif %}

        <input type="text" name="Parent_ID" class="number"
            value="{{ parent_id }}" style="display:none"/>
        <hr>



    {% endblock %}


<!---------------------------- FIGURE PREVIEW ---------------------->

{% block figure_preview %}

    {% for set in thumbSets %}
    <table class="thumbnail_set">
    <tbody>
        <tr>
            <td></td>
            <td><h1>{{ set.name }}</h1></td>
        </tr>
        <tr>
            <td></td>
            <td>
                {% for img in set.imageTags %}
                <img id="thumbnail-{{ img.id }}" class="img_panel" title="{% for t in img.tags %} {{ t.getTextValue|escape  }} {% endfor %}" 
                    data-iId="{{ img.id }}"
                    data-tags="{% for t in img.tags %}{% if not forloop.first %},{% endif %}{{t.id}}{% endfor %}"
                    src="{% url 'render_thumbnail_resize' 96 img.id %}" />
                {% endfor %}
            </td>
        </tr>
    </tbody>
    </table>
    {% endfor %}

{% endblock %}
