<div class='fx-column-start-stretch'>
  <mat-form-field appearance="fill">
    <mat-label>{{'propertiesPanel.id' | translate }}</mat-label>
    <input matInput type="text" *ngIf="selectedElements.length === 1" [value]="combinedProperties.id"
           (input)="updateModel.emit({property: 'id', value: $any($event.target).value })"
           (keydown.space)="$event.preventDefault();">
    <input matInput type="text" disabled *ngIf="selectedElements.length > 1" [value]="'Muss eindeutig sein'">
  </mat-form-field>

  <aspect-input-element-properties *ngIf="combinedProperties | isInputElement"
                                   [combinedProperties]="combinedProperties"
                                   (updateModel)="updateModel.emit($event)">
  </aspect-input-element-properties>

  <aspect-preset-value-properties [combinedProperties]="combinedProperties"
                                  (updateModel)="updateModel.emit($event)">
  </aspect-preset-value-properties>

  <!-- non-InputElement elements that have labels, i.e. Likert, Button-->
  <mat-form-field *ngIf="combinedProperties.label !== undefined && !(combinedProperties | isInputElement)"
                  appearance="fill">
    <mat-label>{{'propertiesPanel.label' | translate }}</mat-label>
    <textarea matInput type="text"
              [value]="$any(combinedProperties.label)"
              (input)="updateModel.emit({property: 'label', value: $any($event.target).value })">
    </textarea>
  </mat-form-field>

  <mat-form-field *ngIf="combinedProperties.label2 !== undefined" appearance="fill">
    <mat-label>{{'propertiesPanel.label2' | translate }}</mat-label>
    <textarea matInput type="text"
              [value]="$any(combinedProperties.label2)"
              (input)="updateModel.emit({property: 'label2', value: $any($event.target).value })">
    </textarea>
  </mat-form-field>

  <aspect-options-field-set [combinedProperties]="combinedProperties"
                            (updateModel)="updateModel.emit($event)">
  </aspect-options-field-set>

  <button *ngIf="combinedProperties.src"
          class="media-src-button" [style.align-self]="'center'"
          mat-fab color="primary"
          [matTooltip]="'Medienquelle ändern'" [matTooltipPosition]="'right'"
          (click)="changeMediaSrc(combinedProperties.type)">
    <mat-icon>upload_file</mat-icon>
  </button>

  <aspect-ele-specific-props [combinedProperties]="combinedProperties"
                             (updateModel)="updateModel.emit($event)">
  </aspect-ele-specific-props>

  <button *ngIf="combinedProperties.document"
          [style.align-self]="'center'"
          mat-raised-button
          (click)="elementService.showDefaultEditDialog(selectedElements[0])">
    Text und Elemente editieren
  </button>

  <mat-form-field *ngIf="unitService.expertMode && combinedProperties.alt !== undefined">
    <mat-label>Alternativtext</mat-label>
    <input matInput type="text" [value]="$any(combinedProperties.alt)"
           (input)="updateModel.emit({property: 'alt', value: $any($event.target).value })">
  </mat-form-field>

  <button *ngIf="unitService.expertMode && combinedProperties.player"
          [style.align-self]="'center'"
          mat-raised-button
          (click)="elementService.showDefaultEditDialog(selectedElements[0])">
    Medienoptionen anpassen
  </button>

  <mat-form-field *ngIf="combinedProperties.alignment" appearance="fill">
    <mat-label>{{'propertiesPanel.alignment' | translate }}</mat-label>
    <mat-select [value]="combinedProperties.alignment"
                (selectionChange)="updateModel.emit({ property: 'alignment', value: $event.value })">
      <mat-option *ngFor="let option of ['column', 'row']"
                  [value]="option">
        {{ 'propertiesPanel.' + option | translate }}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <aspect-select-properties [combinedProperties]="combinedProperties"
                             (updateModel)="updateModel.emit($event)">
  </aspect-select-properties>

  <mat-checkbox *ngIf="unitService.expertMode && combinedProperties.resizeEnabled !== undefined"
                [checked]="$any(combinedProperties.resizeEnabled)"
                (change)="updateModel.emit({ property: 'resizeEnabled', value: $event.checked })">
    {{'propertiesPanel.resizeEnabled' | translate }}
  </mat-checkbox>

  <mat-checkbox *ngIf="unitService.expertMode && combinedProperties.hasAutoHeight !== undefined"
                [disabled]="$any(combinedProperties.hasDynamicRowCount)"
                [checked]="$any(combinedProperties.hasAutoHeight)"
                (change)="updateModel.emit({ property: 'hasAutoHeight', value: $event.checked })">
    {{'propertiesPanel.hasAutoHeight' | translate }}
  </mat-checkbox>

  <mat-checkbox *ngIf="combinedProperties.hasDynamicRowCount !== undefined"
                [disabled]="$any(combinedProperties.hasAutoHeight)"
                [checked]="$any(combinedProperties.hasDynamicRowCount)"
                (change)="updateModel.emit({ property: 'hasDynamicRowCount', value: $event.checked })">
    {{'propertiesPanel.hasDynamicRowCount' | translate }}
  </mat-checkbox>

  <mat-form-field *ngIf="(combinedProperties.rowCount != null && combinedProperties.hasDynamicRowCount === false) ||
                         (combinedProperties.rowCount != null && combinedProperties.hasDynamicRowCount === undefined)"
                  appearance="fill" class="mdInput textsingleline">
    <mat-label>{{'rows' | translate }}</mat-label>
    <input matInput type="number" [value]="$any(combinedProperties.rowCount)"
           (input)="updateModel.emit({ property: 'rowCount', value: $any($event.target).value || 0 })">
  </mat-form-field>

  <mat-form-field *ngIf="combinedProperties.expectedCharactersCount != null && combinedProperties.hasDynamicRowCount"
                  appearance="fill" class="mdInput textsingleline">
    <mat-label>{{'propertiesPanel.expectedCharactersCount' | translate }}</mat-label>
    <input matInput type="number"
           [disabled]="$any(combinedProperties.hasAutoHeight)"
           [value]="$any(combinedProperties.expectedCharactersCount)"
           (input)="updateModel.emit({ property: 'expectedCharactersCount', value: $any($event.target).value || 0 })">
  </mat-form-field>

  <aspect-action-properties *ngIf="unitService.expertMode && combinedProperties.action !== undefined"
    [actions]="combinedProperties.type === 'button' ? ['unitNav', 'pageNav', 'highlightText', 'stateVariableChange'] :
                                                      ['highlightText', 'removeHighlights',  'stateVariableChange']"
    [combinedProperties]="combinedProperties"
    (updateModel)="updateModel.emit($event)">
  </aspect-action-properties>

  <ng-container *ngIf="combinedProperties.type === 'checkbox'">
    {{'preset' | translate }}
    <mat-button-toggle-group [style.align-self]="'flex-start'"
                             [value]="combinedProperties.value"
                             (change)="updateModel.emit({ property: 'value', value: $event.value })">
      <mat-button-toggle [value]="true">{{'propertiesPanel.true' | translate }}</mat-button-toggle>
      <mat-button-toggle [value]="false">{{'propertiesPanel.false' | translate }}</mat-button-toggle>
    </mat-button-toggle-group>
  </ng-container>
  <mat-form-field *ngIf="combinedProperties.minValue !== undefined" appearance="fill">
    <mat-label>{{'propertiesPanel.preset' | translate }}</mat-label>
    <input matInput type="number" #presetValue="ngModel"
           [ngModel]="combinedProperties.value"
           (ngModelChange)="updateModel.emit({
                    property: 'value',
                    value: $event,
                    isInputValid: presetValue.valid})">
  </mat-form-field>

  <aspect-text-field-element-properties [combinedProperties]="combinedProperties"
                                        (updateModel)="updateModel.emit($event)">
  </aspect-text-field-element-properties>

  <aspect-input-assistance-properties *ngIf="unitService.expertMode"
                                      [combinedProperties]="combinedProperties"
                                      (updateModel)="updateModel.emit($event)">
  </aspect-input-assistance-properties>

  <mat-checkbox *ngIf="combinedProperties.stickyHeader !== undefined"
                [checked]="$any(combinedProperties.stickyHeader)"
                (change)="updateModel.emit({ property: 'stickyHeader', value: $event.checked })">
    {{'propertiesPanel.stickyHeader' | translate }}
  </mat-checkbox>

  <mat-checkbox *ngIf="unitService.expertMode && combinedProperties.crossOutChecked !== undefined"
                [checked]="$any(combinedProperties.crossOutChecked)"
                (change)="updateModel.emit({ property: 'crossOutChecked', value: $event.checked })">
    {{'propertiesPanel.crossOutChecked' | translate }}
  </mat-checkbox>

  <mat-form-field *ngIf="combinedProperties.firstColumnSizeRatio != null"
                  matTooltip="{{'propertiesPanel.firstColumnSizeRatioExplanation' | translate }}"
                  appearance="fill">
    <mat-label>{{'propertiesPanel.firstColumnSizeRatio' | translate }}</mat-label>
    <input matInput type="number" [value]="$any(combinedProperties.firstColumnSizeRatio)"
           (input)="updateModel.emit({ property: 'firstColumnSizeRatio', value: $any($event.target).value || 0 })">
  </mat-form-field>

  <aspect-scale-and-zoom-properties *ngIf="unitService.expertMode"
                                    [combinedProperties]="combinedProperties"
                                    (updateModel)="updateModel.emit($event)">
  </aspect-scale-and-zoom-properties>

  <mat-checkbox *ngIf="combinedProperties.verticalOrientation !== undefined"
                [checked]="$any(combinedProperties.verticalOrientation)"
                (change)="updateModel.emit({ property: 'verticalOrientation', value: $event.checked })">
    {{'propertiesPanel.verticalOrientation' | translate }}
  </mat-checkbox>

  <ng-container *ngIf="!unitService.expertMode">
    <mat-divider [style.margin.px]="15"></mat-divider>

    <ng-container *ngIf="combinedProperties.type === 'geometry'">
      <mat-form-field appearance="fill">
        <mat-label>{{'propertiesPanel.width' | translate }}</mat-label>
        <input matInput type="number" min="0"
               [ngModel]="$any(combinedProperties.dimensions).width"
               (ngModelChange)="updateDimensionProperty('width', $event)">
      </mat-form-field>
      <mat-form-field>
        <mat-label>
          {{'propertiesPanel.height' | translate }}
        </mat-label>
        <input matInput type="number" min="0"
               [ngModel]="$any(combinedProperties.dimensions).height"
               (ngModelChange)="updateDimensionProperty('height', $event)">
      </mat-form-field>
    </ng-container>

    <ng-container *ngIf="combinedProperties.dimensions">
      <ng-container *ngIf="combinedProperties.type === 'drop-list' || combinedProperties.type === 'text-field-simple'; else elseBlock">
        <mat-checkbox #fixedWidth [checked]="$any(combinedProperties.dimensions).isWidthFixed"
                      (change)="updateDimensionProperty('isWidthFixed', $event.checked)">
          {{'propertiesPanel.isWidthFixed' | translate }}
        </mat-checkbox>
        <mat-form-field appearance="fill">
          <mat-label>{{'propertiesPanel.width' | translate }}</mat-label>
          <input matInput type="number" min="0"
                 [disabled]="!fixedWidth.checked"
                 [ngModel]="$any(combinedProperties.dimensions).width"
                 (ngModelChange)="updateDimensionProperty('width', $event)"
                 (change)="$any(combinedProperties.dimensions).width =
                   $any(combinedProperties.dimensions).width ? $any(combinedProperties.dimensions).width : 0">
        </mat-form-field>
      </ng-container>

      <ng-template #elseBlock>
        <ng-container *ngIf="combinedProperties.dimensions?.maxWidth !== undefined">
          <mat-checkbox #maxWidthEnabled [checked]="$any(combinedProperties.dimensions).maxWidth !== null"
                        (change)="toggleProperty('maxWidth', $event.checked)">
            {{'propertiesPanel.maxWidthEnabled' | translate }}
          </mat-checkbox>
          <mat-form-field>
            <mat-label>
              {{'propertiesPanel.maxWidth' | translate }}
            </mat-label>
            <input matInput type="number" min="0"
                   [disabled]="!maxWidthEnabled.checked"
                   [ngModel]="$any(combinedProperties.dimensions).maxWidth"
                   (ngModelChange)="updateDimensionProperty('maxWidth', $event)">
          </mat-form-field>
        </ng-container>
      </ng-template>
    </ng-container>
  </ng-container>

  <mat-checkbox *ngIf="unitService.expertMode" [style.margin-top.px]="20"
                [checked]="$any(combinedProperties.isRelevantForPresentationComplete)"
                (change)="updateModel
                .emit({ property: 'isRelevantForPresentationComplete', value: $event.checked })">
    {{'propertiesPanel.isRelevantForPresentationComplete' | translate }}
  </mat-checkbox>
</div>