{% extends "webgateway/core_html.html" %}
{% load i18n %}

{% comment %}
<!--
  Copyright (C) 2011-2020 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 generated from parameters of an OMERO script.
    On form submission, the 'Activities' window is opened to display currently running scripts.
-->
{% endcomment %}

{% block title %}
    Run {{ paramData.name }}
{% endblock %}


{% block link %}

    <link rel="stylesheet" href="{% static "3rdparty/jquery.chosen-1.2.0/chosen.css" %}" type="text/css" media="screen"/>

    <style type="text/css">
        h3 {
            margin: 0px;
        }
        div.param {
            margin: 3px;
            font-size: 85%;
        }
        div.parent {
            border: 1px solid #aaa;
            margin: 3px 0px;
        }
        div.parent > div:first-child {
            background: #ddd;
            border-bottom: 1px solid #ccc;
            margin: 0px;
            padding: 2px;
        }
        input {
            padding: 0px;
            margin: 0px;
        }
        body {
            font-family: Arial;
            background: #eee;
            margin: 0px;
            padding: 0px;
        }
        #script_desc {
            font-size: 85%;
            margin: 8px 0px;
            background: #ddd;
            border: 1px solid #aaa;
        }
        #script_desc p {
            margin: 2px;
        }
        div.footer {
            background: #ddd; 
            position:fixed; 
            bottom:0px; left:0px; right:0px;
            padding: 7px;
            border-top: 1px solid #aaa;
            font-size: 80%;
        }
        a {
            text-decoration: none;
        }

    </style>
{% endblock %}


{% block script %}
    {{ block.super }}
    {% include "webgateway/base/includes/script_src_jquery.html" %}
    {% include "webgateway/base/includes/script_src_popup.html" %}
    {% include "webgateway/base/includes/jquery-ui.html" %}
    <script type="text/javascript" src="{% static "webclient/javascript/jquery.form-3.51.js" %}"></script>
    <script type="text/javascript" src="{% static "3rdparty/jquery.chosen-1.2.0/chosen.jquery.js" %}"></script>
    <script type="text/javascript">

        $(document).ready(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 any 'list' parameters with enum options, controls to add / remove
            $(".addListSelect").click(function(e) {
                var $lastSelect = $(this).parent().children('select').last();
                $lastSelect.after($lastSelect.clone());
                $lastSelect.after(" ");
                e.preventDefault();
                return false;
            });
            $(".removeListSelect").click(function(e) {
                var selectCount = $(this).parent().find('select').length;
                if (selectCount > 1) {
                    var $lastSelect = $(this).parent().children('select').last();
                    $lastSelect.remove();
                }
                e.preventDefault();
                return false;
            });

            // for any 'map' parameters in the UI, add controls to add key:value fields
            $(".addKeyValue").click(function() {
                var $keyValueTable = $(this).parent().next().find(".map");
                var rowCount = $keyValueTable.find('tr').length;
                var $newRow = $("tr", $keyValueTable).first().clone();
                var $keyInput = $newRow.find('input:eq(0)');
                var $valueInput = $newRow.find('input:eq(1)');
                // give the new inputs unique names, based on number of key:value pairs
                // E.g. name='Channel_Names_key0' -> 'Channel_Names_key1'
                $keyInput.attr('name', $keyInput.attr('name').slice(0,-1)+rowCount);
                $valueInput.attr('name', $valueInput.attr('name').slice(0,-1)+rowCount);
                $keyInput.attr('value', "");
                $valueInput.attr('value', "");
                $keyValueTable.append($newRow);
                return false;
            });
            $(".removeKeyValue").click(function(e) {
                var $keyValueTable = $(this).parent().next().find(".map");
                var rowCount = $keyValueTable.find('tr').length;
                if (rowCount > 1) {
                    var $lastRow = $("tr", $keyValueTable).last();
                    $lastRow.remove();
                }
                e.preventDefault();
                return false;
            });

            // If 'Data_Type' changes, clear 'IDs' (but note values to add back)
            var $Data_Type = $("select[name=Data_Type]"),
                $IDs = $("input[name=IDs]");
            var noteIDs = function() {
                var dt = $Data_Type.val(),
                    ids = $IDs.val();
                $Data_Type.data(dt, ids);
            };
            noteIDs();                  // note the initial value...
            $IDs.keyup(noteIDs);                // ...update any changes
            $Data_Type.change(function() {      // Clear IDs (or add back previous data)
                var dt = $Data_Type.val(),
                    ids = $Data_Type.data(dt);
                if (typeof ids !== "undefined") {
                    $IDs.val(ids);
                } else {
                    $IDs.val("");
                }
            });

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

            // Only use the chosen plugin if we have > 20 options
            $("select").each(function() {
                var limit = 20;
                var $this = $(this);
                if ($('option', $this).length > limit) {
                    $this.chosen({
                        search_contains: true,
                        width: '300px'
                    });
                }
            });

            // Focus first input
            $('input:visible, select:visible').first().focus();
        });
    </script>
{% endblock %}


{% block body %}
    <form id='script_form' method="post" action="{% url 'script_run' paramData.id %}">{% csrf_token %}
        <div style="padding:10px; margin-bottom:40px">
            <h3 id="scriptName">{{ paramData.name }}</h3>
            <div id='script_desc'>{{ paramData.description|linebreaks }}
            
            {% if paramData.authors %}<div> <b>Authors:</b> {{ paramData.authors }} </div>{% endif %}
            {% if paramData.contact %}<div> <b>Contact:</b> {{ paramData.contact }} </div>{% endif %}
            {% if paramData.version %}<div> <b>Version:</b> {{ paramData.version }} </div>{% endif %}
            
            </div>

            {% for i in paramData.inputs %}
                <div class="{% if i.required %}required{% endif %}{% if i.children %} parent{% endif %}">

                {% include "webclient/scripts/include_param.html" %}

                {% if i.children %}
                    <div style="margin-left: 20px">
                        {% for i in i.children %}
                            {% include "webclient/scripts/include_param.html" %}
                        {% endfor %}
                    </div>
                {% endif %}
                </div>
            {% endfor %}
        </div>
        <div class="footer">
            <div style="float:right">
                <a href="#" tabIndex="3" onClick="self.close()">Cancel</a>
                <input id="submit" tabIndex="2" type="submit" value="Run Script" />
            </div>
            <a href="{% url 'get_original_file' scriptId %}" tabIndex="0" target="_blank">
                View Script
            </a>
        </div>
    </form>
{% endblock %}
