{% load helpers %}
{% load i18n %}
<div class="card">
  <h5 class="card-header d-flex justify-content-between align-items-center">
    {% trans "Progress" %}
    {% url 'plugins:ipfabric_netbox:ipfabricingestion_progress' pk=job.object_id as progress_url %}
    {% include 'ipfabric_netbox/partials/stage_switcher_buttons.html' with base_url=progress_url hx_target="#ingestion_progress" hx_swap="outerHTML" active_stage=active_stage merge_job=merge_job %}
  </h5>
  <div class="card-body">
    {% if not job %}
      {% trans "Cannot show progress, no sync Job exists anymore." %}
    {% else %}
      {% if phases %}
        {% for phase in phases %}
        <div class="progress-phase-group mb-2">
          <div class="d-flex justify-content-between align-items-center progress-phase-toggle"
               style="cursor: pointer;"
               data-bs-toggle="collapse"
               data-bs-target="#progress-collapse-{{ phase.key }}-{{ job.pk }}"
               data-progress-collapse-key="{{ phase.key }}-{{ job.pk }}"
               aria-expanded="false"
               aria-controls="progress-collapse-{{ phase.key }}-{{ job.pk }}">
            <span>
              <i class="mdi mdi-chevron-right progress-phase-chevron" aria-hidden="true"></i>
              <strong>{{ phase.label }}</strong>
            </span>
            <div class="progress-phase-bar" style="min-width: 220px; flex: 0 0 55%;">
              {% if phase.aggregate_pct is not None %}
                {% utilization_graph phase.aggregate_pct %}
              {% else %}
                <span class="text-muted">&mdash;</span>
              {% endif %}
            </div>
          </div>
          <div class="collapse" id="progress-collapse-{{ phase.key }}-{{ job.pk }}">
            {% if phase.models %}
              {% for model, util in phase.models.items %}
              <div class="d-flex justify-content-between align-items-center progress-model-row">
                <span>{{ model }}</span>
                <div style="min-width: 180px; flex: 0 0 40%;">
                  {% utilization_graph util %}
                </div>
              </div>
              {% endfor %}
            {% endif %}
          </div>
        </div>
        {% endfor %}
      {% else %}
        <p class="text-muted mb-0">
          {% if active_stage == 'merge' %}
            {% trans "Merge progress pending..." %}
          {% else %}
            {% trans "Ingestion progress pending..." %}<br>
            <small class="text-muted">{% trans "Last updated" %} {% now "H:i:s" %}</small>
          {% endif %}
        </p>
      {% endif %}
    {% endif %}
  </div>
</div>
<style>
  .progress-phase-toggle {
    padding: 0.25rem 0.375rem;
    margin: -0.25rem 0;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out;
  }
  .progress-phase-toggle:hover {
    background-color: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.04));
  }
  .progress-phase-chevron {
    display: inline-block;
    transition: transform 0.15s ease-in-out;
  }
  .progress-phase-toggle[aria-expanded="true"] .progress-phase-chevron {
    transform: rotate(90deg);
  }
  .progress-model-row {
    padding: 0.5rem 0.375rem;
    border-top: 1px solid var(--tblr-border-color, rgba(255, 255, 255, 0.1));
  }
  .progress-model-row:hover {
    background-color: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.04));
  }
</style>
<script>
(function () {
  function restoreExpandState() {
    document.querySelectorAll('[data-progress-collapse-key]').forEach(function (toggle) {
      var key = 'ipf-progress-open-' + toggle.getAttribute('data-progress-collapse-key');
      var targetSelector = toggle.getAttribute('data-bs-target');
      var target = targetSelector ? document.querySelector(targetSelector) : null;
      if (!target) {
        return;
      }
      if (sessionStorage.getItem(key) === '1') {
        target.classList.add('show');
        toggle.setAttribute('aria-expanded', 'true');
      }
    });
  }
  // Restore persisted expand/collapse state before paint to avoid flashing the wrong state
  // on a normal (non-htmx) page load.
  restoreExpandState();
  // After an htmx swap (e.g. the polling refresh), htmx settles the `class`/`style`
  // attributes of matched elements back to the freshly-rendered markup (its
  // attributesToSettle mechanism), which would wipe out the `show` class set above
  // since that happens *before* the settle pass runs. Re-apply it once the swap has
  // fully settled so the expanded state survives the refresh.
  document.addEventListener('htmx:afterSettle', restoreExpandState, { once: true });

  document.querySelectorAll('[data-progress-collapse-key]').forEach(function (toggle) {
    var key = 'ipf-progress-open-' + toggle.getAttribute('data-progress-collapse-key');
    var targetSelector = toggle.getAttribute('data-bs-target');
    var target = targetSelector ? document.querySelector(targetSelector) : null;
    if (!target) {
      return;
    }
    target.addEventListener('shown.bs.collapse', function () {
      sessionStorage.setItem(key, '1');
      toggle.setAttribute('aria-expanded', 'true');
    });
    target.addEventListener('hidden.bs.collapse', function () {
      sessionStorage.setItem(key, '0');
      toggle.setAttribute('aria-expanded', 'false');
    });
  });
})();
</script>