<div class="modal-header separator">
  <h3 *ngIf="!current" translate>Add widget</h3>
  <h3 *ngIf="current" translate>Edit widget</h3>
</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
      class="modal-body"
      *ngIf="selected"
      [hidden]="mode !== 'config'"
      style="min-height: calc(100vh - 290px);"
    >
      <h4 class="text-left">
        <strong>
          {{ selected.label | translate }}
        </strong>
      </h4>
      <p class="m-b-24">
        {{ selected.description | translate }}
      </p>
      <div class="row">
        <!-- change to col-sm-6 when preview is available -->
        <div class="col-sm-12">
          <div class="legend form-block" translate>Configuration</div>
          <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>

          <!-- This is an upgraded component for the device selector and still needs to be migrated -->
          <c8y-dynamic-component
            componentId="device.selector.legacy"
            [config]="widgetConfig"
            [notFoundError]="false"
            *ngIf="!isUpgrade"
          ></c8y-dynamic-component>

          <c8y-dynamic-component
            [componentId]="selected.id"
            mode="config"
            [config]="widgetConfig"
            [notFoundError]="false"
            #config
          ></c8y-dynamic-component>
        </div>
        <!-- markup for the preview

        <div class="col-sm-6 sticky-header-top-0" >
          <div class="legend form-block">
            Preview
          </div>
          <div class="bg-gray-lighter p-16">
            <div class="card card-dashboard m-b-0">
              <div class="card-header-actions">
                <div class="card-title text-uppercase">{{ selected.data.title }}</div>
                <div class="header-actions">
                  <div class="optionsBtn dropdow" class="btnIcon dropdown-toggle c8y-dropdown">
                    <i c8yIcon="cog"></i>
                  </div>
                </div>
              </div>
              <div class="card-inner-scroll">
                <div class="card-block" style="min-height: 240px;">
                  include here the widget
                </div>
              </div>
            </div>
          </div>
        </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"
      c8yProductExperience
      [actionName]="current ? 'editWidget' : 'createWidget'"
      [actionData]="{ widgetName: selected && selected.id }"
    >
      Save
    </button>
  </div>
</form>