<div class="page-spacing">
  <header>
    @if (task | async; as task) {
      <div class="breadcrumbs">
        <a [routerLink]="tasksRoute | async">{{ 'tasks-automation.page-title' | translate }}</a>
        <pa-icon
          name="chevron-right"
          size="small"></pa-icon>
        <span>{{ task.parameters?.name }}</span>
      </div>
      <div class="title">
        <h1 class="page-title">{{ task.parameters?.name }}</h1>
        <div class="task-type with-background">
          <pa-icon
            [name]="icons[task.task.name] || ''"
            size="small"></pa-icon>
          <div class="body-s">{{ 'tasks-automation.type.' + task.task.name + '.title' | translate }}</div>
        </div>
        <div class="actions">
          <pa-button
            aspect="basic"
            (click)="modifyTask()">
            {{ 'tasks-automation.actions.edit.edit-configuration' | translate }}
          </pa-button>
          <pa-button
            aspect="basic"
            icon="trash"
            iconAndText
            [paPopup]="menu">
            {{ 'generic.delete' | translate }}
          </pa-button>
          <pa-dropdown #menu>
            @if (task.task.can_cleanup) {
              <pa-option
                (selectOption)="cleanTask(task.id)"
                destructive>
                {{ 'tasks-automation.actions.delete-data.title' | translate }}
              </pa-option>
            }
            <pa-option
              (selectOption)="deleteTask(task.id, false)"
              destructive>
              {{ 'tasks-automation.actions.delete-agent.title' | translate }}
            </pa-option>
            @if (task.task.can_cleanup) {
              <pa-option
                (selectOption)="deleteTask(task.id, true)"
                destructive>
                {{ 'tasks-automation.actions.delete-all.title' | translate }}
              </pa-option>
            }
          </pa-dropdown>
        </div>
      </div>
    }
  </header>

  <pa-tabs notFullWidth>
    <pa-tab
      (click)="selectedTab = 'configuration'"
      [active]="selectedTab === 'configuration'">
      {{ 'tasks-automation.tab.configuration' | translate }}
    </pa-tab>
    @if (testingTabSupported | async) {
      <pa-tab
        (click)="selectedTab = 'testing'"
        [active]="selectedTab === 'testing'">
        {{ 'tasks-automation.tab.testing' | translate }}
      </pa-tab>
    }
    <pa-tab
      (click)="selectedTab = 'execution'"
      [active]="selectedTab === 'execution'">
      {{ 'tasks-automation.tab.execution' | translate }}
    </pa-tab>
  </pa-tabs>

  @switch (selectedTab) {
    @case ('configuration') {
      <app-task-settings [task]="(task | async) || undefined"></app-task-settings>
    }
    @case ('testing') {
      <app-task-testing [task]="(task | async) || undefined"></app-task-testing>
    }
    @case ('execution') {
      <app-task-execution [task]="(task | async) || undefined"></app-task-execution>
    }
  }
  <nsi-sticky-footer>
    @switch (selectedTab) {
      @case ('configuration') {
        @if (testingTabSupported | async) {
          <pa-button
            aspect="basic"
            icon="arrow-right"
            iconAndText
            (click)="selectedTab = 'testing'">
            {{ 'tasks-automation.testing.test-agent' | translate }}
          </pa-button>
        } @else {
          <pa-button
            aspect="basic"
            icon="arrow-right"
            iconAndText
            (click)="selectedTab = 'execution'">
            {{ 'tasks-automation.execution.execute' | translate }}
          </pa-button>
        }
      }
      @case ('testing') {
        <pa-button
          aspect="basic"
          icon="arrow-right"
          iconAndText
          (click)="selectedTab = 'execution'">
          {{ 'tasks-automation.execution.execute' | translate }}
        </pa-button>
      }
    }
  </nsi-sticky-footer>
</div>
