<div class="modal-header">
  <div
    class="h3"
    title="{{ 'Add widget' | translate }}"
    id="modal-title"
    *ngIf="!current"
    translate
  >
    Add widget
  </div>
  <div
    class="h3"
    title="{{ 'Edit widget' | translate }}"
    id="modal-title"
    *ngIf="current"
    translate
  >
    Edit widget
  </div>
</div>
<form
  name="form"
  #configForm="ngForm"
>
  <div
    class="c8y-modal-tabs"
    id="modal-body"
  >
    <div class="tabContainer">
      <ul class="nav nav-tabs nav-tabsc8y p-l-24">
        <li [class.active]="mode === 'select'">
          <button
            class="btn"
            title="{{ 'Select widget' | translate }}"
            type="button"
            (click)="changeMode('select'); (false)"
          >
            <i c8yIcon="th-large"></i>
            <span translate>Select widget</span>
          </button>
        </li>
        <li [class.active]="mode === 'config'">
          <button
            class="btn"
            title="{{ 'Configuration' | translate }}"
            type="button"
            [disabled]="!selected"
            (click)="changeMode('config'); (false)"
          >
            <i c8yIcon="cog"></i>
            <span translate>Configuration</span>
          </button>
        </li>
        <li [class.active]="mode === 'style'">
          <button
            class="btn"
            title="{{ 'Appearance' | translate }}"
            type="button"
            [disabled]="!selected"
            (click)="changeMode('style'); (false)"
          >
            <i c8yIcon="paint-brush"></i>
            <span translate>Appearance</span>
          </button>
        </li>
      </ul>
    </div>
  </div>

  <div class="modal-inner-scroll modal-inner-scroll--fixed">
    <div
      class="bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0 elevation-md"
      style="z-index: 2"
      *ngIf="mode === 'select'"
    >
      <div class="row">
        <div class="col-sm-6">
          <div class="input-group input-group-search">
            <input
              class="form-control"
              [attr.aria-label]="'Search' | translate"
              placeholder="{{ 'Search…' | translate }}"
              type="text"
              data-cy="widget-config--Search"
              [(ngModel)]="searchTerm"
              [ngModelOptions]="{ standalone: true }"
              (keydown)="searchChange$.next($event)"
            />
            <span class="input-group-btn">
              <button
                class="btn btn-dot"
                title="{{ 'Search' | translate }}"
                type="button"
                (click)="resetSearch()"
              >
                <i [c8yIcon]="searchTerm.length === 0 ? 'search' : 'close'"></i>
              </button>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div
      class="modal-body bg-level-2"
      *ngIf="mode === 'select'"
    >
      <div class="card-group card-select m-b-0">
        <div
          class="col-md-3 col-sm-4 col-xs-6"
          title="{{ cmp.description | translate }}"
          data-cy="widget-config--widget-list"
          *ngFor="let cmp of searchResult || components"
        >
          <button
            class="btn-clean d-col card p-8"
            [class.active]="selected === cmp"
            type="button"
            (click)="select(cmp)"
          >
            <div
              class="text-center p-8 m-b-8 d-col flex-center flex-grow bg-level-2"
              role="presentation"
            >
              <ng-container *ngIf="!cmp.previewImage; else previewImage">
                <div class="h1"><i c8yIcon="file-image-o"></i></div>
                <small translate>Preview not available</small>
              </ng-container>
              <ng-template #previewImage>
                <img
                  class="widget-thumbnail"
                  alt
                  [src]="cmp.previewImage"
                />
              </ng-template>
            </div>
            <p class="card-title text-truncate">
              <c8y-highlight
                text="{{ cmp.label | translate }}"
                [pattern]="searchTerm"
              ></c8y-highlight>
            </p>
          </button>
        </div>

        <div
          class="c8y-empty-state text-center"
          *ngIf="searchResult && searchResult.length === 0"
        >
          <div
            class="h1"
            c8yIcon="search"
          ></div>
          <h3 translate>No widgets found.</h3>
          <div class="d-flex">
            <p
              class="m-r-8"
              translate
            >
              Rephrase your search term.
            </p>
            <button
              class="btn btn-primary"
              title="{{ 'Reset search' | translate }}"
              type="button"
              (click)="resetSearch()"
            >
              {{ 'Reset search' | translate }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- The following is intentional set to hidden to allow the ViewChild ref in the controller -->
    <div
      class="d-flex d-col fit-h"
      *ngIf="selected"
      [ngClass]="{ hidden: mode !== 'config' }"
    >
      <div class="p-t-16 flex-no-shrink separator-bottom p-b-16">
        <div class="row">
          <div class="col-sm-4">
            <div class="p-l-24">
              <div class="text-left text-medium h4">
                {{ selected.label | translate }}
              </div>
              <p>
                {{ selected.description | translate }}
              </p>
            </div>
          </div>
          <div class="col-sm-8">
            <div class="p-r-24">
              <c8y-form-group>
                <label
                  for="widgetTitle"
                  translate
                >
                  Title
                </label>
                <input
                  class="form-control"
                  id="widgetTitle"
                  placeholder="{{ 'e.g.' | translate }} {{ componentLabel | translate }}"
                  name="title"
                  type="text"
                  required
                  [(ngModel)]="selected.data.title"
                />
              </c8y-form-group>
            </div>
          </div>
        </div>
      </div>
      <div
        class="row flex-grow"
        [ngClass]="{ 'd-flex': widgetConfig.options || hasConfig() }"
      >
        <div
          class="a-s-stretch"
          [ngStyle]="isLegacyAlarmWidget ? { 'pointer-events': 'none', opacity: '0.5' } : {}"
          *ngIf="!widgetConfig.settings?.noDeviceTarget && mode === 'config'"
          [ngClass]="{
            'bg-level-1 col-sm-4 p-r-0': hasConfig(),
            'bg-level-0 col-sm-12': !hasConfig()
          }"
        >
          <div
            class="fit-h bg-inherit p-l-16"
            [ngClass]="{ 'p-r-24': !hasConfig() }"
          >
            <div class="p-relative bg-inherit">
              <c8y-asset-selector-miller
                class="d-block bg-inherit p-relative"
                style="height: calc(100vh - 422px)"
                (onSelected)="selectionChanged($event)"
                [config]="{
                  view: 'miller',
                  groupsSelectable: this.widgetConfig.settings?.groupsSelectable,
                  showChildDevices: true,
                  columnHeaders: true,
                  showUnassignedDevices: true,
                  search: !this.widgetConfig.settings.context?.additionParents,
                  showFilter: true,
                  singleColumn: !!this.hasConfig(),
                  showSelected: true
                }"
                [asset]="widgetConfig.settings?.context"
                [selectedDevice]="selectedDevice"
              ></c8y-asset-selector-miller>
            </div>
          </div>
        </div>
        <div
          [ngClass]="{
            'col-sm-8': !widgetConfig.settings?.noDeviceTarget,
            'col-sm-12': widgetConfig.settings?.noDeviceTarget,
            'sr-only': !hasConfig()
          }"
        >
          <c8y-dynamic-component
            class="d-block"
            style="height: {{ hasConfig() ? 'calc(100vh - 422px)' : '0' }}"
            [ngClass]="{ 'inner-scroll p-r-24 p-t-16': !widgetConfig.settings?.noDeviceTarget }"
            [componentId]="selected.id"
            mode="config"
            [config]="widgetConfig"
            [notFoundError]="false"
            #config
          ></c8y-dynamic-component>
        </div>
      </div>
    </div>

    <div
      class="modal-body p-t-0"
      style="height: calc(100vh - 310px)"
      *ngIf="mode === 'style'"
    >
      <div class="row">
        <div class="col-xs-6">
          <c8y-appearance-settings
            [(themeClass)]="styling.contentClass"
            [(headerClass)]="styling.headerClass"
            [possibleStylingTheme]="possibleStyling.WIDGET_CONTENT_CLASSES"
            [possibleStylingHeader]="possibleStyling.WIDGET_HEADER_CLASSES"
            [defaultThemeClass]="defaultStyling.contentClass"
            [defaultHeaderClass]="defaultStyling.headerClass"
          ></c8y-appearance-settings>
        </div>
        <div class="col-xs-6 sticky-header-top-0">
          <c8y-widget-preview
            style="height: calc(100vh - 382px)"
            [previewClasses]="getStyle(true)"
          ></c8y-widget-preview>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-footer">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      data-cy="widget-config--cancel-widget"
      (click)="close()"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary"
      title="{{ 'Save' | translate }}"
      type="submit"
      data-cy="widget-config--save-widget"
      (click)="save()"
      [disabled]="
        !dynamicComponent ||
        (((this.contextDashboardService.formDisabled$ | async) || isSaveDisabled()) &&
          !!widgetHasConfigComponent)
      "
      c8yProductExperience
      [actionName]="current ? 'editWidget' : 'createWidget'"
      [actionData]="{ widgetName: selected && selected.id }"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</form>