{% load i18n %}
{% trans "log lines" as nb_job_log_lines_suffix %}
{% trans "Copy logs" as nb_copy_logs_label %}
{% trans "Copied!" as nb_copied_label %}
<div
  class="card border-info shadow-sm nb-job-live-card"
  role="alert"
  data-proxbox-job-live-root
  data-job-pk="{{ job.pk|default:'0' }}"
  data-job-stream-url="{% url 'plugins:netbox_proxbox:job_stream' pk=job.pk|default:0 %}"
  data-job-api-url="/api/core/jobs/{{ job.pk|default:'0' }}/"
  data-job-log-suffix="{{ nb_job_log_lines_suffix|escape }}"
>
  <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <div class="d-flex flex-wrap align-items-center gap-2">
      <strong>{% trans "Live job updates" %}</strong>
      <span id="nb-job-live-status-{{ job.pk }}" data-proxbox-job-live-status></span>
      <span
        class="badge text-bg-warning d-none"
        data-proxbox-job-live-state-pill
        aria-hidden="true"
      >
        {% trans "Queued" %}
      </span>
    </div>
    <button
      type="button"
      class="btn btn-sm btn-outline-secondary"
      id="nb-job-copy-logs-{{ job.pk }}"
      data-proxbox-job-live-copy
      data-label-copy="{{ nb_copy_logs_label|escape }}"
      data-label-copied="{{ nb_copied_label|escape }}"
    >
      {{ nb_copy_logs_label }}
    </button>
  </div>
  <div class="card-body d-flex flex-column gap-2">
    <div class="nb-job-phase-board" data-proxbox-job-live-phases aria-live="polite"></div>
    <div class="nb-job-progress-wrap w-100" data-proxbox-job-live-progress-wrap style="display:none">
      <div class="progress nb-job-progress-track w-100" role="progressbar"
           aria-label="{% trans "Sync progress" %}"
           aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
        <div
          id="nb-job-progress-bar-{{ job.pk }}"
          data-proxbox-job-live-progress-bar
          class="progress-bar bg-warning progress-bar-striped progress-bar-animated d-flex align-items-center justify-content-center"
          style="width: 100%; transition: width 0.3s ease;"
        >
          <span class="nb-job-progress-label small fw-semibold text-dark"></span>
        </div>
      </div>
    </div>
    <ul class="nav nav-tabs nb-job-live-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button
          class="nav-link active"
          id="nb-job-tab-log-{{ job.pk }}"
          data-bs-toggle="tab"
          data-bs-target="#nb-job-pane-log-{{ job.pk }}"
          type="button"
          role="tab"
          aria-controls="nb-job-pane-log-{{ job.pk }}"
          aria-selected="true"
        >{% trans "Log" %}</button>
      </li>
      <li class="nav-item" role="presentation">
        <button
          class="nav-link"
          id="nb-job-tab-errors-{{ job.pk }}"
          data-bs-toggle="tab"
          data-bs-target="#nb-job-pane-errors-{{ job.pk }}"
          type="button"
          role="tab"
          aria-controls="nb-job-pane-errors-{{ job.pk }}"
          aria-selected="false"
          data-proxbox-job-live-errors-tab
        >
          {% trans "Errors" %}
          <span
            class="badge text-bg-danger ms-1 d-none"
            data-proxbox-job-live-errors-count
            aria-label="{% trans "error count" %}"
          ></span>
        </button>
      </li>
    </ul>
    <div class="tab-content">
      <div
        class="tab-pane fade show active"
        id="nb-job-pane-log-{{ job.pk }}"
        role="tabpanel"
        aria-labelledby="nb-job-tab-log-{{ job.pk }}"
      >
        <div class="nb-job-error-board d-none" data-proxbox-job-live-errors aria-live="assertive"></div>
        <div
          id="nb-job-live-log-{{ job.pk }}"
          data-proxbox-job-live-log
          class="nb-job-live-log"
          role="log"
          aria-live="polite"
          aria-atomic="false"
        ></div>
      </div>
      <div
        class="tab-pane fade"
        id="nb-job-pane-errors-{{ job.pk }}"
        role="tabpanel"
        aria-labelledby="nb-job-tab-errors-{{ job.pk }}"
      >
        <div
          id="nb-job-live-errors-log-{{ job.pk }}"
          data-proxbox-job-live-errors-log
          class="nb-job-live-log"
          role="log"
          aria-live="polite"
          aria-atomic="false"
        ></div>
      </div>
    </div>
  </div>
</div>