{% extends 'extends/offcanvas.html' %}
{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}{% translate 'Runs for' %} {{ profile.name }}{% endblock %}

{% block body %}
  <div hx-get="{% url "import_profile_runs_list" profile_id=profile.id %}"
       hx-trigger="updated from:window"
       hx-target="closest .offcanvas"
       class="show-loading"
       hx-swap="show:none scroll:none">
    {% if runs %}
    <div class="grid grid-cols-1 gap-4">
    {% for run in runs %}
      <div class="col">
        <div class="card bg-base-100 shadow">
          <div class="card-header bg-base-200 p-4 text-sm {% if run.status == run.Status.QUEUED %}text-base-content{% elif run.status == run.Status.PROCESSING %}text-warning{% elif run.status == run.Status.FINISHED %}text-success{% else %}text-error{% endif %}">
            <span><i class="fa-solid {% if run.status == run.Status.QUEUED %}fa-hourglass-half{% elif run.status == run.Status.PROCESSING %}fa-spinner{% elif run.status == run.Status.FINISHED %}fa-check{% else %}fa-xmark{% endif %} fa-fw me-2"></i>{{ run.get_status_display }}</span>
          </div>
          <div class="card-body">
            <h5 class="card-title"><i class="fa-solid fa-hashtag me-1 text-xs text-gray-400"></i>{{ run.id }}<span class="text-xs text-gray-400 ms-1">({{ run.file_name }})</span></h5>
            <hr>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 w-full gap-4">
              <div class="col">
                <div class="flex flex-row">
                  <div class="flex flex-col">
                    <div class="text-base-content/70 text-xs font-medium">
                      {% trans 'Total Items' %}
                    </div>
                    <div class="text-sm">
                      {{ run.total_rows }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="col">
                <div class="flex flex-row">
                  <div class="flex flex-col">
                    <div class="text-base-content/70 text-xs font-medium">
                      {% trans 'Processed Items' %}
                    </div>
                    <div class="text-sm">
                      {{ run.processed_rows }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="col">
                <div class="flex flex-row">
                  <div class="flex flex-col">
                    <div class="text-base-content/70 text-xs font-medium">
                      {% trans 'Skipped Items' %}
                    </div>
                    <div class="text-sm">
                      {{ run.skipped_rows }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="col">
                <div class="flex flex-row">
                  <div class="flex flex-col">
                    <div class="text-base-content/70 text-xs font-medium">
                      {% trans 'Failed Items' %}
                    </div>
                    <div class="text-sm">
                      {{ run.failed_rows }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="col">
                <div class="flex flex-row">
                  <div class="flex flex-col">
                    <div class="text-base-content/70 text-xs font-medium">
                      {% trans 'Successful Items' %}
                    </div>
                    <div class="text-sm">
                      {{ run.successful_rows }}
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
          <div class="card-footer bg-base-200 p-4 text-base-content/70">
            <a class="no-underline text-info"
               role="button"
               data-tippy-content="{% translate "Logs" %}"
               hx-get="{% url 'import_run_log' profile_id=profile.id run_id=run.id %}"
               hx-target="#generic-offcanvas"><i class="fa-solid fa-file-lines"></i></a>
            <a class="no-underline text-error"
               role="button"
               data-tippy-content="{% translate "Delete" %}"
               hx-delete="{% url 'import_run_delete' profile_id=profile.id run_id=run.id %}"
               hx-trigger='confirmed'
               data-bypass-on-ctrl="true"
               data-title="{% translate "Are you sure?" %}"
               data-text="{% translate "You won't be able to revert this! All imported items will be kept." %}"
               data-confirm-text="{% translate "Yes, delete it!" %}"
               _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i>
            </a>
          </div>
        </div>
      </div>
    {% endfor %}
    {% else %}
      <c-msg.empty title="{% translate "No runs yet" %}"></c-msg.empty>
    {% endif %}
  </div>
  </div>
{% endblock %}