@if (searching$ | async) {
  <z-progress-bar zIndeterminate zShape="square" zSize="sm" zType="accent" class="absolute left-0 top-0 w-full" />
}

@if (!search) {
  <div class="my-2 mx-4 text-base">
    {{ 'PAC.SHARED.Assets.RecentlyViewed' | translate: { Default: 'Recently viewed' } }}
  </div>
}

@if (isEmpty$ | async) {
  <div class="pac-home__assets-empty p-8 flex flex-col justify-start items-center">
    <span class="shopping-cart text-lg font-notoColorEmoji">🛒</span>
    <span>
      {{
        'PAC.SHARED.Assets.NoRelevantDigitalAssets' | translate: { Default: 'No relevant digital assets were found' }
      }}!
    </span>
  </div>
}

@if (searchAssets$ | async; as assets) {
  <ul class="assets-list space-y-1" role="list">
    @for (asset of assets; track asset.id) {
      @if (asset.type === 'story') {
        <li role="listitem" class="cursor-pointer group flex items-start gap-3 rounded-lg px-3 py-2 hover:bg-hover-bg" [routerLink]="['/story', asset.id]">
          <span class="shrink-0 text-lg font-notoColorEmoji">📖</span>
          <div class="min-w-0 flex flex-1 flex-col">
            <div class="text-base text-ellipsis overflow-hidden">{{ asset.name }}</div>
            <div class="flex-1 flex justify-between items-baseline text-xs text-opacity-60 group-hover:text-opacity-80 text-text-tertiary">
              <span class="flex-1 basis-1/2">
                {{ 'PAC.KEY_WORDS.Story' | translate: { Default: 'Story' } }}
              </span>
              <div class="flex-1 basis-0"></div>
            </div>
            @if (asset.description) {
              <div class="description text-sm border-l-2 text-opacity-60 group-hover:text-opacity-80 border-l-divider-regular text-text-tertiary">
                {{ asset.description }}
              </div>
            }
          </div>
        </li>
      }

      @if (asset.type === 'indicator') {
        <li role="listitem" class="flex items-start gap-3 rounded-lg px-3 py-2">
          <span class="shrink-0 text-lg">💹</span>
          <div class="min-w-0 flex flex-1 flex-col">
            <div class="text-base">{{ asset.name }}</div>
            <div class="flex-1 flex justify-between items-baseline text-xs text-opacity-60 text-text-tertiary">
              <div class="mr-2">
                {{ 'PAC.KEY_WORDS.Indicator' | translate: { Default: 'Indicator' } }}
              </div>
              <div class="flex-1 text-ellipsis overflow-hidden text-right">{{ asset.code }}</div>
            </div>
            @if (asset.business) {
              <div class="description text-xs border-l-2 border-l-divider-regular">
                {{ asset.business }}
              </div>
            }
          </div>
        </li>
      }

      @if (asset.type === 'semanticModel') {
        <li role="listitem" class="cursor-pointer group flex items-start gap-3 rounded-lg px-3 py-2 hover:bg-hover-bg" [routerLink]="['/data', 'models', asset.id]">
          <span class="shrink-0 text-lg font-notoColorEmoji">🧊</span>
          <div class="min-w-0 flex flex-1 flex-col">
            <div class="text-base">{{ asset.name }}</div>
            <div class="flex-1 flex justify-between items-baseline text-xs text-opacity-60 group-hover:text-opacity-80 text-text-tertiary">
              <span class="flex-1 basis-1/2">
                {{ 'PAC.KEY_WORDS.SemanticModel' | translate: { Default: 'Semantic Model' } }}
              </span>
              <div class="flex-1 basis-0"></div>
            </div>
            @if (asset.description) {
              <div class="description text-xs border-l-2 border-l-divider-regular">
                {{ asset.description }}
              </div>
            }
          </div>
        </li>
      }
    }
  </ul>
}