<ng-container *transloco="let t; prefix: 'dashboard.main'">
  <div class="dashboard-container">
    @if ((bookState$ | async)?.loaded === false) {
      <div class="loading-state">
        <p-progressSpinner
          class="spinner center-spinner"
          [style]="{'width': '60px', 'height': '60px'}"
          strokeWidth="3"
          fill="transparent"
          animationDuration="1.5s">
        </p-progressSpinner>
      </div>
    }
    @if ((bookState$ | async)?.loaded === true) {
      <div class="dashboard">
        <div class="dashboard-inner">
          @if (isLibrariesEmpty$ | async) {
            <div class="dashboard-no-library">
              @if ((userService.userState$ | async)?.user?.permissions; as permissions) {
                <div>
                  @if (permissions.admin || permissions.canManageLibrary) {
                    <div>
                      <h1 class="no-library-header">
                        {{ t('welcomeTitle') }}<br>
                        {{ t('welcomeSubtitle') }}
                      </h1>
                      <p class="welcome-description">
                        {{ t('welcomeDescription') }}
                      </p>
                      <p-button
                        [label]="t('createLibrary')"
                        icon="pi pi-plus"
                        class="p-button-rounded p-button-outlined"
                        (click)="createNewLibrary()">
                      </p-button>
                    </div>
                  }
                </div>
              }
            </div>
          } @else {
            <div class="dashboard-settings-button">
              <p-button
                icon="pi pi-cog"
                severity="info"
                rounded
                text
                [pTooltip]="t('customizeDashboard')"
                tooltipPosition="left"
                (click)="openDashboardSettings()">
              </p-button>
            </div>

            @if (dashboardConfig$ | async; as config) {
              @for (scroller of config.scrollers; track scroller.id) {
                @if (scroller.enabled) {
                  <app-dashboard-scroller
                    [bookListType]="scroller.type"
                    [title]="scroller.title"
                    [isMagicShelf]="scroller.type === ScrollerType.MAGIC_SHELF"
                    [useSquareCovers]="scroller.type === ScrollerType.LAST_LISTENED"
                    [books]="getBooksForScroller(scroller) | async">
                  </app-dashboard-scroller>
                }
              }
            }
          }
        </div>
      </div>
    }
  </div>
</ng-container>
