<div class="container" *ngVar="(communityRD$ | async) as communityRD">
  <div class="community-page" *ngIf="communityRD?.hasSucceeded" @fadeInOut>
    <div *ngIf="communityRD?.payload; let communityPayload">
      <ds-view-tracker [object]="communityPayload"></ds-view-tracker>
      <header class="comcol-header border-bottom mb-4 pb-4">
        <!-- Community name -->
        <ds-comcol-page-header [name]="communityPayload.name"></ds-comcol-page-header>
        <!-- Community logo -->
        <ds-comcol-page-logo *ngIf="logoRD$" [logo]="(logoRD$ | async)?.payload" [alternateText]="'Community Logo'">
        </ds-comcol-page-logo>
        <!-- Handle -->
        <ds-comcol-page-handle [content]="communityPayload.handle" [title]="'community.page.handle'">
        </ds-comcol-page-handle>
        <!-- Introductory text -->
        <ds-comcol-page-content [content]="communityPayload.introductoryText" [hasInnerHtml]="true">
        </ds-comcol-page-content>
        <!-- News -->
        <ds-comcol-page-content [content]="communityPayload.sidebarText" [hasInnerHtml]="true"
          [title]="'community.page.news'">
        </ds-comcol-page-content>

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

        <ds-community-page-sub-community-list [community]="communityPayload"></ds-community-page-sub-community-list>
        <ds-community-page-sub-collection-list [community]="communityPayload"></ds-community-page-sub-collection-list>
      </section>
      <footer  *ngIf="communityPayload.copyrightText"  class="border-top my-5 pt-4">
        <!-- Copyright -->
        <ds-comcol-page-content [content]="communityPayload.copyrightText" [hasInnerHtml]="true">
        </ds-comcol-page-content>
      </footer>
    </div>
  </div>

  <ds-error *ngIf="communityRD?.hasFailed" message="{{'error.community' | translate}}"></ds-error>
  <ds-loading *ngIf="communityRD?.isLoading" message="{{'loading.community' | translate}}"></ds-loading>
</div>
