{% extends "base.html" %}

{% block title %}Action — {{ service_name }}{% endblock %}

{% block stylesheets %}
  {{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-select.min.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-toggle.min.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/pygments.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/inscrybmde.min.css') }}" />
{% if use_schema_editor %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/schema_editor.css') }}">
{% endif %}
{% endblock %}



{% block scripts %}
  {{ super() }}
  <script src="{{ url_for('static', filename='js/bootstrap-select.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/bootstrap-toggle.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/inscrybmde.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/markdown_image_upload.js') }}"></script>
  {% if use_schema_editor %}
  <script src="{{ url_for('static', filename='js/schema_editor.js') }}"></script>
  {% endif %}
  <script>
  $(function(){
    function updateDescriptionMarkdown() {
      if ($('#input-markdown').prop('checked')) {
        window.mde_descrption = new InscrybMDE({
          element: $("#input-description")[0],
          indentWithTabs: false,
          spellChecker: false,
          status: false,
          hideIcons: ["guide", "fullscreen", "side-by-side", "quote"],
          showIcons: ["code", "table"],
          minHeight: '300px',
        });
        setupImageDragAndDrop(window.mde_descrption);
      } else {
        if (window.mde_descrption) {
          window.mde_descrption.toTextArea();
          window.mde_descrption = null;
        }
      }
    }
    $('#input-markdown').change(updateDescriptionMarkdown);
    updateDescriptionMarkdown();
  });
  </script>
{% endblock %}

{% block content %}
  {% if not current_user.is_admin %}
    <div class="alert alert-warning">
      <p><strong>Warning:</strong> Custom Actions are an advanced feature that most users of {{ service_name }} will not need. See the <a href="https://scientific-it-systems.iffgit.fz-juelich.de/SampleDB/user_guide/actions.html">User Guide</a> for more information.</p>
    </div>
  {% endif %}
  <form method="post">
  {{ action_form.hidden_tag() }}
    <div class="col-md-12">
      <div class="form-group {% if action_form.name.name in action_form.errors %}has-error{% endif %}">
        <label for="input-name" class="control-label">Name</label>
         <input type="text" class="form-control" id="input-name" placeholder="Name" name="{{ action_form.name.name }}" value="{{ action_form.name.data or '' }}">
      </div>
      {% if may_set_user_specific %}
      <div class="checkbox">
        <label for="input-is_user_specific" style="font-weight:700">
          <input type="checkbox" id="input-is_user_specific" name="{{ action_form.is_user_specific.name }}" {% if action_form.is_user_specific.data %}checked="checked"{% endif %}> User specific action
        </label>
      </div>
      {% endif %}
      <div class="checkbox {% if action_form.description.name in action_form.errors %}has-error{% endif %}">
        <label for="input-public" style="font-weight:700">
          <input type="checkbox" id="input-public" name="{{ action_form.is_public.name }}" {% if action_form.is_public.data %}checked="checked"{% endif %} {% if not may_change_public %}disabled="disabled"{% endif %}> Public
        </label>
      </div>
      <div class="form-group {% if action_form.type.name in action_form.errors %}has-error{% endif %}">
        <label for="input-type" class="control-label">Type</label>
        <select class="selectpicker form-control" id="input-type" name="{{ action_form.type.name }}" {% if not may_change_type %}disabled="disabled"{% endif %}>
          {% for action_type in get_action_types() %}
            {% if not action_type.admin_only or current_user.is_admin or action_form.type.data == action_type.id %}
          <option value="{{ action_type.id }}" {% if action_form.type.data == action_type.id %}selected="selected"{% endif %}>{{ action_type.name}}</option>
            {% endif %}
          {% endfor %}
        </select>
      </div>
      <div class="form-group {% if action_form.instrument.name in action_form.errors %}has-error{% endif %}" {% if action_form.instrument.choices | length == 1 and action_form.instrument.choices[0][0] == '-1' %}style="display: none"{% endif %}>
        <label for="input-instrument" class="control-label">Instrument</label>
        <select class="selectpicker form-control" id="input-instrument" name="{{ action_form.instrument.name }}" {% if not may_change_instrument %}disabled="disabled"{% endif %}>
          {% for instrument_id, instrument_name in action_form.instrument.choices %}
          <option value="{{ instrument_id }}" {% if action_form.instrument.data == instrument_id %}selected="selected"{% endif %}>{% if instrument_id == '-1' %}&mdash;{% else %}{{ instrument_name }}{% endif %}</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group {% if action_form.description.name in action_form.errors %}has-error{% endif %}" style="min-height: 395px;">
        <label for="input-description" class="control-label">Description</label>
        <label for="input-markdown" style="font-weight:400" class="pull-right">
          <input type="checkbox" id="input-markdown" name="{{ action_form.is_markdown.name }}" {% if action_form.is_markdown.data %}checked="checked"{% endif %}> Use Markdown syntax
        </label>
        <textarea class="form-control" style="resize: vertical; min-height: 371px" id="input-description" name="{{ action_form.description.name }}" placeholder="Description">{{ action_form.description.data or '' }}</textarea>
      </div>
      <div class="checkbox">
        <label for="input-is_hidden" style="font-weight:400">
          <input type="checkbox" id="input-is_hidden" name="{{ action_form.is_hidden.name }}" {% if action_form.is_hidden.data %}checked="checked"{% endif %}> Hide this action from action lists
        </label>
      </div>
      <div class="form-group {% if action_form.schema.name in action_form.errors %}has-error{% endif %}">
        <label for="input-schema" class="control-label">Schema</label>
        {% if use_schema_editor %}
          <script>
          {% if error_message is not none %}
            window.schema_editor_error_message = {{ error_message | tojson }};
          {% else %}
            window.schema_editor_error_message = null;
          {% endif %}
          </script>
          <div class="schema-editor" id="schema-editor"></div>
        {% endif %}
        <textarea class="form-control" rows="{% if schema_json %}{{ schema_json.splitlines() | length }}{% else %}5{% endif %}" id="input-schema" name="{{ action_form.schema.name }}" placeholder="Schema">{{ action_form.schema.data or ''}}</textarea>
      </div>
      {% if pygments_output %}
        {{ pygments_output | safe }}
        {% if error_message is not none %}
        <div class="schema-error-message"><strong>Error:</strong> {{ error_message }}</div>
        {% endif %}
      {% endif %}
    </div>
    <div class="form-group row clearfix" style="padding-right:0.75em">
      <div class="col-md-3 col-md-offset-6">
        <a href="{{ url_for('.actions') }}" class="btn btn-default pull-right" style="width:20em">Cancel</a>
      </div>
      <div class="col-md-3">
        <button type="submit" name="action_submit" class="btn btn-primary pull-right" style="width:20em">{{ submit_text }}</button>
      </div>
    </div>
  </form>


  {% if use_schema_editor %}
  <div id="schema-editor-templates">
    <div class="well schema-editor-root-object">
      <div class="schema-editor-property-settings">
        <div class="schema-editor-form-group">
          <label class="control-label">Title</label>
          <input type="text" class="form-control schema-editor-root-object-title-input" placeholder="Name" value="">
          <div class="help-block"></div>
        </div>
        <div class="schema-editor-form-group">
          <label class="control-label">Tags</label>
          <div class="checkbox">
            <label>
              <input type="checkbox" data-onstyle="default" data-width="176" data-on="Enabled" data-off="Disabled" class="schema-editor-root-object-tags-input">
              <span class="sr-only">Tags</span>
            </label>
          </div>
        </div>
        <div class="schema-editor-form-group">
          <label class="control-label schema-editor-root-object-hazards-label">Hazards</label>
          <div class="checkbox">
            <label>
              <input type="checkbox" data-onstyle="default" data-width="176" data-on="Enabled" data-off="Disabled" class="schema-editor-root-object-hazards-input">
              <span class="sr-only">Hazards</span>
            </label>
          </div>
        </div>
      </div>
      <div><span class="help-block schema-editor-global-help"></span></div>
      <div><span class="schema-editor-property-label">Properties</span></div>
      <div class="schema-editor-root-object-properties"></div>
      <div class="schema-editor-new-property-controls">
        <i class="fa fa-fw fa-plus fa-lg schema-editor-create-property-button" aria-hidden="true" data-toggle="tooltip" data-placement="right" data-html="true" title="Add&nbsp;property"></i>
      </div>
    </div>

    <div class="well schema-editor-property schema-editor-generic-property">
      <div class="schema-editor-property-controls">
        <i class="fa fa-fw fa-times fa-lg schema-editor-delete-property-button" aria-hidden="true" data-toggle="tooltip" data-placement="right" data-html="true" title="Remove&nbsp;property"></i>
        <i class="fa fa-fw fa-arrow-up fa-lg schema-editor-move-property-up-button" aria-hidden="true" data-toggle="tooltip" data-placement="right" data-html="true" title="Move&nbsp;property&nbsp;up"></i>
        <i class="fa fa-fw fa-arrow-down fa-lg schema-editor-move-property-down-button" aria-hidden="true" data-toggle="tooltip" data-placement="right" data-html="true" title="Move&nbsp;property&nbsp;down"></i>
      </div>
      <div class="schema-editor-property-settings">
        <div class="schema-editor-form-group">
          <label class="control-label schema-editor-generic-property-name-label" data-toggle="tooltip" data-placement="top" title="The internal name of the property, e.g. for use in search queries. Must only consist of characters, numbers and single underscores. Examples: name, temperature, distance_z">Name <i class="fa fa-question-circle" aria-hidden="true"></i></label>
          <input type="text" class="form-control schema-editor-generic-property-name-input" placeholder="Name" value="">
          <div class="help-block"></div>
        </div>
        <div class="schema-editor-form-group">
          <label class="control-label schema-editor-generic-property-title-label" data-toggle="tooltip" data-placement="top" title="The title of the property. Examples: Name, Temperature, Distance Z">Title <i class="fa fa-question-circle" aria-hidden="true"></i></label>
          <input type="text" class="form-control schema-editor-generic-property-title-input" placeholder="Title" value="">
          <span class="help-block"></span>
        </div>
        <div class="schema-editor-form-group">
          <label class="control-label schema-editor-generic-property-type-label">Type</label>
          <select class="form-control schema-editor-generic-property-type-input">
            <option value="text">Text (Simple)</option>
            <option value="multiline">Text (Multiline)</option>
            <option value="choice">Text (Choice)</option>
            <option value="quantity">Quantity</option>
            <option value="bool">Boolean</option>
            <option value="datetime">Datetime</option>
            <option value="sample">{{ sample_action_type.object_name }}</option>
            <option value="measurement">{{ measurement_action_type.object_name }}</option>
            <option value="user">User</option>
            <option value="object_reference">Object Reference</option>
          </select>
        </div>
        <div class="schema-editor-form-group">
          <label class="control-label schema-editor-generic-property-required-label">Required</label>
          <div class="checkbox">
            <label>
              <input type="checkbox" data-onstyle="default" data-width="176" data-on="Yes" data-off="No" class="schema-editor-generic-property-required-input">
              <span class="sr-only">Required</span>
            </label>
          </div>
        </div>
        <div class="schema-editor-form-group">
          <label class="schema-editor-checkbox"><input type="checkbox" class="schema-editor-generic-property-note-checkbox"></label><label class="control-label schema-editor-generic-property-default-label" data-toggle="tooltip" data-placement="top" title="Additional information on the property.">Note <i class="fa fa-question-circle" aria-hidden="true"></i></label>
          <input type="text" class="form-control schema-editor-generic-property-note-input" placeholder="Note" value="">
        </div>
      </div>

      <div class="schema-editor-property-settings schema-editor-text-property-settings">
        <div class="schema-editor-form-group">
          <label class="schema-editor-checkbox"><input type="checkbox" class="schema-editor-text-property-placeholder-checkbox"></label><label class="control-label schema-editor-text-property-placeholder-label">Placeholder</label>
          <input type="text" class="form-control schema-editor-text-property-placeholder-input" placeholder="Placeholder" value="">
        </div>
        <div class="schema-editor-form-group">
          <label class="schema-editor-checkbox"><input type="checkbox" class="schema-editor-text-property-default-checkbox"></label><label class="control-label schema-editor-text-property-default-label">Default</label>
          <input type="text" class="form-control schema-editor-text-property-default-input" placeholder="Default" value="">
        </div>
        <div class="schema-editor-form-group">
          <label class="schema-editor-checkbox"><input type="checkbox" class="schema-editor-text-property-pattern-checkbox"></label><label class="control-label schema-editor-text-property-pattern-label" data-toggle="tooltip" data-placement="top" title="A regular expression to restrict what values are valid for the property. Examples: ^.*$, ^Sample-[0-9]+$">Pattern <i class="fa fa-question-circle" aria-hidden="true"></i></label>
          <input type="text" class="form-control schema-editor-text-property-pattern-input" placeholder="Pattern" value="">
        </div>
        <div class="schema-editor-form-group">
          <label class="schema-editor-checkbox"><input type="checkbox" class="schema-editor-text-property-minlength-checkbox"></label><label class="control-label schema-editor-text-property-minlength-label">Minimum Length</label>
          <input type="text" class="form-control schema-editor-text-property-minlength-input" placeholder="Minimum Length" value="">
          <span class="help-block"></span>
        </div>
        <div class="schema-editor-form-group">
          <label class="schema-editor-checkbox"><input type="checkbox" class="schema-editor-text-property-maxlength-checkbox"></label><label class="control-label schema-editor-text-property-maxlength-label">Maximum Length</label>
          <input type="text" class="form-control schema-editor-text-property-maxlength-input" placeholder="Maximum Length" value="">
          <span class="help-block"></span>
        </div>
      </div>

      <div class="schema-editor-property-settings schema-editor-choice-property-settings">
        <div class="schema-editor-form-group">
          <label class="control-label schema-editor-choice-property-choices-label" data-toggle="tooltip" data-placement="top" title="A list of values the user can choose from, one per line.">Choices <i class="fa fa-question-circle" aria-hidden="true"></i></label>
          <textarea rows="3" class="form-control schema-editor-choice-property-choices-input" placeholder="Choices"></textarea>
          <span class="help-block"></span>
        </div>
        <div class="schema-editor-form-group">
          <label class="schema-editor-checkbox"><input type="checkbox" class="schema-editor-choice-property-default-checkbox"></label><label class="control-label schema-editor-choice-property-default-label">Default</label>
          <input type="text" class="form-control schema-editor-choice-property-default-input" placeholder="Default" value="">
        </div>
      </div>

      <div class="schema-editor-property-settings schema-editor-multiline-property-settings">
        <div class="schema-editor-form-group">
          <label class="schema-editor-checkbox"><input type="checkbox" class="schema-editor-multiline-property-placeholder-checkbox"></label><label class="control-label schema-editor-multiline-property-placeholder-label">Placeholder</label>
          <input type="text" class="form-control schema-editor-multiline-property-placeholder-input" placeholder="Placeholder" value="">
        </div>
        <div class="schema-editor-form-group-wide">
          <label class="schema-editor-checkbox"><input type="checkbox" class="schema-editor-multiline-property-default-checkbox"></label><label class="control-label schema-editor-multiline-property-default-label">Default</label>
          <textarea rows="1" class="form-control schema-editor-multiline-property-default-input" placeholder="Default"></textarea>
        </div>
        <div class="schema-editor-form-group">
          <label class="schema-editor-checkbox"><input type="checkbox" class="schema-editor-multiline-property-minlength-checkbox"></label><label class="control-label schema-editor-multiline-property-minlength-label">Minimum Length</label>
          <input type="text" class="form-control schema-editor-multiline-property-minlength-input" placeholder="Minimum Length" value="">
          <span class="help-block"></span>
        </div>
        <div class="schema-editor-form-group">
          <label class="schema-editor-checkbox"><input type="checkbox" class="schema-editor-multiline-property-maxlength-checkbox"></label><label class="control-label schema-editor-multiline-property-maxlength-label">Maximum Length</label>
          <input type="text" class="form-control schema-editor-multiline-property-maxlength-input" placeholder="Maximum Length" value="">
          <span class="help-block"></span>
        </div>
      </div>

      <div class="schema-editor-property-settings schema-editor-bool-property-settings">
        <div class="schema-editor-form-group">
          <label class="schema-editor-checkbox"><input type="checkbox" class="schema-editor-bool-property-default-checkbox"></label><label class="control-label schema-editor-bool-property-default-label">Default</label>
          <div class="checkbox">
            <label>
              <input type="checkbox" data-onstyle="default" data-width="176" data-on="Yes" data-off="No" class="schema-editor-bool-property-default-input">
              <span class="sr-only">Default</span>
            </label>
          </div>
        </div>
      </div>

      <div class="schema-editor-property-settings schema-editor-quantity-property-settings">
        <div class="schema-editor-form-group">
          <label class="schema-editor-checkbox"><input type="checkbox" class="schema-editor-quantity-property-placeholder-checkbox"></label><label class="control-label schema-editor-quantity-property-placeholder-label">Placeholder</label>
          <input type="text" class="form-control schema-editor-quantity-property-placeholder-input" placeholder="Placeholder" value="">
        </div>
        <div class="schema-editor-form-group">
          <label class="control-label schema-editor-quantity-property-units-label">Units</label>
          <input type="text" class="form-control schema-editor-quantity-property-units-input" id="input-schema-name-text-default" placeholder="Units" value="">
          <span class="help-block"></span>
        </div>
        <div class="schema-editor-form-group">
          <label class="schema-editor-checkbox"><input type="checkbox" class="schema-editor-quantity-property-default-checkbox"></label><label class="control-label schema-editor-quantity-property-default-label">Default</label>
          <input type="text" class="form-control schema-editor-quantity-property-default-input" placeholder="Default" value="">
          <span class="help-block"></span>
        </div>
      </div>
    </div>

  </div>
  <div class="modal fade" id="schemaEditorWarningModal" tabindex="-1" role="dialog" aria-labelledby="schemaEditorWarningModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="schemaEditorWarningModalLabel">Schema Editor Warning</h4>
        </div>
        <div class="modal-body">
          <p>The schema for this action contains advanced features which the graphical schema editor does not support. If you continue, these might be removed from the schema.</p>
          <p>If you wish to edit the schema with the more text-based editor, you can enable it in your <a href="{{ url_for('.user_me_preferences') }}">preferences</a>.</p>
        </div>
        <div class="modal-footer">
          <a class="btn btn-primary" href="{{ url_for('.user_me_preferences') }}">Edit Preferences</a>
          <button type="button" class="btn btn-default" data-dismiss="modal">Use Schema Editor</button>
        </div>
      </div>
    </div>
  </div>
  {% endif %}

{% endblock %}
