<div class="container">
  <div *ngVar="(parent$ | async) as parent">
    <div *ngIf="parent?.payload as parentContext">
      <header>
        <!-- Parent Name -->
        <ds-comcol-page-header [name]="parentContext.name">
        </ds-comcol-page-header>
        <!-- Introductory text -->
        <ds-comcol-page-content [content]="parentContext.introductoryText" [hasInnerHtml]="true">
        </ds-comcol-page-content>
        <!-- News -->
        <ds-comcol-page-content [content]="parentContext.sidebarText" [hasInnerHtml]="true" [title]="'community.page.news'">
        </ds-comcol-page-content>
        <!-- Handle -->
        <ds-comcol-page-handle
            [content]="parentContext.handle"
            [title]="parentContext.type+'.page.handle'" >
        </ds-comcol-page-handle>
        <!-- Browse-By Links -->
        <ds-comcol-page-browse-by [id]="parentContext.id" [contentType]="parentContext.type"></ds-comcol-page-browse-by>
      </header>
    </div>
  </div>
  <div class="browse-by-metadata w-100">
    <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
      title="{{'browse.title' | translate:{collection: (parent$ | async)?.payload?.name || '', field: 'browse.metadata.' + browseId | translate, value: (value)? '&quot;' + value + '&quot;': ''} }}"
      [objects$]="(items$ !== undefined)? items$ : browseEntries$"
      [paginationConfig]="paginationConfig"
      [sortConfig]="sortConfig"
      [type]="startsWithType"
      [startsWithOptions]="startsWithOptions"
      [enableArrows]="true"
      (prev)="goPrev()"
      (next)="goNext()"
      (pageSizeChange)="pageSizeChange($event)"
      (sortDirectionChange)="sortDirectionChange($event)">
    </ds-browse-by>
    <ds-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-loading>
  </div>
</div>