<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <span c8yIcon="{{ icon }}"></span>
    <h4 class="text-uppercase">
      {{ title | translate }}
    </h4>
  </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">
    <div class="p-l-16 p-r-16">
      <div class="panel m-t-8 m-b-8" *ngIf="!items || items.length === 0">
        <div class="c8y-empty-state text-left">
          <h1 c8yIcon="{{ icon }} " class="c8y-icon-duocolor"></h1>
          <p translate>No items to display.</p>
        </div>
      </div>
    </div>
    <c8y-list-group>
      <c8y-li *ngFor="let item of listItems | selectModalFilterPipe: filterTerm">
        <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>
          <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>
      <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
      title="{{ labels.cancel | translate }}"
      *ngIf="labels.cancel"
      class="btn btn-default"
      (click)="dismiss()"
    >
      {{ labels.cancel | translate }}
    </button>
    <button
      title="{{ labels.ok | translate }}"
      class="btn btn-primary"
      (click)="select()"
      [disabled]="!selected"
    >
      {{ labels.ok | translate }}
    </button>
  </div>
</div>