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

<div class="dialog-header">
  <h3 data-test="webcore.pinboard.dialog.add-widget.title.h3" mat-dialog-title>{{ pinboardI18n.addNewWidgets }}</h3>
  <span data-test="webcore.pinboard.dialog.add-widget.note.span" class="catalog-note">{{
    pinboardI18n.addWidgetNote
  }}</span>
  <button
    data-test="webcore.pinboard.dialog.add-widget.close.button"
    class="close-button mat-icon-button"
    (click)="closeCatalog()"
  >
    <i class="Bosch-Ic Bosch-Ic-abort"></i>
  </button>

  <div class="catalog-filter">
    <mat-form-field>
      <mat-label>{{ pinboardI18n.searchTerm }}</mat-label>
      <input
        data-test="webcore.pinboard.dialog.add-widget.filter.search-term.input"
        matInput
        type="search"
        (keyup)="getWidgetsOfCategory(null)"
        [(ngModel)]="filterString"
      />
      <button mat-icon-button matSuffix>
        <mat-icon fontIcon="Bosch-Ic-search"></mat-icon>
      </button>
    </mat-form-field>
    <mat-form-field>
      <mat-label>{{ pinboardI18n.filterWidgets }}</mat-label>
      <mat-select
        data-test="webcore.pinboard.dialog.add-widget.widget-category.select"
        [(ngModel)]="selectedFilter"
        (selectionChange)="getWidgetsOfCategory(null)"
      >
        <mat-option [value]="ALL_WIDGETS"><mat-icon></mat-icon>{{ pinboardI18n.allWidgets }}</mat-option>
        <mat-divider></mat-divider>
        <mat-option *ngFor="let category of getCategories(false)" [value]="category.id"
          ><mat-icon></mat-icon>{{ category.title }}</mat-option
        >
        <mat-divider></mat-divider>
        <mat-option [value]="CAN_LINK_TO_FILTER"
          ><mat-icon fontIcon="bosch-ic-link"></mat-icon>{{ pinboardI18n.respondToFilter }}</mat-option
        >
      </mat-select>
    </mat-form-field>
  </div>
</div>

<div data-test="webcore.pinboard.dialog.add-widget.widget-content.div" mat-dialog-content>
  <ng-container *ngFor="let category of getCategories(true)">
    <ng-container
      *ngIf="selectedFilter === ALL_WIDGETS || selectedFilter === CAN_LINK_TO_FILTER || category.id === selectedFilter"
    >
      <span class="category-title">{{ category.title }}</span>

      <div class="catalog-category-items-container">
        <div
          *ngFor="let widget of getWidgetsOfCategory(category)"
          [attr.widgetdefid]="widget.id"
          class="catalog-item"
          (click)="selectWidget($event, widget)"
        >
          <div class="widget-header">
            <span class="widget-category">{{ category.title }}</span>
            <span class="widget-heading">{{ widget.catalogConf.title }}</span>
            <mat-icon class="widget-linkable" *ngIf="widget.canLinkToFilter" fontIcon="bosch-ic-link"></mat-icon>
            <mat-checkbox
              class="widget-select"
              [(ngModel)]="checked[widget.id]"
              (change)="selectWidget($event, widget)"
              (click)="$event.stopPropagation()"
            ></mat-checkbox>
          </div>

          <div class="widget-details">
            <!--Image Section of the widget-->
            <div class="preview">
              <div class="icon-img" *ngIf="!widget.catalogConf.imageUrl && widget.catalogConf.icon">
                <i class="bosch-ic bosch-ic-large {{ widget.catalogConf.icon }}"></i>
              </div>
              <img *ngIf="widget.catalogConf.imageUrl" src="{{ widget.catalogConf.imageUrl }}" />
            </div>

            <!--Description of the widget-->
            <div class="description">
              <span
                class="widget-description"
                [class.long-description]="!widget.more && widget.catalogConf.description.length > 150"
              >
                {{ widget.catalogConf.description }}
              </span>
              <span
                *ngIf="!widget.more && widget.catalogConf.description.length > 150"
                (click)="$event.stopPropagation(); widget.more = true"
                class="show-more"
              >
                {{ pinboardI18n.showMore }}
                <i class="bosch-ic bosch-ic-small bosch-ic-down"></i>
              </span>
            </div>
          </div>
        </div>
      </div>
    </ng-container>
  </ng-container>

  <div *ngIf="getCategories(true).length === 0" class="empty-message">{{ pinboardI18n.emptyCatalog }}</div>
</div>
<div mat-dialog-actions [attr.align]="'end'">
  <button
    data-test="webcore.pinboard.dialog.add-widget.button"
    class="button-primary"
    (click)="addWidgetToGrid()"
    [disabled]="selectedWidgets.length === 0"
  >
    {{ pinboardI18n.addWidget }}
    <span *ngIf="selectedWidgets.length > 0"> ({{ selectedWidgets.length }}) </span>
  </button>
  <button
    data-test="webcore.pinboard.dialog.add-widget.cancel.button"
    class="button-secondary"
    (click)="closeCatalog()"
  >
    {{ pinboardI18n.cancel }}
  </button>
</div>
