<div class="modal-background"></div>
<div class="modal-card">
  <header class="modal-card-head">
    <p class="modal-card-title">{{ run.pipeline_name }}</p>
    <button class="delete" aria-label="close"></button>
  </header>
  <div class="notification has-background-info-light has-text-weight-semibold is-radiusless mb-0">
    {{ run.description }}
  </div>
  <section class="modal-card-body">
    <div class="field is-grouped is-grouped-multiline">
      <div class="control">
        <div class="tags has-addons">
          <span class="tag is-dark">Run</span>
          {% include "scanpipe/includes/run_status_tag.html" with run=run only %}
        </div>
      </div>
      {% if run.status == run.Status.NOT_STARTED %}
        <a href="{% url 'project_execute_pipeline' project.slug run.uuid %}" class="execute-pipeline-link has-text-weight-bold">
          <i class="fa-solid fa-play-circle"></i>
          Run Pipeline
        </a>
      {% endif %}
      {% if run.task_id %}
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-dark">Task ID</span>
            <span class="tag is-info">{{ run.task_id }}</span>
          </div>
        </div>
      {% endif %}
      {% if run.status == run.Status.NOT_STARTED or run.status == run.Status.QUEUED %}
        <a href="{% url 'project_delete_pipeline' project.slug run.uuid %}" class="execute-pipeline-link has-text-danger ml-3">
          <i class="fa-solid fa-trash-alt"></i>
          Delete Pipeline
        </a>
      {% endif %}
      {% if run.task_exitcode %}
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-dark">Exit code</span>
            <span class="tag is-info">{{ run.task_exitcode }}</span>
          </div>
        </div>
      {% endif %}
      {% if run.execution_time %}
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-dark">Execution time</span>
            <span class="tag is-info">
              {{ run.execution_time_for_display }}
            </span>
          </div>
        </div>
      {% endif %}
      {% if run.status == run.Status.RUNNING %}
        <a href="{% url 'project_stop_pipeline' project.slug run.uuid %}" class="execute-pipeline-link has-text-danger">
          <i class="fa-solid fa-ban"></i>
          Stop Pipeline
        </a>
      {% endif %}
    </div>
    <div class="field is-grouped is-grouped-multiline">
      <div class="control">
        <div class="tags has-addons">
          <span class="tag is-dark">Created date</span>
          <span class="tag is-info">{{ run.created_date|date:'N j, Y, P T' }}</span>
        </div>
      </div>
      {% if run.task_start_date %}
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-dark">Start date</span>
            <span class="tag is-info">{{ run.task_start_date|date:'N j, Y, P T' }}</span>
          </div>
        </div>
      {% endif %}
      {% if run.task_end_date %}
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-dark">End date</span>
            <span class="tag is-info">{{ run.task_end_date|date:'N j, Y, P T' }}</span>
          </div>
        </div>
      {% endif %}
    </div>
    {% if run.log %}
      <span class="tag is-dark tag-header">Run log</span>
      <figure class="highlight log border-no-top-left-radius">
        <pre class="language-toml wrap p-1"><code>{{ run.log }}</code></pre>
      </figure>
    {% endif %}
    {% if run.task_output %}
      <span class="tag is-dark tag-header">Task output</span>
      <figure class="highlight log border-no-top-left-radius">
        <pre class="language-python wrap p-1"><code>{{ run.task_output }}</code></pre>
      </figure>
    {% endif %}
    {% if webhook_subscriptions %}
      <hr>
      {% for webhook in webhook_subscriptions %}
        <div class="field is-grouped is-grouped-multiline">
          <div class="control">
            <div class="tags has-addons">
              <span class="tag is-dark">Webhook</span>
              <span class="tag is-info">{{ webhook.uuid }}</span>
            </div>
          </div>
          <div class="control">
            <div class="tags has-addons">
              <span class="tag is-dark">Target URL</span>
              <span class="tag is-info">{{ webhook.target_url|truncatechars:30 }}</span>
            </div>
          </div>
          <div class="control">
            <div class="tags has-addons">
              <span class="tag is-dark">Delivered</span>
              <span class="tag is-info">{{ webhook.delivered|yesno }}</span>
            </div>
          </div>
        </div>
        {% if webhook.delivery_error %}
          <span class="tag is-dark tag-header">Delivery error</span>
          <figure class="highlight log border-no-top-left-radius">
            <pre class="language-toml wrap p-1"><code>{{ webhook.delivery_error }}</code></pre>
          </figure>
        {% endif %}
        {% if webhook.delivered %}
          <div class="control">
            <div class="tags has-addons">
              <span class="tag is-dark">HTTP code</span>
              <span class="tag {% if webhook.success %}is-success{% else %}is-danger{% endif %}">
                {{ webhook.response_status_code }}
              </span>
            </div>
          </div>
          {% if webhook.response_text %}
            <span class="tag is-dark tag-header">Response</span>
            <figure class="highlight log border-no-top-left-radius">
              <pre class="language-toml wrap p-1"><code>{{ webhook.response_text }}</code></pre>
            </figure>
          {% endif %}
        {% endif %}
      {% endfor %}
    {% endif %}
  </section>
  <footer class="modal-card-foot">
    <button class="button">Close</button>
  </footer>
</div>