D-Net

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

        This functionality is not yet fully integrated, stay tuned!

      </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">Action</th>

          </tr>

        </thead>

        <tbody>

          <tr class="uk-table-middle" *ngFor="let result of communityContentProviders">

            <td class="uk-text-center uk-width-1-3">

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

              <span *ngIf="result.officialname">{{result.officialname}}</span>

              <span *ngIf="!result.officialname">-</span>

            </td>

            <td class="uk-text-center uk-width-1-3">

              <a (click)="removeContentProvider(result)" class="uk-icon-button remove red_background_color red_color" 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>