{% extends "addons/addon_base.html" %}

{% load crispy_forms_tags i18n permissions static translations %}

{% block addon_content %}

  {% if addon %}
    {% include "addons/addon_head.html" with addon=addon hide_scope_badges=True %}
  {% endif %}

  {% if integration_instructions %}
    <section class="card" aria-labelledby="addon-integration-title">
      <div class="card-header">
        <h4 class="card-title" id="addon-integration-title">{% translate "Integration instructions" %}</h4>
      </div>
      <div class="card-body">{{ integration_instructions|safe }}</div>
    </section>
  {% endif %}

  {% if form %}
    <form method="post" id="addon-form">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">{% translate "Configure add-on" %}</h4>
        </div>
        <div class="card-body">
          <input type="hidden" name="form" value="1" />
          <input type="hidden"
                 name="name"
                 value="{% if instance %}{{ instance.name }}{% else %}{{ addon.name }}{% endif %}" />
          {% crispy form %}
        </div>
        <div class="card-footer">
          <input type="submit" value="{% translate "Save" %}" class="btn btn-primary" />
          {% if instance and addon.has_preview and not execution_form %}
            <button type="submit"
                    name="preview"
                    value="1"
                    class="btn btn-primary">{% translate "Preview without changes" %}</button>
          {% endif %}
        </div>
      </div>
    </form>
  {% elif not integration_instructions %}
    <p class="help-block">{% translate "This add-on has no settings." %}</p>
  {% endif %}

  {% if preview_result and not execution_form %}
    <section aria-labelledby="addon-preview-title">
      <h2 id="addon-preview-title">{% translate "Preview" %}</h2>
      <p>{% translate "No operations were executed." %}</p>
      <pre>{{ preview_result }}</pre>
    </section>
  {% endif %}

  {% if instance and instance.can_run_manually %}
    <form method="post" id="addon-run-form">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">{% translate "Run add-on" %}</h4>
        </div>
        <div class="card-body">
          {% csrf_token %}
          {% if execution_form %}
            <p>{% translate "Uses the saved workflow. Clear “Preview without changes” to execute actions." %}</p>
            <p>{% translate "Component scope selects strings across the component. Trigger scope selects strings affected by the change." %}</p>
            {% crispy execution_form %}
            {% if preview_result %}
              <section aria-labelledby="automation-preview-title">
                <h2 id="automation-preview-title">{% translate "Automation preview" %}</h2>
                <p>{% translate "No operations were executed. Conditions depending on planned changes are shown as unknown." %}</p>
                <pre>{{ preview_result }}</pre>
              </section>
            {% endif %}
          {% else %}
            <p>{% translate "Schedule this add-on to run as soon as possible." %}</p>
          {% endif %}
        </div>
        <div class="card-footer">
          <button type="submit" name="run" value="1" class="btn btn-primary">{% translate "Run now" %}</button>
        </div>
      </div>
    </form>
  {% endif %}

  {% if instance %}
    <form method="post">
      <div class="card">
        <div class="card-header text-bg-danger">
          <h4 class="card-title">{% translate "Danger zone" %}</h4>
        </div>
        <div class="card-body">
          {% csrf_token %}
          <p>{% translate "Uninstalling the add-on stops it from running and removes its configuration." %}</p>
        </div>
        <div class="card-footer">
          <button type="submit" name="delete" value="1" class="btn btn-danger">{% translate "Uninstall" %}</button>
        </div>
      </div>
    </form>
  {% endif %}

{% endblock addon_content %}

{% block extra_script %}
  {{ block.super }}
  {% if form.fields.event_filter %}
    <script defer src="{% static 'js/addon-events.js' %}"></script>
  {% endif %}
  {% if form.guided_presets %}
    <script defer src="{% static 'js/addon-discovery.js' %}"></script>
  {% endif %}
  {% if form.fields.workflow %}
    <script defer src="{% static 'js/vendor/js-yaml.js' %}"></script>
    <script defer src="{% static 'js/automation-editor.js' %}"></script>
  {% endif %}
{% endblock extra_script %}