<div class="uk-flex uk-flex-center">
  <div search-input [(value)]="keyword" [placeholder]="'Search for author or ORCID...'" [disabled]="orcidStatus ==errorCodes.LOADING"
    [searchInputClass]="'flat'" [iconPosition]="'left'" (searchEmitter)="searchByKeyword()" (valueChange)="checkForReset()"  class="uk-width-xlarge@l uk-width-large@m uk-width-1-1"></div>
</div>

<div class="uk-margin-large-top">
  <div *ngIf="orcidStatus == errorCodes.ERROR" class="uk-flex uk-flex-center">
    <div class="uk-alert uk-alert-warning uk-text-center uk-width-2-3@m uk-width-1-1" role="alert">
      An error occured
    </div>
  </div>
  <div *ngIf="orcidStatus == errorCodes.NOT_AVAILABLE" class="uk-flex uk-flex-center">
    <div class="uk-alert uk-alert-danger uk-text-center uk-width-2-3@m uk-width-1-1" role="alert">
      Service not available
    </div>
  </div>
  <div *ngIf="orcidStatus == errorCodes.NONE" class="uk-flex uk-flex-center">
    <div class="uk-alert uk-alert-primary uk-text-center uk-width-2-3@m uk-width-1-1">
      No results found
    </div>
  </div>
  <div *ngIf="!(orcidStatus == errorCodes.NONE ||
  orcidStatus == errorCodes.ERROR || orcidStatus == errorCodes.NOT_AVAILABLE)">
    <!--  Debug info -->
    <!--<div>
    Orcid found:{{authors.length}} <br>
    check for results: {{authorsRendered}} <br>
    Authors found (with OpenAIRE results):{{authorsToShow.length}} <br>
    page: {{page}}<br>
    </div>-->
    <div class="uk-grid uk-grid-small uk-child-width-1-3@l uk-child-width-1-2@m" uk-grid>
      <div *ngFor=" let author of authorsToShow.slice(0,page*size>authorsToShow.length?authorsToShow.length:page*size)">
        <div *ngIf="author.resultsCount > 0" class="uk-card uk-card-default uk-card-hover uk-padding-small clickable" 
          [routerLink]="'./'+author.id+''">
          <div class="uk-margin-bottom uk-grid uk-flex-middle" uk-grid>
            <div>
              <div class="uk-border uk-border-circle uk-text-meta uk-padding-xsmall uk-margin-small-right">
                <icon [name]="'person'" [ratio]="2" [flex]="true"></icon>
              </div>
            </div>
            <div class="uk-padding-remove-left uk-width-expand">
                <div class="uk-h6 uk-margin-xsmall-bottom uk-text-truncate">{{author.authorGivenName}} {{author.authorFamilyName}}</div>
                <div class="uk-text-primary uk-text-xsmall uk-text-bold">
<!--                  <div *ngIf="author.resultsCount && author.resultsCount > 0">{{author.resultsCount}} {{openaireEntities.RESULTS}}</div></div>-->
                  <div class="uk-text-truncate" *ngIf="author.institutions">{{author.institutions.join(", ")}}</div>
                </div>
            </div>
          </div>
          <div class="uk-margin-top uk-text-small uk-text-italic">
              <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid"
                  loading="lazy" style="width:16px; height:16px; margin-right: 3px;">
              <a [href]="properties.orcidURL + author.id" target="_blank" class="uk-link-text">

              {{properties.orcidURL + author.id}}</a></div>
              <!-- <div>Research outcomes:{{author.resultsCount}}</div>-->
        </div>
      </div>
    </div>
    <div *ngIf="orcidStatus == errorCodes.LOADING" class="uk-height-medium uk-position-relative" role="alert">
        <loading class="uk-position-center"></loading>
    </div>
    <div class="uk-flex uk-flex-center uk-margin-medium-top">
        <button *ngIf="authorsToShow.length >  0 && orcidStatus != errorCodes.LOADING && (authorsToShow.length > page*size || authors.length > authorsRendered)" class="uk-button uk-button-default" [class.uk-disabled]="orcidStatus == errorCodes.LOADING" (click)="loadMore()" >Load more</button>
    </div>
  </div>
</div>
