<!--

    Copyright © 2016-2026 The Thingsboard Authors

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<form [formGroup]="layoutsFormGroup" (ngSubmit)="save()">
  <mat-toolbar color="primary">
    <h2 translate>layout.manage</h2>
    <span class="flex-1"></span>
    <button mat-icon-button
            (click)="cancel()"
            type="button">
      <mat-icon class="material-icons">close</mat-icon>
    </button>
  </mat-toolbar>
  <div mat-dialog-content>
    <section class="tb-form-panel no-padding no-border">
      <div class="tb-form-row space-between">
        <div class="fixed-title-width" translate>dashboard.layout</div>
        <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
          <mat-select formControlName="layoutType">
            @for (type of layoutTypes; track type) {
              <mat-option [value]="type">
                {{ layoutTypeTranslations.get(type) | translate }}
              </mat-option>
            }
          </mat-select>
        </mat-form-field>
      </div>
      @if (!isDividerLayout) {
        <div class="tb-form-panel stroked">
          <div class="tb-form-table tb-layout-breakpoints">
            <div class="tb-form-table-header no-padding-right">
              <div class="tb-form-table-header-cell tb-icon"></div>
              <div class="tb-form-table-header-cell tb-breakpoint" translate>layout.breakpoints</div>
              <div class="tb-form-table-header-cell tb-size" translate>layout.size</div>
              <div class="tb-form-table-header-cell tb-actions"></div>
            </div>
            <div class="tb-form-table-body no-gap">
              @for (breakpoint of layoutBreakpoints; track breakpoint; let last = $last) {
                <div class="tb-form-table-row no-padding-right">
                  <div class="tb-form-table-row-cell tb-icon">
                    <tb-icon>{{ breakpoint.icon }}</tb-icon>
                  </div>
                  <div class="tb-form-table-row-cell tb-breakpoint">
                    {{ breakpoint.name }}
                  </div>
                  <div class="tb-form-table-row-cell tb-size" tbTruncateWithTooltip>
                    {{ breakpoint.descriptionSize }}
                  </div>
                  <div class="tb-form-table-row-cell-buttons tb-actions">
                    <button mat-icon-button
                            matTooltip="{{ 'layout.settings' | translate }}"
                            matTooltipPosition="above"
                            (click)="openLayoutSettings('main', breakpoint.breakpoint)"
                            type="button" >
                      <mat-icon>settings</mat-icon>
                    </button>
                    <button mat-icon-button
                            matTooltip="{{ 'action.delete' | translate }}"
                            matTooltipPosition="above"
                            [disabled]="breakpoint.breakpoint === 'default'"
                            [class.tb-hidden]="breakpoint.breakpoint === 'default'"
                            (click)="deleteBreakpoint($event, breakpoint.breakpoint)"
                            type="button" >
                      <tb-icon>delete</tb-icon>
                    </button>
                  </div>
                </div>
                @if (!last) {
                  <mat-divider></mat-divider>
                }
              }
            </div>
          </div>
          <button mat-button class="tb-add-breakpoint-button flex-1"
                  matTooltip="{{ 'layout.add-new-breakpoint' | translate }}"
                  matTooltipPosition="above"
                  color="primary"
                  type="button"
                  [disabled]="!allowBreakpointIds.length"
                  (click)="addBreakpoint()">
            <mat-icon>add</mat-icon>
          </button>
        </div>
      } @else {
        <div class="flex flex-col items-center justify-start gap-5">
          <mat-button-toggle-group aria-label="Select width value type"
                                   formControlName="type"
                                   [class.!hidden]="!isDividerLayout">
            <mat-button-toggle class="flex-1" value="percentage">
              {{ 'layout.percentage-width' | translate }}
            </mat-button-toggle>
            <mat-button-toggle class="flex-1" value="fixed">
              {{ 'layout.fixed-width' | translate }}
            </mat-button-toggle>
          </mat-button-toggle-group>
          <div class="tb-layout-preview flex flex-row items-center justify-center">
            <div class="tb-layout-preview-container flex flex-row items-center justify-start"
                 #tooltip="matTooltip"
                 matTooltip=""
                 matTooltipPosition="below">
              <div [style.flex-basis]="buttonFlexValue() + '%'" [style.max-width]="buttonFlexValue() + '%'"
                   class="tb-layout-preview-container-main flex flex-1 flex-col items-center justify-start">
                <button mat-icon-button
                        type="button"
                        matTooltip="{{ 'layout.settings' | translate }}"
                        matTooltipPosition="above"
                        (click)="openLayoutSettings('main')"
                        class="tb-layout-preview-element"
                        aria-label="Layout settings"
                        [class]="layoutButtonClass('main')">
                  <mat-icon>settings</mat-icon>
                </button>
                <button type="button"
                        mat-raised-button
                        color="primary"
                        class="tb-layout-button flex-1"
                        (mouseover)="mainLayoutTooltip.show()"
                        (mouseleave)="mainLayoutTooltip.hide()"
                        (click)="setFixedLayout('main')"
                        [class]="layoutButtonClass('main', true)">
                  <span [matTooltip]="layoutButtonText('main')"
                        #mainLayoutTooltip="matTooltip"
                        matTooltipPosition="above">
                    {{ (isDividerLayout ? 'layout.left' : 'layout.main')  | translate }}
                  </span>
                </button>
                @if (showPreviewInputs('main')) {
                  <div class="tb-layout-preview-element tb-layout-preview-input flex-1">
                    @if (layoutsFormGroup.get('type').value !== layoutWidthType.FIXED) {
                      <input
                        formControlName="leftWidthPercentage"
                        type="number"
                        step="1"
                        min="{{ layoutPercentageSize.MIN }}"
                        max="{{ layoutPercentageSize.MAX }}"
                        required>
                    }
                    @if (layoutsFormGroup.get('type').value === layoutWidthType.FIXED &&
                      layoutsFormGroup.get('fixedLayout').value === 'main') {
                      <input
                        formControlName="fixedWidth"
                        type="number"
                        step="1"
                        min="{{ layoutFixedSize.MIN }}"
                        max="{{ layoutFixedSize.MAX }}"
                        required>
                    }
                  </div>
                }
              </div>
              @if (isDividerLayout) {
                <div class="flex flex-1 flex-col items-center justify-start" matTooltip="">
                  <button mat-icon-button
                          type="button"
                          matTooltip="{{ 'layout.settings' | translate }}"
                          matTooltipPosition="above"
                          (click)="openLayoutSettings('right')"
                          class="tb-layout-preview-element"
                          aria-label="Layout settings"
                          [class]="layoutButtonClass('right')">
                    <mat-icon>settings</mat-icon>
                  </button>
                  <button type="button"
                          mat-raised-button
                          color="primary"
                          class="tb-layout-button tb-layout-button-right flex-1"
                          (mouseover)="rightLayoutTooltip.show()"
                          (mouseleave)="rightLayoutTooltip.hide()"
                          (click)="setFixedLayout('right')"
                          [class]="layoutButtonClass('right')">
                    <span [matTooltip]="layoutButtonText('right')"
                          #rightLayoutTooltip="matTooltip"
                          matTooltipPosition="above">
                      {{ 'layout.right' | translate }}
                    </span>
                  </button>
                  @if (showPreviewInputs('right')) {
                    <div class="tb-layout-preview-element tb-layout-preview-input flex-1">
                      @if (layoutsFormGroup.get('type').value !== layoutWidthType.FIXED) {
                        <input
                          formControlName="rightWidthPercentage"
                          type="number"
                          step="1"
                          min="{{ layoutPercentageSize.MIN }}"
                          max="{{ layoutPercentageSize.MAX }}"
                          required>
                      }
                      @if (layoutsFormGroup.get('type').value === layoutWidthType.FIXED) {
                        <input
                          formControlName="fixedWidth"
                          type="number"
                          step="1"
                          min="{{ layoutFixedSize.MIN }}"
                          max="{{ layoutFixedSize.MAX }}"
                          required>
                      }
                    </div>
                  }
                </div>
              }
            </div>
          </div>
          @if (isDividerLayout) {
            <div class="flex flex-col items-center justify-center gap-2" style="width: 80%">
              @if (layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE) {
                <mat-slider
                  step="1"
                  min="{{ layoutPercentageSize.MIN }}"
                  max="{{ layoutPercentageSize.MAX }}"
                  style="width: 100%;"
                  color="accent"
                  discrete
                  [displayWith]="formatSliderTooltipLabel.bind(this)"><input matSliderThumb formControlName="sliderPercentage"/>
                </mat-slider>
              }
              @if (layoutsFormGroup.get('type').value !== layoutWidthType.PERCENTAGE) {
                <mat-slider
                  step="1"
                  min="{{ layoutFixedSize.MIN }}"
                  max="{{ layoutFixedSize.MAX }}"
                  style="width: 100%;"
                  color="accent"
                  discrete
                  [displayWith]="formatSliderTooltipLabel.bind(this)"><input matSliderThumb formControlName="sliderFixed"/>
                </mat-slider>
              }
              <div class="tb-hint tb-hint-group flex flex-row items-center justify-between" style="width: 100%;">
                <label>
                  {{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MIN + '%' : layoutFixedSize.MIN + 'px'}}
                </label>
                <label>
                  {{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MAX + '%' : layoutFixedSize.MAX + 'px'}}
                </label>
              </div>
            </div>
          }
        </div>
      }
    </section>
  </div>
  <div mat-dialog-actions class="flex items-center justify-end">
    <button mat-button
            color="primary"
            type="button"
            (click)="cancel()" cdkFocusInitial>
      {{ 'action.cancel' | translate }}
    </button>
    <button mat-raised-button color="primary"
            type="submit"
            [disabled]="layoutsFormGroup.invalid || !layoutsFormGroup.dirty">
      {{ 'action.save' | translate }}
    </button>
  </div>
</form>
