<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-between">
    <div class="uk-visible@m uk-width-small">
    </div>
    <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 *ngIf="!isMobile">
      <div [class.uk-disabled]="stakeholders.length === 0" class="uk-flex uk-flex-middle uk-flex-right uk-width-small">
        <button (click)="gridView = true" [class.uk-button-primary]="gridView" [disabled]="stakeholders.length === 0"
                class="uk-icon-button uk-button-default uk-border-rounded uk-icon-button-small">
          <icon name="apps" [flex]="true" type="round" [ratio]="1.2"></icon>
        </button>
        <button (click)="gridView = false" [class.uk-button-primary]="!gridView" [disabled]="stakeholders.length === 0"
                class="uk-icon-button uk-button-default uk-border-rounded uk-icon-button-small uk-margin-small-left">
          <icon name="view_list" [flex]="true" type="round" [ratio]="1.2"></icon>
        </button>
      </div>
    </div>
  </div>
  <div class="uk-flex uk-flex-middle uk-flex-between uk-margin-large-top">
    <div class="uk-flex uk-flex-middle">
      <div *ngIf="sortOptions?.length > 0" 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 -->
    <!-- Grid view -->
    <ng-container *ngIf="gridView || isMobile; else elseBlock">
      <div class="uk-grid" class="uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-1"
        uk-grid uk-height-match="target: .top-info;">
        <div *ngFor="let item of filteredStakeholders.slice((currentPage-1)*pageSize, currentPage*pageSize)">
          <a routerLink="./{{item.alias}}" class="uk-link-reset">
            <div class="uk-card uk-card-default uk-card-hover">
              <div class="uk-padding-small top-info">
                <!-- logo -->
                <!-- remove max-width style, add something custom maybe?  -->
                <div class="uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
                  <img *ngIf="item.logoUrl; else elseBlock" [src]="item | logoUrl" [alt]="item.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 180px;">
                  <ng-template #elseBlock>
                    <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 180px;">
                  </ng-template>
                </div>
                <!-- name -->
                <div class="uk-text-center uk-text-bold uk-margin-top multi-line-ellipsis lines-2">
                  <div [title]="item.name">
                    {{item.name}}
                  </div>
                </div>
                <div *ngIf="item.publications" class="uk-margin-small-top uk-text-xsmall uk-text-center">
                  {{openaireEntities.PUBLICATIONS}}: {{item.publications | number}}
                </div>
              </div>
              <!-- when OA badges are re-introduced, the below if-statement will have to be moved on its correct div -->
              <div *ngIf="item.funderType" class="uk-card-footer uk-padding-small uk-background-muted">
                <div class="uk-grid uk-grid-divider uk-flex-center uk-flex-middle uk-child-width-1-2@m" uk-grid>
                  <div *ngIf="item.funderType">
                    <div class="uk-text-xsmall">
                      Type
                    </div>
                    <div class="uk-text-small uk-text-bold">
                      {{getFunderTypeLabel(item.funderType)}}
                    </div>
                  </div>
                  <!-- Commenting out temporarily the div below - OA badge -->
                  <!-- <div>
                    <div class="uk-text-center uk-text-bold">
                      <span class="uk-text-small">50</span>
                      <span class="uk-text-xsmall">%</span>
                    </div>
                    <progress class="uk-progress open-access uk-margin-xsmall-top uk-margin-xsmall-bottom" [value]="50" max="100"></progress>
                    <div class="uk-flex uk-flex-middle">
                      <icon [name]="'open_access'" [flex]="true" [ratio]="0.8" class="open-access"></icon>
                      <span class="uk-text-xsmall uk-margin-xsmall-left">Open Access</span>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
    </ng-container>
    <!-- List view -->
    <ng-template #elseBlock>
      <div>
        <table class="uk-table uk-table-striped uk-table-middle uk-table-responsive uk-table-hover">
          <thead>
            <tr>
              <th>Logo</th>
              <th>Name</th>
              <th *ngIf="hasPublications"># of Publications</th>
              <th *ngIf="stakeholderType === 'funder'">Type</th>
              <!-- <th class="uk-flex uk-flex-middle">
                <icon [name]="'open_access'" [flex]="true" [ratio]="0.8" class="open-access"></icon>
                <span class="uk-margin-xsmall-left">Open Access %</span>
              </th> -->
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of filteredStakeholders.slice((currentPage-1)*pageSize, currentPage*pageSize)"
              class="clickable" routerLink="./{{item.alias}}">
              <td>
                <!-- remove max-width style, add something custom maybe?  -->
                <div class="uk-flex uk-flex-middle uk-height-xsmall uk-margin-left">
                  <img *ngIf="item.logoUrl; else elseBlock" [src]="item | logoUrl" [alt]="item.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 140px;">
                  <ng-template #elseBlock>
                    <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 140px;">
                  </ng-template>
                </div>
              </td>
              <td>
                <div class="uk-text-truncate uk-text-capitalize uk-text-italic uk-text-small uk-text-bold" [title]="item.name">
                  {{item.name}}
                </div>
              </td>
              <td *ngIf="hasPublications">
                <div class="uk-text-truncate uk-text-capitalize uk-text-italic uk-text-small uk-text-bold" [title]="item.name">
                  {{item.publications | number}}
                </div>
              </td>
              <td *ngIf="stakeholderType === 'funder'">
                <div *ngIf="item.funderType" class="uk-text-small uk-text-bold uk-text-capitalize">
                  {{getFunderTypeLabel(item.funderType)}}
                </div>
              </td>
              <!-- <td>
                <div class="uk-width-xsmall uk-margin-left">
                  <div class="uk-text-center uk-text-bold">
                    <span class="uk-text-small">50</span>
                    <span class="uk-text-xsmall">%</span>
                  </div>
                  <progress class="uk-progress open-access uk-margin-xsmall-top uk-margin-xsmall-bottom" [value]="50" max="100"></progress>
                </div>
              </td> -->
            </tr>
          </tbody>
        </table>
      </div>
    </ng-template>
  </div>
</div>
