D-Net

  <!--  <div class="image-front-topbar  uk-section-default uk-position-relative"-->

  <!--       uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"-->

  <!--       tm-header-transparent="light">-->

  <!--    uk-flex uk-flex-middle-->

  <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>

        <!--            && curators.length > 0-->

        <div *ngIf="!showLoading">

          <div class="uk-margin-medium-top uk-h2">

            <span class="">Curators</span>

            <!--                <span> ({{curators.length}})</span>-->

          </div>

          <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 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 *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 *ngFor="let affiliation of curator.affiliations">

                    <span *ngIf="!affiliation.website_url">

                      <img [src]="affiliation.logo_url" [alt]="affiliation.name">

                    </span>

                    <a *ngIf="affiliation.website_url"

                       target="_blank" [href]="urlPrefix(affiliation.website_url) + affiliation.website_url">

                      <img [src]="affiliation.logo_url" [alt]="affiliation.name">

        <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"

                [texts]="pageContents['bottom']"></helper>

  <!--  </div>-->

  <div *ngIf=" curators && curators.length > 0" class="uk-grid">

    <span class="lowOpacityColor uk-text-muted uk-width-auto">

      Curated by:

    <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">

<!--      <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>-->

        <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>

              </span>

              <span class="uk-width-expand uk-h5 ignoreCommunityPanelBackground">

              </span>

            </span>

            <span *ngIf="curator.affiliations.length > 0" class="uk-width-1-1">

              <span class="uk-width-1-1">

              </span>

            </span>

            <span class="uk-width-1-1">

            </span>

          </span>

        </span>

        <span *ngIf="i < curators.length-1 && i < numberOfCurators-1">, </span>

      </span>

      <span *ngIf="numberOfCurators == curatorsLimit && curators.length > curatorsLimit">	... </span>

    <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>