<div class="container">
    <div class="collection-page"
         *ngVar="(collectionRD$ | async) as collectionRD">
        <div *ngIf="collectionRD?.hasSucceeded" @fadeInOut>
            <div *ngIf="collectionRD?.payload as collection">
                <ds-view-tracker [object]="collection"></ds-view-tracker>
                <header class="comcol-header border-bottom mb-4 pb-4">
                  <!-- Collection Name -->
                <ds-comcol-page-header
                        [name]="collection.name">
                </ds-comcol-page-header>
                    <!-- Collection logo -->
                    <ds-comcol-page-logo *ngIf="logoRD$"
                                     [logo]="(logoRD$ | async)?.payload"
                                     [alternateText]="'Collection Logo'"
                        [alternateText]="'Collection Logo'">
                    </ds-comcol-page-logo>

                 <!-- Handle -->
                <ds-comcol-page-handle
                        [content]="collection.handle"
                        [title]="'collection.page.handle'" >
                </ds-comcol-page-handle>
                <!-- Introductory text -->
                <ds-comcol-page-content
                        [content]="collection.introductoryText"
                        [hasInnerHtml]="true">
                </ds-comcol-page-content>
                <!-- News -->
                <ds-comcol-page-content
                        [content]="collection.sidebarText"
                        [hasInnerHtml]="true"
                        [title]="'collection.page.news'">
                </ds-comcol-page-content>

              </header>
              <section class="comcol-page-browse-section">
              <!-- Browse-By Links -->
              <ds-comcol-page-browse-by
                      [id]="collection.id"
                      [contentType]="collection.type">
              </ds-comcol-page-browse-by>

            <ng-container *ngVar="(itemRD$ | async) as itemRD">
                <div class="mt-4" *ngIf="itemRD?.hasSucceeded" @fadeIn>
                    <h3 class="sr-only">{{'collection.page.browse.recent.head' | translate}}</h3>
                    <ds-viewable-collection
                            [config]="paginationConfig"
                            [sortConfig]="sortConfig"
                            [objects]="itemRD"
                            [hideGear]="true"
                            (paginationChange)="onPaginationChange($event)">
                    </ds-viewable-collection>
                </div>
                <ds-error *ngIf="itemRD?.hasFailed"
                          message="{{'error.recent-submissions' | translate}}"></ds-error>
                <ds-loading *ngIf="!itemRD || itemRD.isLoading"
                            message="{{'loading.recent-submissions' | translate}}"></ds-loading>
                <div *ngIf="!itemRD?.isLoading && itemRD?.payload?.page.length === 0" class="alert alert-info w-100" role="alert">
                        {{'collection.page.browse.recent.empty' | translate}}
                </div>
            </ng-container>
            </section>
            <footer *ngIf="collection.copyrightText" class="border-top my-5 pt-4">
          <!-- Copyright -->
          <ds-comcol-page-content
                      [content]="collection.copyrightText"
                      [hasInnerHtml]="true">
          </ds-comcol-page-content>
        </footer>
      </div>
    </div>
        <ds-error *ngIf="collectionRD?.hasFailed"
            message="{{'error.collection' | translate}}"></ds-error>
        <ds-loading *ngIf="collectionRD?.isLoading"
            message="{{'loading.collection' | translate}}"></ds-loading>
  </div>
</div>
