Cloud-CV/EvalAI

<ng-container *ngIf="phaseSelectionType == 'radioButton'">
  <li *ngFor="let item of phases">
    <input
      [disabled]="challenge['currentDate'] < item.start_date || challenge['currentDate'] >= item.end_date"
      type="radio"
      [checked]="radioSelected == item.id"
      name="selectPhase"
      class="with-gap selectPhase fw-light"
      id="{{ item.id }}"
      value="{{ item.id }}"
      (click)="selectPhase(item)"
    />
    <label for="{{ item.id }}" class="radio-button-text pointer">
      <div *ngIf="!item.showPrivate">
        <strong class="text-med-black fw-light fs-16">Phase: </strong>
        <span class="content fs-16 fs-light">{{ item.name }}</span>
        <br />
        <strong class="text-med-black fw-light fs-16">Start date: </strong>
        <span class="content fs-16 fs-light">{{ item.start_date | date: 'medium' }}</span>
        <br />
        <strong class="text-med-black fw-light fs-16">End date: </strong>
        <span class="content fs-16 fs-light">{{ item.end_date | date: 'medium' }}</span>
      </div>
      <div class="pointer" *ngIf="item.showPrivate">
        <strong class="text-highlight fw-light fs-16">Phase: </strong>
        <span class="text-highlight fs-16 fs-light">{{ item.name }}</span>
        <br />
        <strong class="text-highlight fw-light fs-16">Start date: </strong>
        <span class="text-highlight fs-16 fs-light">{{ item.start_date | date: 'medium' }}</span>
        <br />
        <strong class="text-highlight fw-light fs-16">End date: </strong>
        <span class="text-highlight fs-16 fs-light">{{ item.end_date | date: 'medium' }}</span>
      </div>
    </label>
  </li>
</ng-container>

<ng-container *ngIf="phaseSelectionType == 'selectBox' && phaseSelectionListType == 'phase'">
  <mat-form-field>
    <mat-label class="fs-16 phase-placeholder" [ngClass]="{ 'hide-label': phaseName !== '' }">Select phase</mat-label>
    <mat-select class="rm-margin" [(value)]="selectedPhase">
      <mat-select-trigger>
        <span class="col-lg-9 col-md-9 col-sm-8 col-xs-7 phase_name">{{ phaseName }}
        </span>
          <span class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
            <span class="private-badge">
              <mat-chip-list *ngIf="phaseVisibility">
                <mat-chip>Private</mat-chip>
              </mat-chip-list>
            </span>
          </span>
      </mat-select-trigger>
      <mat-option (click)="selectPhase(key)" [value]="key" *ngFor="let key of phases">
        <span class="col-lg-9 col-md-9 col-sm-8 col-xs-7">{{ key.name }}           
          &nbsp; &nbsp;
        </span>
        <span class="col-lg-3 col-md-3 col-sm-4 col-xs-5">
          <mat-chip-list *ngIf="key.showPrivate">
            <mat-chip>Private</mat-chip>
          </mat-chip-list>
        </span>
      </mat-option>
    </mat-select>
  </mat-form-field>
</ng-container>

<ng-container *ngIf="phaseSelectionType == 'selectBox' && phaseSelectionListType == 'settingsPhaseSplit'">
<mat-form-field>
    <mat-label class="fs-16 phase-placeholder" [ngClass]="{'hide-label': settingsSplitName !== '' }">Select Phase Split</mat-label>
    <mat-select class="rm-margin" [(value)]="selectedPhaseSplit">
      <mat-select-trigger>
        <span class="col-lg-9 col-md-9 col-sm-8 col-xs-7 phase_name">
          <span class="fw-light">Phase:&nbsp;</span>{{ phaseName }}, <span class="fw-light">Split:&nbsp; </span
          >{{ settingsSplitName }} &nbsp;
        </span>
        <span class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
          <span class="private-badge">
            <mat-chip-list *ngIf="phaseVisibility">
              <mat-chip>Private</mat-chip>
            </mat-chip-list>
          </span>
        </span>
      </mat-select-trigger>
      <mat-option (click)="selectSettingsPhaseSplit(key, 'selectBox', 'settingsPhaseSplit')" [value]="key" *ngFor="let key of settingsPhaseSplits">
        <span class="col-lg-9 col-md-9 col-sm-8 col-xs-7">
          <span class="fw-light">Phase:</span>{{ key.challenge_phase_name }}, <span class="fw-light">Split: </span
          >{{ key.dataset_split_name }} &nbsp;
        </span>
        <span class="col-lg-3 col-md-3 col-sm-4 col-xs-5">
          <mat-chip-list *ngIf="key.showPrivate">
            <mat-chip>Private</mat-chip>
          </mat-chip-list>
        </span>
      </mat-option>
    </mat-select>
  </mat-form-field>
</ng-container>

<ng-container *ngIf="phaseSelectionType == 'selectBox' && phaseSelectionListType == 'phaseSplit'">
  <mat-form-field class="select_phase_form">
    <mat-label class="fs-16 phase-placeholder" [ngClass]="{ 'hide-label': selectedPhaseSplit !== '' }">Challenge Phase</mat-label>
    <mat-select class="rm-margin" [(ngModel)]="selectedPhaseSplit">
      <mat-select-trigger>
        <span class="col-lg-9 col-md-9 col-sm-8 col-xs-7 phase_name">
          <span class="fw-light">Phase:&nbsp;</span>{{ phaseName }}, <span class="fw-light">Split:&nbsp; </span
          >{{ splitName }} &nbsp;
        </span>
        <span class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
          <span class="private-badge">
            <mat-chip-list *ngIf="phaseVisibility">
              <mat-chip>Private</mat-chip>
            </mat-chip-list>
          </span>
        </span>
      </mat-select-trigger>
      <mat-option (click)="selectPhaseSplit(key, 'selectBox', 'phaseSplit')" [value]="key" *ngFor="let key of phaseSplits">
        <span class="col-lg-9 col-md-9 col-sm-8 col-xs-7 phase_name">
          <span class="fw-light">Phase:</span>{{ key.challenge_phase_name }}, <span class="fw-light">Split: </span
          >{{ key.dataset_split_name }} &nbsp;
        </span>
        <span class="col-lg-3 col-md-3 col-sm-4 col-xs-5">
          <mat-chip-list *ngIf="key.showPrivate">
            <mat-chip>Private</mat-chip>
          </mat-chip-list>
        </span>
      </mat-option>
    </mat-select>
  </mat-form-field>
</ng-container>