{% if sync %}
<div
  id="sync-status"
  data-sync-active="{{ 'true' if sync.status in ['queued', 'in_progress'] else 'false' }}"
  class="rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-5"
>
  <div class="flex items-center justify-between">
    <div>
      <h3 class="text-sm font-semibold text-slate-600 dark:text-slate-300">
        {% if sync.status in ['queued', 'in_progress'] %}
          Current Sync
        {% else %}
          Last Sync
        {% endif %}
      </h3>
    </div>
    <span class="ui-pill uppercase tracking-wider
      {% if sync.status == 'completed' %}
        ui-pill-success
      {% elif sync.status == 'failed' %}
        ui-pill-danger
      {% elif sync.status == 'in_progress' %}
        ui-pill-blue
      {% elif sync.status == 'queued' %}
        ui-pill-warning
      {% else %}
        ui-pill-neutral
      {% endif %}
    ">{{ sync.status | replace('_', ' ') | title }}</span>
  </div>

  <div class="mt-4 grid gap-3 text-xs">
    {% if sync.completed_at %}
    <div class="flex justify-between">
      <span class="text-slate-400 dark:text-slate-500">Completed:</span>
      <span class="text-slate-600 dark:text-slate-300">{{ sync.completed_at.strftime('%Y-%m-%d %H:%M:%S UTC') }}</span>
    </div>
    {% endif %}
  </div>

  {% if sync.status in ['completed', 'failed'] %}
  <div class="mt-4 border-t border-slate-200 dark:border-slate-800 pt-4">
    <h4 class="text-xs font-semibold text-slate-600 dark:text-slate-300">Results</h4>
    <div class="mt-2 grid gap-2 text-xs">
      <div class="flex justify-between">
        <span class="text-slate-400 dark:text-slate-500">Jobs Retrieved:</span>
        <span class="text-slate-600 dark:text-slate-300 font-medium">{{ sync.jobs_retrieved_count or 0 }}</span>
      </div>
    </div>
  </div>
  {% endif %}

  {% if sync.errors %}
  <div class="mt-4 border-t border-slate-200 dark:border-slate-800 pt-4">
    <h4 class="text-xs font-semibold text-red-600 dark:text-red-400">Errors ({{ sync.errors|length }})</h4>
    <div class="mt-2 space-y-2">
      {% for error in sync.errors %}
      <div class="border border-red-300 dark:border-red-500/30 bg-red-50 dark:bg-red-950/40 px-3 py-2 text-xs text-red-700 dark:text-red-300">
        <div class="font-medium">{{ error.error_type }}</div>
        <div class="mt-1 text-red-600 dark:text-red-400/80">{{ error.error_message }}</div>
        {% if error.step_context %}
        <div class="mt-1 text-xs text-red-400 dark:text-red-500/60">Step: {{ error.step_context }}</div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}
</div>
{% endif %}