{# SPDX-License-Identifier: Apache-2.0 #}
{# Copyright (C) 2025 Marcin Zieba <marcinpsk@gmail.com> #}
<div id="import-progress"
     aria-live="polite"
     {% if is_active %}
     hx-get="{% url 'plugins:netbox_data_import:import_progress_status' pk=job.pk %}"
     hx-trigger="every 2s"
     hx-swap="outerHTML"
     {% endif %}>
  {% if is_completed %}
  <div class="alert alert-success">
    <i class="mdi mdi-check-circle"></i> Import complete.
  </div>
  {% elif cancelled %}
  <div class="alert alert-secondary">
    <i class="mdi mdi-cancel"></i> {{ message }}
  </div>
  {% elif is_failed %}
  <div class="alert alert-danger">
    <i class="mdi mdi-alert-circle"></i> {{ message|default:"The import failed." }}
  </div>
  {% endif %}

  <div class="progress mb-2" role="progressbar" aria-label="Import progress"
       aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: {{ percentage }}%">{{ percentage }}%</div>
  </div>
  <p class="mb-3 fw-semibold">Completed {{ processed }} of {{ total }} plan steps</p>
  {% if status.state == "queued" or status.queue_note %}
  <p class="mb-3 text-secondary d-flex flex-wrap column-gap-3" data-job-queue-place>
    {% if status.state == "queued" %}<span>Waiting for a worker.</span>{% endif %}
    {% if status.queue_note %}<span>{{ status.queue_note }}</span>{% endif %}
    {% if status.state == "queued" %}{% include "netbox_data_import/inc/job_queue_place.html" %}{% endif %}
  </p>
  {% endif %}

  <div class="d-flex gap-2">
    {% if is_completed and results_url %}
    <a href="{{ results_url }}" class="btn btn-success">View results</a>
    {% elif is_completed %}
    <a href="{% url 'plugins:netbox_data_import:import_setup' %}" class="btn btn-primary">Start a new import</a>
    {% elif is_failed and restore_claim %}
    <form method="post" action="{% url 'plugins:netbox_data_import:import_restore' pk=job.pk %}">
      {% csrf_token %}
      {% include "netbox_data_import/inc/preview_claim.html" with preview_claim=restore_claim %}
      <button type="submit" class="btn btn-primary">Review preview</button>
    </form>
    {% if results_url %}<a href="{{ results_url }}" class="btn btn-outline-secondary">View results</a>{% endif %}
    {% elif cancelled %}
    {% if workspace_url %}<a href="{{ workspace_url }}" class="btn btn-primary">Open the preview</a>{% endif %}
    {% elif is_failed and preview_replaced %}
    <span class="text-muted">A newer preview replaced this import's preview.</span>
    {% if results_url %}<a href="{{ results_url }}" class="btn btn-outline-secondary">View results</a>{% endif %}
    {% elif is_failed %}
    <a href="{% url 'plugins:netbox_data_import:import_setup' %}" class="btn btn-primary">Start a new import</a>
    {% if results_url %}<a href="{{ results_url }}" class="btn btn-outline-secondary">View results</a>{% endif %}
    {% else %}
    {% if cancel_claim %}
    <form method="post" action="{% url 'plugins:netbox_data_import:trace_sync_cancel' %}">
      {% csrf_token %}
      {% include "netbox_data_import/inc/preview_claim.html" with preview_claim=cancel_claim %}
      <input type="hidden" name="job_id" value="{{ job.pk }}">
      <button type="submit" class="btn btn-outline-danger" data-sync-cancel>Cancel sync</button>
    </form>
    {% endif %}
    <span class="text-muted align-self-center"><i class="mdi mdi-loading mdi-spin"></i> This page updates automatically.</span>
    {% endif %}
  </div>
</div>