<ng-container [ngSwitch]="name$ | async">
  <app-app-title *ngSwitchCase="'category'" [useRouterQuery]="true">
    <ng-container>{{ title }}</ng-container>
  </app-app-title>
  <app-app-title *ngSwitchCase="'ranking'" [sortHidden]="true" [top]="(result$ | async)?.length">
    <ng-container><span i18n>Rankings</span></ng-container>
  </app-app-title>
  <app-app-title *ngSwitchCase="'keyword'" [useRouterQuery]="true">
    <ng-container *ngIf="title.trim()!==''">
      <ng-container i18n>Search results for <span class="keyword" [title]='title'>{{ title }}</span></ng-container>
    </ng-container>
  </app-app-title>
  <app-app-title *ngSwitchCase="'author'" [useRouterQuery]="true">

    <ng-container *ngIf="(auther | deepinid | async)?.nickname as name" i18n>Apps developed by {{ name }}</ng-container>
  </app-app-title>
  <app-app-title *ngSwitchCase="'packager'" [useRouterQuery]="true">
    <ng-container *ngIf="title as name" i18n>Apps packaged by {{ name }}</ng-container>
  </app-app-title>
</ng-container>
<ng-container *ngIf="result$ | async as result; else loadRef">
  <dstore-list-icon *ngIf="result.length > 0; else emptyRef" [list]="result" [lazyload]="true" (load)="load()" [slogan]="slogan"></dstore-list-icon>
</ng-container>
<ng-template #loadRef>
  <div class="loading-container">
    <app-wait></app-wait>
  </div>
</ng-template>

<ng-template #emptyRef>
  <div class="searchEmpty" *ngIf="(name$ | async) === 'keyword'">
    <img class="tips_bg" /> <span i18n>Sorry</span>
    <div class="gray-text" i18n>No search results</div>

    <!-- <div class="gray-text">
      <ng-container i18n>Welcome to <a class="recommend" (click)="recommend()">recommend</a> this application</
          ng-container>
    </div> -->
  </div>
</ng-template>