<div fxLayout="column">
  <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 })">
    <input matInput type="text" disabled *ngIf="selectedElements.length > 1" [value]="'Muss eindeutig sein'">
  </mat-form-field>

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

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

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

  <button *ngIf="combinedProperties.document"
          mat-raised-button fxFlexAlign="center"
          (click)="unitService.showDefaultEditDialog(selectedElements[0])">
    Text editieren
  </button>

  <button *ngIf="combinedProperties.src"
          mat-fab color="primary" fxFlexAlign="center" class="media-src-button"
          [matTooltip]="'Medienquelle ändern'" [matTooltipPosition]="'right'"
          (click)="changeMediaSrc(combinedProperties.type)">
    <mat-icon>upload_file</mat-icon>
  </button>
  <button *ngIf="combinedProperties.player"
          mat-raised-button fxFlexAlign="center"
          (click)="unitService.showDefaultEditDialog(selectedElements[0])">
    Medienoptionen
  </button>

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

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

  <mat-form-field *ngIf="combinedProperties.rowCount != null"
                  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 })">
  </mat-form-field>

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

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

  <ng-container *ngIf="combinedProperties.type === 'checkbox'">
    {{'preset' | translate }}
    <mat-button-toggle-group [value]="combinedProperties.value" fxFlexAlign="start"
                             (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>

  <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 })">
  </mat-form-field>

  <aspect-scale-and-zoom-properties [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>

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