<div class="w-full">
  @if(anomaly()) {
    <div>{{anomaly()?.description}}</div>
    @for (target of anomaly()?.solution; track $index) {
      <div class="pb-4">
        <span class="font-bold text-base">{{ target.name }}</span>
        <ul class="ml-4">
          @for (step of target.steps; track step) {
            <li class="list-disc">
              {{ step.description }}
            </li>
          }
        </ul>
      </div>
    }
  }

  <div class="flex m-4 justify-between overflow-y-hidden overflow-scroll [&>div]:flex-shrink-0">
    @if(tours().length > 0) {
      @for (tour of tours(); track $index) {
        <div class="flex flex-col mx-2 my-4 p-4 rounded-2xl" style="box-shadow: var(--mat-sys-level2);">
          @for (item of tour | keyvalue; track $index) {
            <div>
              <span>{{item.key}}</span>: <span>{{item.value}}</span>
            </div>
          }
        </div>
      }
    }
    @if(plannedTimes().length > 0) {
      @for (plannedTime of plannedTimes(); track $index) {
        <div class="flex flex-col mx-2 my-4 p-4 rounded-2xl" style="box-shadow: var(--mat-sys-level2);">
          @for (item of plannedTime | keyvalue; track $index) {
            <div>
              <span>{{item.key}}</span>: <span>{{item.value}}</span>
            </div>
          }
        </div>
      }
    }
    @if(workTimes().length > 0) {
      @for (workTime of workTimes(); track $index) {
        <div class="flex flex-col mx-2 my-4 p-4 rounded-2xl" style="box-shadow: var(--mat-sys-level2);">
          @for (item of workTime | keyvalue; track $index) {
            <div>
              <span>{{item.key}}</span>: <span>{{item.value}}</span>
            </div>
          }
        </div>
      }
    }
    @if(attendanceRegistrations().length > 0) {
      <div class="flex flex-col">
        @for (attendanceRegistration of attendanceRegistrations(); track $index) {
          <div class="flex flex-col mx-2 my-4 p-4 rounded-2xl" style="box-shadow: var(--mat-sys-level2);">
            @for (item of attendanceRegistration | keyvalue; track $index) {
              <div>
                <span>{{item.key}}</span>: <span>{{item.value}}</span>
              </div>
            }
          </div>
        }
      </div>
    }
    @if(employees().length > 0) {
      @for (employee of employees(); track $index) {
        <div class="flex flex-col mx-2 my-4 p-4 rounded-2xl" style="box-shadow: var(--mat-sys-level2);">
          @for (item of employee | keyvalue; track $index) {
            <div>
              <span>{{item.key}}</span>: <span>{{item.value}}</span>
            </div>
          }
        </div>
      }
    }
  </div>
</div>