{% if run.status == run.Status.RUNNING or run.status == run.Status.QUEUED %}
  <span class="tag is-info"
        hx-get="{% url 'run_status' run.uuid %}?current_status={{ run.status }}{% if display_current_step %}&display_current_step={{ display_current_step }}{% endif %}"
        hx-trigger="load delay:10s"
        hx-swap="outerHTML"
  >
    {% if run.status == run.Status.RUNNING %}
      <i class="fa-solid fa-spinner fa-pulse mr-1" aria-hidden="true"></i>Running
      {% if display_current_step and run.current_step %}
        {{ run.current_step|truncatechars:30 }}
      {% endif %}
    {% elif run.status == run.Status.QUEUED %}
      <i class="fa-solid fa-clock mr-1"></i>Queued
    {% endif %}
  </span>
{% elif run.status == run.Status.SUCCESS %}
  <span class="tag is-success">Success</span>
{% elif run.status == run.Status.FAILURE %}
  <span class="tag is-danger">Failure</span>
{% elif run.status == run.Status.STALE %}
  <span class="tag is-dark">Stale</span>
{% elif run.status == run.Status.STOPPED %}
  <span class="tag is-danger">Stopped</span>
{% else %}
  <span class="tag is-light">Not started</span>
{% endif %}

{% if status_changed %}
  <script>
    displayPipelineStatusToast(
      run_status="{{ run.status }}",
      pipeline_name="{{ run.pipeline_name }}",
      project_url="{{ run.project.get_absolute_url }}"
    );
  </script>
{% endif %}