<div
  class="inner-scroll fit-h"
  [attr.aria-label]="title | translate"
  role="region"
  [ngClass]="{ 'split-view__list bg-level-1': isSplitView, 'bg-component': !isSplitView }"
  data-cy="c8y-sv-list"
  #innerScrollDiv
>
  @if (title || hasAlerts) {
    <div
      class="flex-wrap flex-no-shrink sticky-top gap-8"
      [ngClass]="{
        'card-header separator': title && shouldShowTitle
      }"
    >
      @if (title && shouldShowTitle) {
        <h4 class="card-title">
          {{ title | translate }}
        </h4>
      }
      <ng-content select="c8y-sv-header-actions"></ng-content>
      @if (hasAlerts) {
        <ng-content select="c8y-sv-alerts"></ng-content>
      }
    </div>
  }
  <div data-cy="c8y-sv-list--group">
    @if (loading && !showEmptyState) {
      <div class="sticky-top">
        <div class="p-absolute fit-w overflow-hidden p-b-4">
          <c8y-loading
            [layout]="'page'"
            data-cy="c8y-sv-list--loading"
          ></c8y-loading>
        </div>
      </div>
    }
    <ng-content></ng-content>

    @if (showEmptyState) {
      <div class="p-relative p-l-24">
        <c8y-ui-empty-state
          [icon]="emptyStateIcon"
          [title]="emptyStateTitle"
          [subtitle]="emptyStateSubtitle"
          data-cy="c8y-sv-list--empty-state"
        >
          @if (docsUrl) {
            <p c8y-guide-docs>
              <small
                translate
                [translateParams]="{ docsUrl }"
                ngNonBindable
              >
                Find out more in the
                <a c8y-guide-href="{{ docsUrl }}">user documentation</a>.
              </small>
            </p>
          }
        </c8y-ui-empty-state>
      </div>
    }
  </div>

  <ng-content select="c8y-sv-footer"></ng-content>
</div>