<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
<ng-container *ngIf="longView else shortView">
  <div style=" min-height: 650px;"
       class="uk-section uk-padding-remove-top">
    <div class="uk-align-center">
      <breadcrumbs addClass="uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top"
                   [breadcrumbs]="breadcrumbs"></breadcrumbs>
      <div class="uk-container">
        <div *ngIf="showLoading" class="uk-margin-large">
          <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span
              class="loading-gif  uk-align-center"></span></div>
        </div>
        <div *ngIf="!showLoading">
          <h4 class="uk-margin-medium-top">
            <span class="">Curators</span>
          </h4>
          <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
                  [texts]="pageContents['top']"></helper>
          <div *ngIf="curators">
            <div *ngFor="let curator of curators let i=index;"
               class="white-box-with-border uk-margin-top uk-margin-remove-left uk-animation-fade" uk-grid>
            <div class="uk-width-expand uk-padding uk-first-column">
              <div class="uk-flex uk-flex-middle">
                <div>
                  <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
                       src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
                  <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
                       src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
                </div>
                <div class="uk-width-expand uk-text-large uk-margin-left uk-text-bold">
                  {{curator.name}}
                </div>
              </div>
              <div *ngIf="curator.bio" class="uk-margin-medium-top uk-height-max-large uk-overflow-auto">
                <div class="uk-text-muted">
                  Biography
                </div>
                <div *ngIf="showMore[i]"> {{curator.bio}}}</div>
                <div *ngIf="!showMore[i]">{{_format(curator.bio)}}</div>
                <div class="uk-margin-top uk-text-right">
                  <a *ngIf="curator.bio.length > maxCharacters && !showMore[i]" class="uk-text-bold"
                     (click)="toggle(i)">
                    Show more
                  </a>
                  <a *ngIf="curator.bio.length > maxCharacters && showMore[i]" class="uk-text-bold"
                     (click)="toggle(i)">
                    Show less
                  </a>
                </div>
              </div>
            </div>
            <div *ngIf="curator.affiliations && curator.affiliations.length > 0" class="uk-width-1-3@m uk-width-1-2@s uk-width-1-1 uk-padding">
                <div class="uk-child-width-1-2 uk-flex uk-flex-middle" uk-grid>
                  <div class="uk-text-muted uk-width-1-1">
                    Affiliations
                  </div>
                  <div *ngFor="let affiliation of curator.affiliations">
                    <span *ngIf="!affiliation.website_url">
                      <img [src]="affiliation.logo_url | urlPrefix" [alt]="affiliation.name">
                    </span>
                    <a *ngIf="affiliation.website_url"
                       target="_blank" [href]="affiliation.website_url | urlPrefix">
                      <img [src]="affiliation.logo_url | urlPrefix" [alt]="affiliation.name">
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
                [texts]="pageContents['bottom']"></helper>
      </div>
    </div>
  </div>
</ng-container>
<ng-template #shortView>
  <div *ngIf=" curators && curators.length > 0" class="uk-grid">
    <span class="lowOpacityColor uk-text-muted uk-width-auto">
      Curated by:
    </span>
    <div class="uk-width-expand uk-padding-remove uk-overflow-auto">
      <div class="uk-height-max-medium">
      <span *ngFor="let curator of curators.slice(0,numberOfCurators) let i=index;" class="space uk-display-inline-block">
        <a class="">
          <span class="user-circle-background">
            <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
              <path
                  d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path>
              <path d="M0 0h24v24H0z" fill="none"></path>
            </svg>
          </span>
          <span class="space">{{curator.name}}</span>
        </a>
        <span class="default-dropdown uk-margin-remove-top uk-padding-medium uk-width-medium"
              uk-dropdown="pos: bottom-left; mode:click; ">
          <span class="uk-grid uk-grid-stack">
            <span class="uk-first-column uk-flex uk-flex-middle uk-grid">
              <span>
                <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
                     src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
                <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
                     src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
              </span>
              <h6 class="uk-width-expand ignoreCommunityPanelBackground">
                {{curator.name}}
              </h6>
            </span>
            <span *ngIf="curator.affiliations.length > 0" class="uk-width-1-1">
              <hr class="uk-margin-top">
              <span class="uk-text-left  uk-margin">
                Affiliations
              </span>
              <span> ({{curator.affiliations.length}})</span>
              <span class="uk-width-1-1">
                <affiliations [affiliations]="curator.affiliations"
                              [affiliationsInSlider]="2"
                              [arrows]="false"
                              [sliderOptions]="'autoplay: true; autoplay-interval: 2000'"></affiliations>
              </span>
            </span>
            <span class="uk-width-1-1">
              <a routerLink="/curators" class="uk-align-right uk-link ignoreCommunityPanelBackground">
                View more details
              </a>
            </span>
          </span>
        </span>
        <span *ngIf="i < curators.length-1 && i < numberOfCurators-1">, </span>
      </span>
      <span *ngIf="numberOfCurators == curatorsLimit && curators.length > curatorsLimit">	... </span>
      </div>
    </div>
    <div *ngIf="numberOfCurators == curatorsLimit && curators.length > curatorsLimit" class="uk-width-1-1 uk-text-right uk-margin-small-top">
      <a (click)="numberOfCurators = curators.length;">
        View all {{curators.length | number}} curators
      </a>
    </div>
    <div *ngIf="numberOfCurators > curatorsLimit" class="uk-width-1-1 uk-text-right uk-margin-small-top">
      <a (click)="numberOfCurators = curatorsLimit;">View less curators</a>
    </div>
  </div>
</ng-template>
