<div class="uk-child-width-expand@s uk-text-center uk-margin-bottom" uk-grid>
  <div>
    <form class="uk-text-center uk-animation uk-card uk-card-default uk-padding">
      <div>
        <input type="text" class="uk-input  uk-width-1-2" placeholder="Search community content providers..."
               aria-describedby="sizing-addon2" [(ngModel)]="communitySearchUtils.keyword" name="keyword">
        <button (click)="goTo(1)" type="submit" class=" uk-button">
             <span class="uk-icon">
             <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle
               fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000"
                                                                                               stroke-width="1.1"
                                                                                               d="M14,14 L18,18 L14,14 Z"></path></svg>
             </span>Search
        </button>
      </div>
    </form>
  </div>
</div>
<div class="uk-alert uk-alert-primary uk-margin-top-large">
  <div><span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
    All the research results collected from the content providers specified here will be automatically linked to your
    community dashboard.
  </div>

</div>
<errorMessages [status]="[communitySearchUtils.status]" [type]="'community Content Providers'"></errorMessages>

<div *ngIf="communitySearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">
  <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
      <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
        {{communitySearchUtils.totalResults | number}} content providers, page {{communitySearchUtils.page | number}}
        of {{(totalPages()) | number}}
      </span>
    <span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">
        <paging-no-load [currentPage]="communitySearchUtils.page" [totalResults]="communitySearchUtils.totalResults"
                        [size]="10" (pageChange)="goTo($event.value, false)"></paging-no-load>
      </span>
  </div>
</div>

<!-- uk-first-column uk-width-expand -->
<div class="custom-dataTable-content">
  <div class="uk-overflow-container">
    <table datatable class="uk-table uk-table-striped divider-table" [dtOptions]="dtOptions" id="dpTable"
           [dtTrigger]="dtTrigger" dtInstance="dtInstanceCallback">
      <thead>
      <tr>
        <th class="uk-text-center">Name</th>
        <th class="uk-text-center">Official Name</th>
        <th class="uk-text-center" *ngIf="properties.environment !== 'production'">Criteria</th>
        <th class="uk-text-center">Action</th>
      </tr>
      </thead>
      <tbody>
      <tr class="uk-table-middle" *ngFor="let result of communityContentProviders">
        <td class="uk-text-center uk-width-1-4">
          <a class="custom-external" target="_blank"
             [href]="communityUrl+'/search/dataprovider?datasourceId=' +result.openaireId">
            <span *ngIf="result.name">{{result.name}}</span>
            <span *ngIf="!result.name">[no name available]</span>
          </a>
        </td>
        <td class="uk-text-center uk-width-1-4">
          <span *ngIf="result.officialname">{{result.officialname}}</span>
          <span *ngIf="!result.officialname">-</span>
        </td>
        <td class="uk-text-center uk-width-1-4" *ngIf="properties.environment !== 'production'">
          <input title="Edit" src="assets/imgs/icn_edit.png"
                 (click)="goToCriteria(result.openaireId)"
                 class="edit uk-margin-small-right" type="image">
          <span (click)="goToCriteria(result.openaireId)"
                class="clickable">{{getCriteriaLabel(result.selectioncriteria)}}</span>
        </td>
        <td class="uk-text-center uk-width-1-4">
          <!--              red_background_color red_color-->
          <a (click)="removeContentProvider(result)" class="uk-icon-button remove uk-button-danger"
             uk-icon="icon: close; ratio: 1" title="Remove"></a>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

<div *ngIf="communitySearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">
  <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">
      <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">
        {{communitySearchUtils.totalResults | number}} content providers, page {{communitySearchUtils.page | number}}
        of {{(totalPages()) | number}}
      </span>
    <span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">
        <paging-no-load [currentPage]="communitySearchUtils.page" [totalResults]="communitySearchUtils.totalResults"
                        [size]="10" (pageChange)="goTo($event.value, false)"></paging-no-load>
      </span>
  </div>
</div>

<modal-alert #AlertModalDeleteCommunity (alertOutput)="confirmedDeleteContentProvider($event)"></modal-alert>
