<ng-container *ngIf="showLoading">
  <div class="uk-container uk-container-large uk-section">
    <loading></loading>
  </div>
</ng-container>
<div *ngIf="!showLoading" class="uk-container uk-container-large">
  <div class="uk-flex uk-flex-middle uk-flex-center">
    <div search-input *ngIf="keywordControl" [searchControl]="keywordControl" [searchInputClass]="'flat'" [iconPosition]="'left'"
      placeholder="Search for {{typeAsLabel}} {{entities.stakeholders}}" [disabled]="stakeholders.length === 0" class="uk-width-xlarge@l uk-width-large@m uk-width-1-1">
    </div>
  </div>
  <div class="uk-flex uk-flex-middle uk-flex-between uk-margin-large-top">
    <div class="uk-flex uk-flex-middle">
      <div class="uk-width-small uk-margin-medium-right">
        <div input
          type="select" placeholder="Sort by" inputClass="border-bottom"
          [options]="sortOptions" [(value)]="sortBy" (valueChange)="sortByChanged()">
        </div>
      </div>
      <div class="uk-width-xsmall">
        <div input
          type="select" placeholder="Results per page" inputClass="border-bottom"
          [options]="pageOptions" [(value)]="pageSize" (valueChange)="sizeChanged($event)">
        </div>
      </div>
    </div>
    <div>
      <paging-no-load *ngIf="filteredStakeholders.length > pageSize"
        (pageChange)="updateCurrentPage($event)"
        [currentPage]="currentPage" [size]="pageSize"
        [totalResults]="filteredStakeholders.length">
      </paging-no-load>
    </div>
  </div>
  <div class="uk-margin-large-top" id="target">
    <div *ngIf="!filteredStakeholders || filteredStakeholders?.length == 0" 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 {{entities.stakeholders}} available
      </div>
    </div>
    <!-- STAKEHOLDERS -->
    <div class="uk-grid uk-grid-small uk-child-width-1-2@m uk-child-width-1-1" uk-grid uk-height-match="target: .uk-card;">
      <div *ngFor="let item of filteredStakeholders.slice((currentPage-1)*pageSize, currentPage*pageSize)">
        <div class="uk-card uk-card-default uk-card-hover uk-padding-small clickable"
          routerLink="./{{item.alias}}">
          <div class="multi-line-ellipsis lines-2">
            <h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
              <a class="uk-link uk-text-decoration-none uk-width-expand">
                {{item.name}}
              </a>
            </h2>
          </div>
          <ng-container *ngIf="item.details">
            <div class="uk-text-xsmall uk-margin-xsmall-top uk-margin-small-bottom">
              <entity-metadata [entityType]="item.details.type"
                            [compatibilityString]="item.details.compatibility" 
                            [organizations]="item.details.organizations">
              </entity-metadata>
            </div>
            <div class="uk-text-small">
              <!-- Website URL -->
              <div *ngIf="item.details.websiteURL && item.details.websiteURL != ''" class="uk-margin-xsmall-bottom">
                <span>Website URL: </span>
                <span>
                  <a href="{{item.details.websiteURL}}" target="_blank" class="custom-external">
                    {{item.details.websiteURL}}
                  </a>
                </span>
              </div>
              <!-- OAI-PMH URL-->
              <div *ngIf="item.details.OAIPMHURL && item.details.OAIPMHURL != ''" class="uk-margin-xsmall-bottom">
                <span>OAI-PMH URL: </span>
                <span>
                  <a href="{{item.details.OAIPMHURL}}" target="_blank" class="custom-external">
                    {{item.details.OAIPMHURL}}
                  </a>
                </span>
              </div>
            </div>
          </ng-container>
        </div>
      </div>
    </div>
  </div>
</div>
