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

  <div class="modal-inner-scroll">
    <div
      *ngIf="mode === 'select'"
      class="bg-white p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0"
      style="z-index: 2"
    >
      <div class="row">
        <div class="col-sm-6">
          <div class="input-group input-group-search">
            <input
              class="form-control"
              placeholder="{{ 'Search…' | translate }}"
              type="text"
              [(ngModel)]="searchTerm"
              [ngModelOptions]="{ standalone: true }"
              (keydown)="searchChange$.next($event)"
            />
            <span class="input-group-btn">
              <button class="btn btn-clean" (click)="resetSearch()" type="button">
                <i [c8yIcon]="searchTerm.length === 0 ? 'search' : 'close'"></i>
              </button>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-body bg-gray-lighter" *ngIf="mode === 'select'">
      <div class="card-group card-select m-b-0">
        <div
          class="col-md-3 col-sm-4 col-xs-6"
          *ngFor="let cmp of searchResult || components"
          title="{{ cmp.description | translate }}"
        >
          <div class="card p-8" [class.active]="selected === cmp" (click)="select(cmp)">
            <div
              class="text-center p-8 m-b-8 flex-col flex-center"
              style="min-height: 170px; background-color: var(--body-background-color, #f2f3f4)"
            >
              <ng-container *ngIf="!cmp.previewImage; else previewImage">
                <h1><i c8yIcon="file-image-o"></i></h1>
                <small translate>Preview not available</small>
              </ng-container>
              <ng-template #previewImage>
                <img class="img-responsive" [src]="cmp.previewImage" />
              </ng-template>
            </div>
            <p class="card-title text-truncate">
              <c8y-highlight
                text="{{ cmp.label | translate }}"
                [pattern]="searchTerm"
              ></c8y-highlight>
            </p>
          </div>
        </div>

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

    <!-- The following is intentional set to hidden to allow the ViewChild ref in the controller -->
    <div *ngIf="selected" [hidden]="mode !== 'config'" style="max-height: calc(100vh - 290px)">
      <div class="p-t-16 flex-no-grow">
        <div class="row">
          <div class="col-sm-4">
            <div class="p-l-24">
              <h4 class="text-left text-medium">
                {{ selected.label | translate }}
              </h4>
              <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
                  id="widgetTitle"
                  [(ngModel)]="selected.data.title"
                  type="text"
                  name="title"
                  class="form-control"
                  placeholder="{{ 'e.g.' | translate }} {{ componentLabel | translate }}"
                  required
                />
              </c8y-form-group>
            </div>
          </div>
        </div>
      </div>
      <div
        class="row flex-grow separator-top"
        [ngClass]="{ 'd-flex m-l-0': widgetConfig.options || hasConfig() }"
      >
        <div
          *ngIf="!widgetConfig.settings?.noDeviceTarget"
          class="a-i-stretch"
          [ngClass]="{
            'bg-gray-white col-sm-4 p-l-0 p-r-0': hasConfig(),
            'bg-white col-sm-12': !hasConfig()
          }"
          style="height: 360px"
        >
          <div class="p-l-16 fit-h bg-inherit" [ngClass]="{ 'p-r-16': !hasConfig() }">
            <c8y-asset-selector-miller
              (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()
              }"
              [asset]="widgetConfig.settings?.context"
              [selectedDevice]="selectedDevice"
              class="bg-inherit p-relative"
            ></c8y-asset-selector-miller>
          </div>
        </div>
        <div
          [ngClass]="{
            'col-sm-8': !widgetConfig.settings?.noDeviceTarget,
            'col-sm-12 p-l-32 p-r-8': widgetConfig.settings?.noDeviceTarget
          }"
        >
          <c8y-dynamic-component
            class="d-block p-t-8 p-r-24"
            [componentId]="selected.id"
            mode="config"
            [config]="widgetConfig"
            [notFoundError]="false"
            #config
          ></c8y-dynamic-component>
        </div>
      </div>
    </div>

    <div *ngIf="mode === 'style'" class="modal-body p-t-0" style="min-height: calc(100vh - 290px)">
      <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 [previewClasses]="getStyle(true)"></c8y-widget-preview>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-footer">
    <button
      type="button"
      title="{{ 'Cancel' | translate }}"
      class="btn btn-default"
      (click)="close()"
      translate
    >
      Cancel
    </button>
    <button
      title="{{ 'Save' | translate }}"
      class="btn btn-primary"
      (click)="save()"
      translate
      [disabled]="
        contextDashboardService.formDisabled || configForm.invalid || checkIfDeviceRequired()
      "
      c8yProductExperience
      [actionName]="current ? 'editWidget' : 'createWidget'"
      [actionData]="{ widgetName: selected && selected.id }"
    >
      Save
    </button>
  </div>
</form>