{% extends "webgateway/base/base_header.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 is the BASE template for various Customised dialogs for running scripts. E.g. split_view_figure.html
-->
{% endcomment %}

{% block title %}
    Run Script
{% endblock %}


{% block script %}
    {{ block.super }}
    {% include "webgateway/base/includes/script_src_popup.html" %}
    {% include "webgateway/base/includes/jquery-ui.html" %}

    <script type="text/javascript" src="{% static "3rdparty/jquery.form-4.3.0.js" %}"></script>

    <script>
        $(function(){
            OME.setupAjaxError("{% url 'fsend' %}");      // just in case!

            $('#script_form').ajaxForm({
                beforeSubmit: function() {
                    $("#submit").prop('disabled', true);
                },
                success: function(data) {
                    window.opener.OME.showActivities();
                    self.close();
                }
            });

            // For 'number' fields, only allow numbers input.
            $(".number").numbersOnly();
        });
    </script>

    <style type="text/css">
    body {
        font-size: 70% !important;
    }
    .img_panel {
        <!--[if lte IE 8]>width: 100px;<![endif]-->
        ;
        max-width: 100px;
        max-height: 100px;
        
        border-width: 0px;
        margin: 5px;
        vertical-align:middle;
    }
    .toggle_channel {
        padding:4px; margin:2px; padding-left:6px; border-radius: 6px;
    }
    .toggle_channel input[type=text] {
        font-size:10px;
        border:solid white 1px;
        opacity:0.8;
    }
    #figure_table {
        margin-left:auto;
        margin-right:auto;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 5px;
        background: #fff;
        border: 1px solid white;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        padding: 30px 50px;
    }
    #img_size_slider {
        position: absolute;
        top: 12px;
        left: 100px;
    }
    .ui-slider {
        border: 1px solid #aaa;
        height: 6px;
        width: 150px;
    }
    .ui-slider-handle {
        border: 1px solid #aaa;
        background: #727C86;
        border-radius: 3px;
        top: -.4em !important;
        transition: left 0s;
    }
    #middle_header {
        height: 35px;
    }
    #script_content {
        position: absolute;
        top:0px; left:0px; right:0px; bottom:35px;
        overflow:auto;
        padding:10px;
        background-color: #EFF1F4
    }
    div.footer {
        background: #ddd; 
        position:fixed; 
        bottom:0px; left:0px; right:0px;
        padding: 7px;
        border-top: 1px solid #aaa;
        font-size: 120%;
    }
    .zsection {
        margin-left:25px;
        padding:3px;
    }
    .rowLabel, .dragHandle {
        vertical-align: middle;
    }
    </style>

{% endblock %}


{% block middle_header_left %}
<!-- Empty block removes the header links here -->
{% endblock %}


{% block content %}


<div id="script_content">

<form id="script_form" method="post" action="{% url 'script_run' scriptId %}">{% csrf_token %}

    <div style="margin-left:auto; margin-right:auto; width:500px">
    {% block script_form %}

        <h1>Create Thumbnail Figure</h1>

        <hr/>

        <!-- drop-down list of enums -->
        <select name="Data_Type">
            <option value="Dataset"  >Dataset</option>
            <option value="Image"  selected="True"  >Image</option>
        </select>

        <input type="text" name="IDs" value="{{ idString }}" style="display:none">


        <input type="text" name="Tag_IDs"  />

        <input type="checkbox" name="Show_Untagged_Images"  />

        <input type="text" name="Parent_ID" class="number"  />

        <input type="text" name="Thumbnail_Size" class="number"  value="100"  />

        <input type="text" name="Max_Columns" class="number"  value="10"  />

        <!-- drop-down list of enums -->
        <select name="Format">
            <option value="JPEG"  selected="True"  >JPEG</option>
            <option value="PNG"  >PNG</option>
            <option value="TIFF"  >TIFF</option>
        </select>

        <input type="text" name="Figure_Name"  value="Thumbnail_Figure"  />

    {% endblock %}
    </div>

    {% block custom_controls %}
    {% endblock %}

    <div class="footer">
        <div style="float:right">
            <a href="#" onClick="self.close()">Cancel</a>
            <input id="submit" type="submit" value="{% block submit_text %}Create Figure{% endblock %}" />
        </div>
        <a href="{% url 'get_original_file' scriptId %}" target="_blank">View Script</a>

        <div id="img_size_slider" title="Zoom Preview Figure"></div>
    </div>

</form>


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

{% block figure_preview_container %}
<table id="figure_table">
    <tr><td>
        <div style="padding:10px">

    {% block figure_preview %}
    {% endblock %}

        </div>
    </td></tr>
</table>
{% endblock %}


</div>
{% endblock %}
