<!--
  ~ Copyright (C) 2023 Robert Bosch GmbH Copyright (C) 2023 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->
<div #durationPickerContainer class="duration-picker-container" data-test="bci-duration-picker-container">
  <mat-form-field bciDropdownPositionSetter>
    <mat-label>{{ translations.durationLabel }} ({{ typeLabel }})</mat-label>
    <input
      data-test="bci-duration-picker-input"
      bciDirtyFlag
      (isDirty)="onDirtyInput($event)"
      bciTouchedFlag
      (isTouched)="onTouched($event)"
      disabled="{{ disabled }}"
      [required]="required"
      [readonly]="readonly"
      [(ngModel)]="bindDuration"
      [ngModelOptions]="{ standalone: true }"
      placeholder="{{ translations.durationLabel }} ({{ typeLabel }})"
      type="text"
      matInput
      (click)="openPanel()"
      (select)="openPanel($event)"
    />
    <button
      data-test="bci-duration-picker-open-btn"
      bciTouchedFlag
      (isTouched)="onTouched($event)"
      disabled="{{ disabled }}"
      class="suffix-btn"
      *ngIf="(!panelOpen && !inputTouched) || readonly"
      mat-icon-button
      matSuffix
      (click)="openPanel($event)"
    >
      <mat-icon fontIcon="bosch-ic-alarm-clock"></mat-icon>
    </button>
    <button
      class="suffix-btn"
      data-test="bci-duration-picker-close-btn"
      *ngIf="panelOpen && inputTouched && !inputDirty && !readonly"
      mat-icon-button
      matSuffix
      (click)="closePanel()"
    >
      <mat-icon fontIcon="bosch-ic-close"></mat-icon>
    </button>
    <button
      class="suffix-btn"
      data-test="bci-duration-picker-reset-btn"
      *ngIf="panelOpen && inputDirty && !readonly"
      mat-icon-button
      matSuffix
      (click)="resetDuration($event)"
    >
      <mat-icon fontIcon="bosch-ic-delete"></mat-icon>
    </button>
    <mat-hint data-test="bci-duration-picker-notification-message" *ngIf="inputNotMatching && !panelOpen">
      {{ translations.durationTypeErrorMessage }}
    </mat-hint>
  </mat-form-field>

  <div class="toggle-panel" *ngIf="panelOpen" data-test="bci-duration-picker-dropdown">
    <p>{{ translations.durationLabel }} ({{ typeLabel }})</p>
    <div class="durations-container" [ngClass]="{ 'center-elements': !onlyOnePicker }">
      <bci-number-picker
        *ngIf="typeStructure.days"
        [value]="encapsulatedDuration.days"
        [maxValue]="maxNumberOfDurations.maxDays"
        (selectedValue)="takePickerValue($event, 'days')"
      ></bci-number-picker>
      <span *ngIf="typeStructure.days && typeStructure.hours">.</span>
      <bci-number-picker
        *ngIf="typeStructure.hours"
        [value]="encapsulatedDuration.hours"
        [maxValue]="maxNumberOfDurations.maxHours"
        (selectedValue)="takePickerValue($event, 'hours')"
      ></bci-number-picker>
      <span *ngIf="typeStructure.hours && typeStructure.minutes">:</span>
      <bci-number-picker
        *ngIf="typeStructure.minutes"
        [value]="encapsulatedDuration.minutes"
        [maxValue]="maxNumberOfDurations.maxMinutes"
        (selectedValue)="takePickerValue($event, 'minutes')"
      ></bci-number-picker>
      <span *ngIf="typeStructure.minutes && typeStructure.seconds">:</span>
      <bci-number-picker
        *ngIf="typeStructure.seconds"
        [value]="encapsulatedDuration.seconds"
        [maxValue]="maxNumberOfDurations.maxSeconds"
        (selectedValue)="takePickerValue($event, 'seconds')"
      ></bci-number-picker>
    </div>
    <div class="buttons-container center-elements">
      <button data-test="bci-duration-picker-dropdown-close-btn" bciPrimaryButton (click)="closePanel()">
        {{ translations.close }}
      </button>
    </div>
  </div>
</div>
