{% extends "layouts/base.html" %}

{% block title %}
  Bulk download status ~ ATR
{% endblock title %}

{% block description %}
  View the status of a bulk download task.
{% endblock description %}

{% block head_extra %}
  {% if task.status.value == "queued" or task.status.value == "active" %}
    <meta http-equiv="refresh" content="2" />
  {% endif %}
{% endblock head_extra %}

{% block content %}
  <div class="my-3">
    <nav class="mb-3">
      <ol class="breadcrumb">
        {% if release %}
          <li class="breadcrumb-item">{{ release.committee.display_name }}</li>
          <li class="breadcrumb-item">{{ release.project.name if release.project else "Unknown project" }}</li>
          <li class="breadcrumb-item">{{ release.version }}</li>
        {% endif %}
        <li class="breadcrumb-item active">Bulk download status</li>
      </ol>
    </nav>

    <div class="d-flex justify-content-between align-items-center p-3 mb-3 bg-light border rounded">
      <div class="fw-medium">Task status</div>
      <div class="badge rounded-pill {% if task.status.value == 'queued' %}bg-secondary {% elif task.status.value == 'active' %}bg-info {% elif task.status.value == 'completed' %}bg-success {% elif task.status.value == 'failed' %}bg-danger {% else %}bg-secondary{% endif %}">
        {%- if task.status.value == "queued" -%}
          Pending
        {%- elif task.status.value == "active" -%}
          Running
        {%- elif task.status.value == "completed" -%}
          Completed
        {%- elif task.status.value == "failed" -%}
          Failed
        {%- else -%}
          {{ task.status.value }}
        {%- endif -%}
      </div>
    </div>

    <div class="card mb-3">
      <div class="card-body">
        <div class="row mb-3">
          <div class="col-md-3 fw-medium">Task ID</div>
          <div class="col-md-9">{{ task.id }}</div>
        </div>

        <div class="row mb-3">
          <div class="col-md-3 fw-medium">Started</div>
          <div class="col-md-9">
            {% if task.started %}
              {{ task.started.strftime("%Y-%m-%d %H:%M:%S UTC") }}
            {% else %}
              Not started
            {% endif %}
          </div>
        </div>

        {% if task.completed %}
          <div class="row mb-3">
            <div class="col-md-3 fw-medium">Completed</div>
            <div class="col-md-9">{{ task.completed.strftime("%Y-%m-%d %H:%M:%S UTC") }}</div>
          </div>
        {% endif %}

        {% if task.result %}
          {% if task.result.progress is defined %}
            <div class="mb-3">
              <div class="progress mb-2">
                <div class="progress-bar py-2 fs-6"
                     role="progressbar"
                     aria-valuenow="{{ task.result.progress }}"
                     aria-valuemin="0"
                     aria-valuemax="100"
                     data-progress="{{ task.result.progress }}">{{ task.result.progress }}%</div>
              </div>
              <div class="text-muted small">{{ task.result.progress }}% complete</div>
            </div>
          {% endif %}

          {% if task.result.message %}<div class="p-3 mb-3 bg-light border rounded">{{ task.result.message }}</div>{% endif %}

          {% if task.status == TaskStatus.COMPLETED %}
            <div class="row mb-3">
              <div class="col-md-3 fw-medium">Summary</div>
              <div class="col-md-9">
                <div class="border">
                  <table class="table table-bordered mb-0">
                    <tbody>
                      {% if task.result.url %}
                        <tr>
                          <th class="bg-light">URL</th>
                          <td>{{ task.result.url }}</td>
                        </tr>
                      {% endif %}
                      {% if task.result.file_types %}
                        <tr>
                          <th class="bg-light">File types</th>
                          <td>{{ task.result.file_types|join(", ") }}</td>
                        </tr>
                      {% endif %}
                      {% if task.result.files_downloaded %}
                        <tr>
                          <th class="bg-light">Files downloaded</th>
                          <td>{{ task.result.files_downloaded }}</td>
                        </tr>
                      {% endif %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          {% endif %}
        {% endif %}

        {% if task.error %}
          <div class="p-3 mb-3 bg-danger-subtle border border-danger rounded text-danger">{{ task.error }}</div>
        {% endif %}
      </div>
    </div>

    {% if task.status in [TaskStatus.QUEUED, TaskStatus.ACTIVE] %}
      <div class="p-3 mb-3 bg-info-subtle border border-info rounded">
        This page will automatically refresh every 2 seconds to show the latest status.
      </div>
    {% endif %}
  </div>
{% endblock content %}

{% block javascripts %}
  {{ super() }}
  <script>
      // Set progress bar width
      document.addEventListener("DOMContentLoaded", function() {
          const progressBar = document.querySelector(".progress-bar");
          if (progressBar) {
              const progress = progressBar.getAttribute("data-progress");
              progressBar.style.width = progress + "%";
          }
      });
  </script>
{% endblock javascripts %}