<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i [c8yIcon]="icon"></i>
    <h1
      class="h3"
      id="modal-title"
    >
      {{ title | translate }}
    </h1>
  </div>
  <div class="p-16 text-center separator-bottom min-height-fit">
    <p class="m-b-8">{{ subTitle | translate }}</p>
    <div class="row">
      <div
        *ngIf="showFilter"
        [ngClass]="{
          'col-xs-6': showFilter && additionalFilterTemplate,
          'col-xs-12': !showFilter || !additionalFilterTemplate
        }"
      >
        <c8y-filter
          [icon]="'search'"
          (onSearch)="updatePipe($event)"
        ></c8y-filter>
      </div>
      <div
        *ngIf="additionalFilterTemplate"
        [ngClass]="{
          'col-xs-6': showFilter && additionalFilterTemplate,
          'col-xs-12': !showFilter || !additionalFilterTemplate
        }"
      >
        <ng-container *ngTemplateOutlet="additionalFilterTemplate"></ng-container>
      </div>
    </div>
  </div>
  <div
    class="modal-inner-scroll"
    id="modal-body"
  >
    <div class="p-l-16 p-r-16">
      <div
        class="panel m-t-8 m-b-8"
        *ngIf="!items || items.length === 0 || (emptyItemsOnly && hideEmptyItems)"
      >
        <div class="c8y-empty-state text-left">
          <h1
            class="c8y-icon-duocolor"
            c8yIcon="{{ icon }} "
          ></h1>
          <p>{{ (noItemsMessage | translate) ?? 'No items to display.' | translate }}</p>
        </div>
      </div>
    </div>
    <c8y-list-group>
      <ng-container *ngFor="let item of listItems | selectModalFilterPipe : filterTerm">
        <c8y-li *ngIf="item.options?.length > 0 || !hideEmptyItems">
          <c8y-li-icon>
            <i c8yIcon="{{ icon }}"></i>
          </c8y-li-icon>

          <c8y-li-body class="content-flex-30">
            <div class="col-9">
              <div
                *ngFor="let bodyPart of item.body"
                [ngClass]="bodyPart.class"
              >
                <c8y-highlight
                  [title]="bodyPart.value"
                  [pattern]="filterTerm"
                  [text]="bodyPart.value"
                ></c8y-highlight>
              </div>
            </div>

            <div
              class="col-3 text-right"
              *ngIf="item.additionalInformation"
            >
              <div [ngClass]="item.additionalInformation.class">
                {{ item.additionalInformation.value }}
              </div>
            </div>
          </c8y-li-body>

          <c8y-li-collapse *ngIf="item.options?.length > 0">
            <c8y-list-group>
              <c8y-li *ngFor="let option of item.options">
                <c8y-li-radio
                  [name]="mode === 'single' ? 'single' : item.groupId"
                  (onSelect)="updateChoice({ item: item, id: option.obj.id })"
                  [disabled]="option.disabled"
                  [selected]="option.selected"
                ></c8y-li-radio>
                <c8y-li-body class="content-flex-20">
                  <div
                    *ngFor="let optionPart of option.body; let i = index"
                    [ngClass]="optionPart.class"
                  >
                    <c8y-highlight
                      [pattern]="filterTerm"
                      [text]="optionPart.value"
                    ></c8y-highlight>
                  </div>
                  <ng-container
                    *ngIf="option.template"
                    [ngTemplateOutlet]="option.template"
                    [ngTemplateOutletContext]="{ $implicit: item, option: option }"
                  ></ng-container>
                </c8y-li-body>
              </c8y-li>
            </c8y-list-group>
          </c8y-li-collapse>
        </c8y-li>
      </ng-container>
      <div *ngIf="areMoreEntries">
        <div
          class="alert alert-info m-t-16 m-r-8 m-l-8"
          translate
        >
          Some entries might not be shown. Try narrowing search criteria.
        </div>
      </div>
    </c8y-list-group>
  </div>

  <div class="modal-footer">
    <button
      class="btn btn-default"
      title="{{ labels.cancel | translate }}"
      type="button"
      data-cy="select-modal--Cancel-button"
      *ngIf="labels.cancel"
      (click)="dismiss()"
      c8yProductExperience
      inherit
      [actionData]="{ result: labels.cancel }"
    >
      {{ labels.cancel | translate }}
    </button>
    <button
      class="btn btn-primary"
      title="{{ labels.ok | translate }}"
      type="button"
      data-cy="select-modal--Save-button"
      (click)="select()"
      [disabled]="!selected"
      c8yProductExperience
      inherit
      [actionData]="{ result: labels.ok }"
    >
      {{ labels.ok | translate }}
    </button>
  </div>
</div>