<mat-expansion-panel [expanded]="true">
  <mat-expansion-panel-header>
    <div class="expand-header" data-id="expandInfoPanel">{{controller ? 'RUN INFO' : 'STEP INFO'}}</div>
  </mat-expansion-panel-header>
  <div class="panel-body" *ngIf="entity">
    <header *ngIf="step; else controllerHeader">
      <i
        class="al-icon lg"
        [class]="'al-ico-type-' + (entity?.type ? (entity.type.toString()).replace('_', '-') : 'training')"
      ></i>
      <div class="name" [smTooltip]="step.name" smShowTooltipIfEllipsis>{{step.name}}</div>
      <div class="d-flex justify-content-between">
        <div class="status" [class]="step.data.status" data-id="infoStepStatus">{{step.data.status}}</div>
        <sm-id-badge class="ms-1" [id]="step.data.job_id" (copied)="copyToClipboard()"></sm-id-badge>
      </div>
    </header>
    <ng-template #controllerHeader>
      <div *ngIf="entity?.id" class="d-flex justify-content-end my-2">
        <sm-id-badge [id]="entity.id" (copied)="copyToClipboard()"></sm-id-badge>
      </div>
    </ng-template>
    <ng-container *ngIf="!step || step.data.job_id === entity?.id">
      <div class="section">
        <div class="header">PARAMETERS</div>
        <ng-container *ngFor="let section of (entity?.type === 'controller' ? {'Args': {}} : entity?.hyperparams) | keyvalue">
          <div
            *ngFor="let param of entity?.hyperparams[section.key]  | keyvalue | filterRegex: '^(?!_).+$'"
            class="param"
          >
            <div class="key" [smTooltip]="param.key" smShowTooltipIfEllipsis>{{param.key}}</div>
            <div class="value" [smTooltip]="param.value.value" smShowTooltipIfEllipsis>{{param.value.value}}</div>
          </div>
        </ng-container>
      </div>
      <div class="section">
        <div class="header">METRICS</div>
        <ng-container *ngIf="(entity?.last_metrics | keyvalue)?.length > 0; else emptyMsg">
          <ng-container *ngFor="let metric of entity.last_metrics | keyvalue">
            <div *ngFor="let variant of $any($any(metric.value) | keyvalue) | filterMonitorMetric" class="param">
              <div class="key" [smTooltip]="$any(variant.value).metric + '/' + $any(variant.value).variant" smShowTooltipIfEllipsis>{{$any(variant.value).metric}}/{{$any(variant.value).variant}}</div>
              <div class="value" [smTooltip]="$any(variant.value).value" smShowTooltipIfEllipsis>{{$any(variant.value).value}}</div>
            </div>
          </ng-container>
        </ng-container>
      </div>
      <div class="section">
        <div class="header">ARTIFACTS</div>
        <ng-container *ngIf="entity?.execution?.artifacts?.length > 0; else emptyMsg">
          <div
            *ngFor="let artifact of entity.execution.artifacts; trackBy: trackByFn"
            class="param"
          >
            <div class="key" [smTooltip]="artifact.key" smShowTooltipIfEllipsis>{{artifact.key}}</div>
            <div class="value">{{(artifact?.content_size | filesize : fileSizeConfigStorage) || ''}}</div>
          </div>
        </ng-container>
      </div>
      <div class="section">
        <div class="header">MODELS</div>
        <ng-container *ngIf="entity?.models?.output?.length > 0; else emptyMsg">
          <div *ngFor="let model of entity.models?.output" class="param">
            <div class="key"><a [routerLink]="['/projects', model.model.project.id, 'models', model.model.id]" target="_blank"
            >{{model.name || model.model.name}}</a></div>
          </div>
        </ng-container>
      </div>
    </ng-container>

    <ng-template #emptyMsg>
      <div class="empty-msg" data-id="emptyMsg">No data to show</div>
    </ng-template>

  </div>
  <footer *ngIf="entity?.id">
      <a
        class="arr-link"
        target="_blank"
        [href]="'/projects/' + project + '/experiments/' + entity?.id + '/output/execution'">
        Full details<i class="al-icon al-ico-link-arrow sm" data-id="fullDetailsArrow"></i>
     </a>
  </footer>
</mat-expansion-panel>