<!-- select widget -->
<ng-container *ngIf="!(widgetConfigService.selected$ | async)">
  <div class="card-header j-c-center separator">
    <div class="h4 text-center">
      {{ 'Select widget' | translate }}
    </div>
  </div>
  <div class="card-inner-scroll fit-h bg-level-2">
    <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"
    >
      <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
          <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="card-block">
      <div class="card-group p-l-24 p-r-24 d-grid grid__col--auto-300 gap-24 card-select m-b-0">
        <button
          class="btn-clean d-col card m-b-0"
          [title]="cmp.description || cmp.label | translate"
          type="button"
          data-cy="widget-config--widget-list"
          *ngFor="let cmp of searchResult || components"
          (click)="select(cmp)"
        >
          <div
            class="border-bottom"
            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="{{ cmp.label | translate }}"
                [src]="cmp.previewImage"
              />
            </ng-template>
          </div>
          <div class="card-block">
            <p class="card-title text-truncate text-medium">
              <c8y-highlight
                text="{{ cmp.label | translate }}"
                [pattern]="searchTerm"
              ></c8y-highlight>
            </p>
            <p
              class="small text-default"
              style="white-space: wrap"
            >
              {{ cmp.description | translate }}
            </p>
          </div>
        </button>
        <c8y-ui-empty-state
          class="p-24 grid__col--fullspan"
          [icon]="'search'"
          [title]="'No widgets found.' | translate"
          [subtitle]="' Rephrase your search term.' | translate"
          *ngIf="searchResult && searchResult.length === 0"
        >
          <button
            class="btn btn-primary"
            title="{{ 'Reset search' | translate }}"
            type="button"
            (click)="resetSearch()"
          >
            {{ 'Reset search' | translate }}
          </button>
        </c8y-ui-empty-state>
      </div>
    </div>
  </div>
  <div class="card-footer text-center separator flex-no-shrink">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      data-cy="widget-config--cancel-widget"
      (click)="close()"
    >
      {{ 'Cancel' | translate }}
    </button>
  </div>
</ng-container>

<!-- widget configuration -->
<ng-container *ngIf="!!(widgetConfigService.selected$ | async)">
  <div class="card-header d-block separator-bottom flex-no-shrink">
    <div
      class="h3 p-t-16"
      title="{{ selected?.label | translate }}"
    >
      <span>{{ selected?.label | translate }}</span>
      <button
        class="btn btn-default btn-sm m-l-8"
        [title]="'Change widget' | translate"
        (click)="backToWidgetSelection(); (false)"
      >
        <i c8yIcon="replace"></i>
        {{ 'Change widget' | translate }}
      </button>
    </div>
    <div
      class="p-t-8"
      *ngIf="selected"
    >
      <p>
        {{ selected.description | translate }}
      </p>
    </div>
  </div>

  <div class="d-grid grid__col--560-auto min-height-0 flex-grow">
    <div class="bg-level-1 inner-scroll">
      <div class="p-16 flex-no-shrink separator-bottom bg-level-1">
        <c8y-form-group>
          <label
            for="widgetTitle"
            translate
          >
            Widget 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>

      <c8y-ui-empty-state
        class="p-24"
        [icon]="'settings'"
        [title]="'No configuration needed.' | translate"
        [subtitle]="'This widget does not need any specific configuration.' | translate"
        [horizontal]="true"
        *ngIf="!(widgetConfigService.hasConfig$ | async)"
      ></c8y-ui-empty-state>
      <div>
        <form
          name="form"
          #configForm="ngForm"
        >
          <ng-container *ngIf="widgetConfigService.hasConfig$ | async">
            <ng-container *ngIf="widgetConfigService.providers$ | async as providers">
              <ng-container
                *c8yComponentOutlet="widgetConfigRoot; providers: providers"
              ></ng-container>
            </ng-container>
          </ng-container>
        </form>
      </div>
    </div>
    <div class="inner-scroll p-32 p-t-0">
      <c8y-widget-preview [previewClasses]="getStyle(true)"></c8y-widget-preview>

      <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"
        [columns]="2"
      ></c8y-appearance-settings>
    </div>
  </div>

  <div class="card-footer separator text-center">
    <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]="(contextDashboardService.formDisabled$ | async) || isSaveDisabled()"
      c8yProductExperience
      [actionName]="current ? 'editWidget' : 'createWidget'"
      [actionData]="{ widgetName: selected && selected.id }"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</ng-container>