<div *ngIf="!community " class="uk-text-muted uk-text-center">
  No community info available
</div>
<div *ngIf="community" class="plugin-suggested-repositories uk-container uk-container-large uk-section">
  <div class="uk-flex uk-flex-middle uk-flex-between uk-margin-large-bottom">
    <h3 class="uk-margin-remove">
      <icon [name]="'database'" [type]="'outlined'" [ratio]="3" class="uk-margin-small-right"></icon>
      {{pluginObject.title}}
    </h3>
    <!--<a *ngIf=" contentProviders && contentProviders.length > 2" [href]="" class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-text-default">
      View all
    </a>-->
  </div>
  <div *ngIf="!contentProviders || contentProviders.length == 0 " class="uk-text-muted uk-text-center">
    No datasources available
  </div>

  <div uk-slider class="uk-slider">
    <ul *ngIf="slides" class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
      <li *ngFor="let slide of [].constructor(slides); let i=index" class="uk-width-1-1 uk-padding">
        <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-1" uk-grid uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
            <div *ngFor="let item of contentProviders.slice((i)*2,(i+1)*2)" uk-scrollspy-class>
              <div class="uk-card uk-card-default uk-card-body uk-card-hover">
                {{item.name}}
                <hr>
                <div class="uk-text-small">
                  {{item.message}}
                </div>

                <div class="uk-flex uk-flex-right uk-margin-small-top">
                  <a [href]="properties.connectPortalUrl + properties.searchLinkToDataProvider + item.openaireId " class="uk-float-right uk-margin-small-left uk-display-inline-block uk-text-uppercase uk-button uk-button-text" target="_blank">
                    <span class="uk-flex uk-flex-middle">
                      <icon [name]="'file_upload'" [type]="'outlined'" class="uk-margin-small-right"></icon>
                      <span>Go to repository</span>
                    </span>
                  </a>
                </div>
              </div>
            </div>

        </div>
      </li>
    </ul>
    <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin-medium-top"></ul>
  </div>
</div>
