{% load i18n %}

<div class="mb-4" data-automation-editor hidden>
  <div class="mb-3">
    <div class="btn-group"
         role="group"
         aria-label="{% translate "Workflow editing mode" %}">
      <input type="radio"
             class="btn-check"
             name="automation_mode"
             id="automation-mode-editor"
             value="editor"
             checked />
      <label class="btn btn-outline-primary" for="automation-mode-editor">{% translate "Editor" %}</label>
      <input type="radio"
             class="btn-check"
             name="automation_mode"
             id="automation-mode-yaml"
             value="yaml" />
      <label class="btn btn-outline-primary" for="automation-mode-yaml">{% translate "YAML" %}</label>
    </div>
    <div class="form-text">
      {% translate "Both modes edit the same workflow, and switching between them keeps unsaved changes." %}
    </div>
  </div>

  <div class="alert alert-warning" role="alert" hidden data-automation-alert></div>

  <div data-automation-pane="editor">
    <fieldset class="mb-4">
      <legend class="h5">{% translate "Triggers" %}</legend>
      <p class="form-text">
        {% translate "Events starting the workflow. Without any trigger it can only be run manually." %}
      </p>
      <div data-automation-list="triggers"></div>
      <div class="input-group mt-2">
        <label class="input-group-text" for="automation-add-trigger">{% translate "Trigger" %}</label>
        <select class="form-select"
                id="automation-add-trigger"
                data-automation-picker="triggers">
          {% for node in editor.triggers %}<option value="{{ node.kind }}">{{ node.title }}</option>{% endfor %}
        </select>
        <button type="button" class="btn btn-outline-secondary" data-automation-add="triggers">
          {% translate "Add trigger" %}
        </button>
      </div>
    </fieldset>

    <fieldset class="mb-4">
      <legend class="h5">{% translate "Conditions" %}</legend>
      <p class="form-text">{% translate "All conditions have to pass before any action runs." %}</p>
      <div data-automation-list="conditions"></div>
      <div class="input-group mt-2">
        <label class="input-group-text" for="automation-add-condition">{% translate "Condition" %}</label>
        <select class="form-select"
                id="automation-add-condition"
                data-automation-picker="conditions">
          {% for node in editor.conditions %}<option value="{{ node.kind }}">{{ node.title }}</option>{% endfor %}
        </select>
        <button type="button"
                class="btn btn-outline-secondary"
                data-automation-add="conditions">{% translate "Add condition" %}</button>
      </div>
    </fieldset>

    <fieldset class="mb-4">
      <legend class="h5">{% translate "Actions" %}</legend>
      <p class="form-text">{% translate "Operations performed in this order once the conditions pass." %}</p>
      <div data-automation-list="actions"></div>
      <div class="input-group mt-2">
        <label class="input-group-text" for="automation-add-action">{% translate "Action" %}</label>
        <select class="form-select" id="automation-add-action" data-automation-picker="actions">
          {% for node in editor.actions %}<option value="{{ node.kind }}">{{ node.title }}</option>{% endfor %}
        </select>
        <button type="button" class="btn btn-outline-secondary" data-automation-add="actions">
          {% translate "Add action" %}
        </button>
      </div>
    </fieldset>
  </div>

  <p class="visually-hidden" aria-live="polite" data-automation-status></p>
</div>

{% include "addons/automation_node_templates.html" %}