@for (task of _tasks(); track task.id) {
  <div data-slot="accordion" data-orientation="vertical" class="mt-2">
    <div data-state="open" data-orientation="vertical" data-slot="accordion-item" class="border-b last:border-b-0">
      <h3 data-orientation="vertical" data-state="open" class="flex justify-between items-center mt-2">
        <button
          type="button"
          class="focus-visible:border-ring cursor-pointer focus-visible:ring-ring/50 flex-1 items-start gap-2 rounded-md text-left text-sm font-medium transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 flex p-0 flex-row-reverse justify-between++ text-text-tertiary"
          (click)="task.__expand__ = !task.__expand__"
        >
          <div class="break-all flex-1">
            <span class="text-base">{{ task.name }}</span>
          </div>
          <i class="ri-arrow-down-s-line transition-transform" [class.rotate-180]="task.__expand__"></i>
        </button>
      </h3>
      @if (task.__expand__) {
        <div role="region" class="overflow-hidden text-sm">
          <div class="pt-0">
            @for (step of task.steps; track step.id) {
              <div class="flex items-center ml-4">
                <div class="mr-1" [zTooltip]="step.notes" zPosition="left">
                  @switch (step.status) {
                    @case ('pending') {
                      <i class="ri-pause-circle-line text-orange-500"></i>
                    }
                    @case ('running') {
                      <i class="ri-time-line text-text-success"></i>
                    }
                    @case ('done') {
                      <i class="ri-checkbox-circle-line text-text-success"></i>
                    }
                    @case ('failed') {
                      <i class="ri-close-circle-line text-text-destructive"></i>
                    }
                    @default {
                      {{ step.stepIndex }}.
                    }
                  }
                </div>
                <div
                  class="flex-1 inline-block rounded py-1 px-2 text-sm font-body mr-2 truncate"
                  [title]="step.description"
                >
                  {{ step.description }}
                </div>
              </div>
            }
          </div>
        </div>
      }
    </div>
  </div>
}

@if (editable()) {
  <button
    type="button"
    class="btn rounded-xl justify-center w-7 h-7 opacity-0 group-hover:opacity-100 absolute top-1 right-1"
    (click)="refresh()"
  >
    <i class="ri-restart-line"></i>
  </button>
}

@if (loading()) {
  <ngm-spin class="absolute top-0 left-0 w-full h-full" />
}