<ng-container *transloco="let t">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">
      {{name()}}
    </h5>
    <button type="button" class="btn-close text-reset" [attr.aria-label]="t('common.close')" (click)="close()"></button>
  </div>

  <div class="offcanvas-body">
    <div style="width: 10rem" class="mx-auto mb-3">
      @let cover = coverUrl();
      @if (cover) {
        <app-image height="232.91px" width="160px" [styles]="{'object-fit': 'contain', 'max-height': '232.91px'}" [imageUrl]="cover" />
      }
    </div>

    @let externalSeriesValue = externalSeries();
    @let localSeriesValue = localSeries();

    @if (externalSeriesValue) {
      @if ((externalSeriesValue.volumeCount || 0) > 0 || (externalSeriesValue.chapterCount || 0) > 0) {
        <div class="text-muted muted mb-2">
          {{t('series-preview-drawer.vols-and-chapters', {volCount: externalSeriesValue.volumeCount, chpCount: externalSeriesValue.chapterCount})}}
        </div>
      }

      <div class="text-muted muted mb-2">
        {{t('series-preview-drawer.provided-by-label')}}
        <img class="ms-1" [ngSrc]="externalSeriesValue.provider | providerImage" width="20" height="20" alt="">
      </div>

      @if (externalSeriesValue.summary) {
        <app-read-more [maxLength]="300" [text]="externalSeriesValue.summary" />
      }
    }

      <a class="btn btn-primary col-12 mt-2" [href]="viewSeriesUrl()" target="_blank" rel="noopener noreferrer">
        {{t('series-preview-drawer.view-series')}}
      </a>

    @if (externalSeriesValue) {
      <div class="mt-3">
        <app-metadata-detail [tags]="externalSeriesValue.genres" [libraryId]="0"  [heading]="t('series-preview-drawer.genres-label')">
          <ng-template #itemTemplate let-item>
            <span class="dark-exempt btn-icon not-clickable">{{item}}</span>
          </ng-template>
        </app-metadata-detail>
      </div>

      <div class="mt-3">
        <app-metadata-detail [tags]="externalSeriesValue.tags" [libraryId]="0"  [heading]="t('series-preview-drawer.tags-label')">
          <ng-template #itemTemplate let-item>
            <span class="dark-exempt btn-icon not-clickable">{{item.name}}</span>
          </ng-template>
        </app-metadata-detail>
      </div>

      <div class="mt-3">
        <app-metadata-detail [tags]="externalSeriesValue.staff" [libraryId]="0"  [heading]="t('series-preview-drawer.staff-label')" [includeComma]="false">
          <ng-template #itemTemplate let-item>
            <div class="card mb-3">
              <div class="row g-0">
                <div class="col-md-3">
                  @if (item.imageUrl && !item.imageUrl.endsWith('default.jpg')) {
                    <app-image height="24px" width="24px" [styles]="{'object-fit': 'contain'}" [imageUrl]="item.imageUrl" classes="person-img" />
                  } @else {
                    <i class="fa fa-user-circle align-self-center person-img" style="font-size: 1.75rem;" aria-hidden="true"></i>
                  }
                </div>
                <div class="col-md-9">
                  <div class="card-body">
                    <h6 class="card-title">{{item.name}}</h6>
                    <p class="card-text" style="font-size: 0.875rem"><small class="text-muted">{{item.role}}</small></p>
                  </div>
                </div>
              </div>
            </div>
          </ng-template>
        </app-metadata-detail>
      </div>
    }
    @else if(localSeriesValue) {
      <div class="d-inline-block mb-2 mt-2" style="width: 100%">
        <span class="text-muted muted">{{localSeriesValue.publicationStatus | publicationStatus}}</span>
        <button class="btn btn-secondary btn-sm float-end me-3"
                (click)="toggleWantToRead()"
                ngbTooltip="{{wantToRead() ? t('series-preview-drawer.remove-from-want-to-read') : t('series-preview-drawer.add-to-want-to-read')}}">
          <i class="{{wantToRead() ? 'fa-solid' : 'fa-regular'}} fa-star" aria-hidden="true"></i>
        </button>
      </div>

      <app-read-more [maxLength]="300" [text]="localSeriesValue.summary" />

      <div class="mt-3">
        <app-metadata-detail [tags]="localSeriesValue.genres" [libraryId]="0"  [heading]="t('series-preview-drawer.genres-label')">
          <ng-template #itemTemplate let-item>
            <a class="dark-exempt btn-icon not-clickable">{{item.title}}</a>
          </ng-template>
        </app-metadata-detail>
      </div>

      <div class="mt-3">
        <app-metadata-detail [tags]="localSeriesValue.tags" [libraryId]="0" [heading]="t('series-preview-drawer.tags-label')">
          <ng-template #itemTemplate let-item>
            <span class="dark-exempt btn-icon not-clickable">{{item.title}}</span>
          </ng-template>
        </app-metadata-detail>
      </div>

      <div class="mt-3">
        <app-metadata-detail [tags]="localStaff()" [libraryId]="0" [heading]="t('series-preview-drawer.staff-label')" [includeComma]="false">
          <ng-template #itemTemplate let-item>
            <div class="card mb-3">
              <div class="row g-0">
                <div class="col-md-4">
                  <i class="fa fa-user-circle align-self-center" style="font-size: 1.75rem; margin-top: 1.5rem; margin-left: 1.5rem" aria-hidden="true"></i>
                </div>
                <div class="col-md-8">
                  <div class="card-body">
                    <h6 class="card-title">{{item.name}}</h6>
                    <p class="card-text" style="font-size: 0.875rem"><small class="text-muted">{{item.role}}</small></p>
                  </div>
                </div>
              </div>
            </div>
          </ng-template>
        </app-metadata-detail>
      </div>
    }

    <app-loading [loading]="isLoading()" />
  </div>
</ng-container>
