<div class="debug-images">
  <div class="p-3 images-container">
    <div class="single-debug-images-container" *ngFor="let experimentId of experimentIds; trackBy: trackExperiment">
      <div
        *ngIf="experimentIds?.length > 1"
        class="experiment-name">
        <span [smTooltip]="taskNames[experimentId]" matTooltipPosition="above">{{taskNames[experimentId]}}</span>
      </div>
      <div class="d-flex">
        <div class="metric-bar" [class.minimized]="minimized" *ngIf="!thereAreNoMetrics(experimentId)">
          <label>Metric:</label>
          <mat-form-field appearance="outline">
            <mat-select #metricSelect (selectionChange)="selectMetric($event, experimentId)" panelClass="light-theme"
                        [value]="selectedMetrics[experimentId]" name="selectedMetric">
              <mat-option *ngIf="selectedMetrics[experimentId]" [value]="ALL_IMAGES">{{ALL_IMAGES}}</mat-option>
              <mat-option *ngFor="let metric of optionalMetrics[experimentId]" [value]="metric">
                {{metric}}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <label>Iterations:</label>

          <div [ngClass]="{'disabled': (beginningOfTime$| async)[experimentId]}"
               (click)="nextBatch({task: experimentId, metric: metricSelect.value})"
               class="al-icon al-ico-next-batch al-color light-grey-blue"
               smTooltip="Older images"></div>

          <b
            class="text-right">{{debugImages && debugImages[experimentId] && debugImages[experimentId][0][debugImages[experimentId].length - 1].iter}}</b>

          <div class="al-icon al-ico-between al-color light-blue-grey"></div>

          <b>{{debugImages && debugImages[experimentId] && debugImages[experimentId][0][0].iter}}</b>

          <div [ngClass]="{'disabled': (timeIsNow$| async)[experimentId]}"
               (click)="(!timeIsNow[experimentId]) && previousBatch({task: experimentId, metric: metricSelect.value})"
               class="al-icon al-ico-prev-batch al-color light-grey-blue"
               smTooltip="Newer images"></div>

          <div [ngClass]="{'disabled': (timeIsNow$| async)[experimentId] && !allowAutorefresh }"
               (click)="(!(timeIsNow[experimentId] && !allowAutorefresh)) && backToNow({task: experimentId, metric: metricSelect.value})"
               class="al-icon al-ico-back-to-top al-color light-grey-blue"
               smTooltip="Newest images"></div>
        </div>
      </div>
      <div class="no-images icon i-no-debug-samples-with-text"
           *ngIf="shouldShowNoImagesForExperiment(experimentId)"></div>
      <sm-debug-images-view
        *ngFor="let debugImages of debugImages[experimentId]"
        [iterations]="debugImages"
        [experimentId]="experimentId"
        [title]="taskNames && taskNames[experimentId]"
        [isMergeIterations]="mergeIterations"
        (imageClicked)="imageClicked($event)"
        (urlError)="urlError($event)"
      >
      </sm-debug-images-view>
    </div>
  </div>
</div>
