@if (showSplash()) {
  <pos-splash (onComplete)="onSplashCompleted()" />
} @else {
  @defer (when !showSplash()) {
    <div
      class="h-full relative"
      (touchstart)="onTouchStart($event)"
      (touchmove)="onTouchMove($event)"
      (touchend)="onTouchEnd()"
    >
      @if (pullDistance() >= 0) {
        <div
          class="w-full flex justify-center items-center py-2 min-h-10 text-xs text-surface-500 overflow-hidden fixed top-0 inset-x-0 z-1000 translate-y-[-20px]"
          [ngStyle]="{ height: pullDistance() + 'px' }"
        >
          <div
            class="inline-flex p-3 rounded-full opacity-0 transition-opacity shadow-xl bg-surface-card"
            [ngStyle]="{ opacity: pullDistance() / 100 }"
          >
            <i
              class="pi pi-refresh text-[1.25rem] text-primary"
              [ngStyle]="{ fontSize: `${1.25 + pullDistance() * 0.007}rem`, rotate: pullDistance() * 2 + 'deg' }"
            ></i>
          </div>
          <!-- [ngStyle]="{ transform: 'scale(1.' + pullDistance() * 10 + ')' }" -->
        </div>
      }
      {{ isAuth() }}
      @if (isAuth()) {
        @defer (when isAuth()) {
          <router-outlet></router-outlet>
        }
      } @else {
        @defer (when !isAuth()) {
          <pos-pages-layout />
        }
      }
    </div>
  }
}