<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>

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

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

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

  <aspect-hotspot-field-set *ngIf="combinedProperties.type === 'hotspot-image'"
                            [combinedProperties]="combinedProperties"
                            (updateModel)="updateModel.emit($event)">
  </aspect-hotspot-field-set>

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

  <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-checkbox *ngIf="combinedProperties.hasDynamicRowCount !== undefined"
                [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"
                  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>

  <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" [value]="$any(combinedProperties.expectedCharactersCount)"
           (input)="updateModel.emit({ property: 'expectedCharactersCount', 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>

  <mat-form-field *ngIf="combinedProperties.appDefinition != null"
                  matTooltip="{{'propertiesPanel.appDefinition' | translate }}"
                  appearance="fill">
    <mat-label>{{'propertiesPanel.appDefinition' | translate }}</mat-label>
    <input matInput disabled
           [value]="$any(combinedProperties.appDefinition)"
           (input)="updateModel.emit({ property: 'appDefinition', value: $any($event.target).value })">
    <button mat-icon-button matSuffix (click)="showGeogebraAppDefDialog()">
      <mat-icon>edit</mat-icon>
    </button>
  </mat-form-field>

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

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


</div>