{% load i18n %}
{% comment %}
Whole body of the import progress modal (header, figures, footer), served by
app_data:data_import_progress. Self-refreshing while the task is live: the
polling attributes are omitted once it is terminal, which is what stops the loop
(same idiom as app_data/exporter_progress.html and app_data/tasks/detail.html).

Header and footer are part of this partial on purpose: everything that has to
change with the task's state must sit inside the swapped element, or it keeps
whatever it was first rendered with (that is how the task-detail Stop button
stayed clickable on a finished task).
{% endcomment %}

{% if is_running %}
<div id="cv-import-progress"
     hx-get="{% url 'app_data:data_import_progress' task.handle %}"
     hx-trigger="every 2s"
     hx-select="#cv-import-progress"
     hx-swap="outerHTML">
{% else %}
<div id="cv-import-progress">
{% endif %}

  <div class="modal-header">
    <h1 class="modal-title fs-5">
      {% if task.state == "DONE" %}{% translate 'Import done' %}
      {% elif task.state == "ABORTED" %}{% translate 'Import aborted' %}
      {% elif task.state == "FAILED" %}{% translate 'Import failed' %}
      {% elif task.state == "QUEUED" %}{% translate 'Import queued' %}
      {% else %}{% translate 'Import in progress' %}{% endif %}
    </h1>
  </div>

  <div class="modal-body">

    <div class="datatask-progress-bar-wrap cv-export-bar">
      <div class="datatask-progress-bar cv-bar-{{ percent_step }}"></div>
    </div>
    <div class="datatask-progress-text">
      {{ percent }}% —
      <span class="datatask-state datatask-state-{{ task.state|lower }}">{{ task.state }}</span>
    </div>

    <div class="cv-export-progress-grid">
      <div class="cv-export-progress-key">{% translate 'Rows' %}</div>
      <div class="cv-export-progress-value">{{ total }}</div>

      <div class="cv-export-progress-key">{% translate 'Done' %}</div>
      <div class="cv-export-progress-value">{{ count_done }}</div>

      <div class="cv-export-progress-key">{% translate 'Success' %}</div>
      <div class="cv-export-progress-value">{{ count_ok }}</div>

      <div class="cv-export-progress-key">{% translate 'Errors' %}</div>
      <div class="cv-export-progress-value">{{ count_ko }}</div>

      <div class="cv-export-progress-key">{% translate 'Duration' %}</div>
      <div class="cv-export-progress-value">
        {% if task.duration %}{{ task.duration|floatformat:1 }}s{% else %}-{% endif %}
      </div>

      {% if is_running %}
      <div class="cv-export-progress-key">{% translate 'Remaining' %}</div>
      <div class="cv-export-progress-value">
        {% if eta %}{{ eta|floatformat:1 }}s{% else %}-{% endif %}
      </div>
      {% endif %}

      <div class="cv-export-progress-key">{% translate 'Rate' %}</div>
      <div class="cv-export-progress-value">
        {% if rate %}{{ rate|floatformat:1 }} rows/s{% else %}-{% endif %}
      </div>
    </div>

    {% if task.output.aborted %}
    <div class="form-text">{% translate 'Stopped early - too many failed rows.' %}</div>
    {% endif %}

    {% if error_message %}
    <div class="cv-export-errors">
      <div class="cv-export-catalog-label">{% translate 'Reason' %}</div>
      <div class="cv-export-error-line">{{ error_message }}</div>
    </div>
    {% endif %}

    {% if errors_sample %}
    <div class="cv-export-errors">
      <div class="cv-export-catalog-label">{% translate 'First errors' %}</div>
      {% for line in errors_sample %}
      <div class="cv-export-error-line">{{ line }}</div>
      {% endfor %}
      {% if not is_running %}
      <div class="form-text">
        <a href="{% url 'app_data:task_errors' task.handle %}">
          <i class="fa fa-download me-1"></i>{% blocktranslate %}Download the {{ errors_total }} error(s){% endblocktranslate %}
        </a>
      </div>
      {% endif %}
    </div>
    {% endif %}

    {% if not is_running %}
    <div class="form-text">
      <a href="{% url 'app_data:task_detail' task.handle %}">{% translate 'Full task report' %}</a>
    </div>
    {% endif %}

  </div>

  {% comment %}
  Running: Abort + Hide. Hiding is safe - the task stays followable from the
  Tasks menu, which needs no permission for your own tasks. Terminal: Close,
  since there is nothing left to stop.
  {% endcomment %}
  <div class="modal-footer">
    {% if is_running %}
    <div class="form-text me-auto">
      {% translate 'Aborting stops the remaining rows; rows already written stay written.' %}
    </div>
    <button class="btn btn-warning"
            hx-post="{% url 'app_data:data_import_abort' task.handle %}"
            hx-target="#cv-import-progress"
            hx-swap="outerHTML">
      {% translate 'Abort' %}
    </button>
    <a role="button" class="btn btn-outline-dark" data-bs-dismiss="modal">{% translate 'Hide' %}</a>
    {% else %}
    <a role="button" class="btn btn-outline-dark" data-bs-dismiss="modal">{% translate 'Close' %}</a>
    {% endif %}
  </div>

</div>