<!--
  ~ Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<bci-page-content>
  <h2 class="page-heading">Dialog & Modal</h2>

  <h3>Basic Demo</h3>
  <p>
    Parameters can be passed to the modal dialog. In this example the "title" and "additional Title" parameter can be
    passed. The additional Title is a second separate header above the normal title.
  </p>
  <mat-form-field>
    <mat-label>Title</mat-label>
    <input matInput type="text" placeholder="Welcome to the Dialog" name="title" [(ngModel)]="title" />
  </mat-form-field>
  <mat-form-field *ngIf="additionalTitleDisabled">
    <mat-label>Additional Title</mat-label>
    <input
      matInput
      type="text"
      placeholder="Today is a good day"
      name="additionalTitle"
      [(ngModel)]="additionalTitle"
    />
  </mat-form-field>
  <bci-commandbar [showSearch]="false" [showAdd]="false">
    <bci-commandbar-quickfilters>
      <bci-commandbar-item>
        <mat-slide-toggle name="optionalButtonDisabled" [(ngModel)]="optionalButtonDisabled"
          >Disable Outer Left Button
        </mat-slide-toggle>
      </bci-commandbar-item>
      <bci-commandbar-item>
        <mat-slide-toggle name="closeIconDisabled" [(ngModel)]="closeIconDisabled"
          >Disable Close Icon
        </mat-slide-toggle>
      </bci-commandbar-item>
      <bci-commandbar-item>
        <mat-slide-toggle name="closeIcon" [(ngModel)]="closeIcon">Without Close Icon </mat-slide-toggle>
      </bci-commandbar-item>
      <bci-commandbar-item>
        <mat-slide-toggle name="additionalTitleDisabled" (click)="toggleForAdditionalTitle()"
          >Additional Title
        </mat-slide-toggle>
      </bci-commandbar-item>
    </bci-commandbar-quickfilters> </bci-commandbar
  ><br />
  <button id="button" bciSecondaryButton (click)="openModalWithData()">Show modal</button>

  <hr />
  <h3>Modal with return data</h3>
  <p>Data from modal dialog is/ can be returned to Opening Component.</p>
  <button bciSecondaryButton (click)="openModalWithReturnData()">Show modal</button>
  <p>Return data:</p>
  <code>{{ returnData }}</code>

  <hr />
  <h3>Modal with delete confirmation</h3>
  <button bciSecondaryButton (click)="openModalWithAll()">Show modal</button>

  <hr />
  <h3>Modal with dynamic disable state</h3>
  <button bciSecondaryButton (click)="openModalWithDynamicallyDisableState()">Show modal</button>

  <bci-callout type="info" class="page-callout" style="margin-top: 16px">
    <strong>Loader Service as a component within a dialog</strong><br />
    To prevent user interactions within a dialog, the
    <a href="/services-demo/loader-service">Loader Service</a> component can be used as well. While the non-closeable
    dialog (demo above) only prevents the user to close the dialog with the close icon, background click and ESC key.
    The Loader Service component additionally displays a loading state. This way the user has an indication that
    something is being processed.
  </bci-callout>

  <h3>Modal sizes</h3>
  <p>
    These two tables show the minimum/maximum width/height for modals. A differentiation is made between the modals with
    and without additional title.
  </p>
  <p>VP1 = Viewport 1, VP2 = Viewport2, VP3 = Viewport 3</p>
  <div class="table-container">
    <div class="table">
      <strong>Without additional Title</strong>
      <table mat-table [dataSource]="dataSource1" class="mat-elevation-z8">
        <!-- Viewport Column -->
        <ng-container matColumnDef="viewport">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Viewport</th>
          <td mat-cell *matCellDef="let element">{{ element.viewport }}</td>
        </ng-container>

        <!-- Min-Width Column -->
        <ng-container matColumnDef="minWidth">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Min-Width</th>
          <td mat-cell *matCellDef="let element">{{ element.minWidth }}</td>
        </ng-container>

        <!-- Max-Width Column -->
        <ng-container matColumnDef="maxWidth">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Max-Width</th>
          <td mat-cell *matCellDef="let element">{{ element.maxWidth }}</td>
        </ng-container>

        <!-- Min-Height Column -->
        <ng-container matColumnDef="minHeight">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Min-Height</th>
          <td mat-cell *matCellDef="let element">{{ element.minHeight }}</td>
        </ng-container>

        <!-- Max-Height Column -->
        <ng-container matColumnDef="maxHeight">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Max-Height</th>
          <td mat-cell *matCellDef="let element">{{ element.maxHeight }}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
    </div>

    <div class="table">
      <strong>With additional Title</strong>
      <table mat-table [dataSource]="dataSource2" class="mat-elevation-z8">
        <!-- Viewport Column -->
        <ng-container matColumnDef="viewport">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Viewport</th>
          <td mat-cell *matCellDef="let element">{{ element.viewport }}</td>
        </ng-container>

        <!-- Min-Width Column -->
        <ng-container matColumnDef="minWidth">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Min-Width</th>
          <td mat-cell *matCellDef="let element">{{ element.minWidth }}</td>
        </ng-container>

        <!-- Max-Width Column -->
        <ng-container matColumnDef="maxWidth">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Max-Width</th>
          <td mat-cell *matCellDef="let element">{{ element.maxWidth }}</td>
        </ng-container>

        <!-- Min-Height Column -->
        <ng-container matColumnDef="minHeight">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Min-Height</th>
          <td mat-cell *matCellDef="let element">{{ element.minHeight }}</td>
        </ng-container>

        <!-- Max-Height Column -->
        <ng-container matColumnDef="maxHeight">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Max-Height</th>
          <td mat-cell *matCellDef="let element">{{ element.maxHeight }}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
    </div>
  </div>
</bci-page-content>
