<div *ngIf="pluginObject" #parent class="heroBackground generalSearchForm  " [class.uk-light]="!this.fontsDarkMode"
     [style]="style">
  <div class="uk-section uk-container  ">
    <div class="uk-width-1-1 uk-margin-medium-bottom">
      <h2 class="uk-margin-remove-top uk-text-center ">
       {{pluginObject.title}}<span class="uk-text-primary">.</span>
      </h2>
    </div>
    <slider-container  [total]="activeCards.length" [navigation]="'progress'" [period]="6000" [infinite]="true" [parent]="parent">
<ng-container *ngIf="activeCards.length > 0">
      <slider-column type="nav" class="slider-nav" style="min-height: 300px">
        <ng-container *ngFor="let card of activeCards; let i = index">
            <slider-nav-item [start]="i">
              <div class="uk-text-primary">{{card.tag}}</div>
              <div class="uk-margin-remove uk-text-large uk-text-bold">
                {{card.title}}
              </div>
              <div class="uk-text-small">{{card.description}}</div>
              <a *ngFor="let url of card.urlsArray" [route]="url.url" class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-text-default" [target]="url.target"
                 [class.uk-hidden]="!(url.url && url.url.length > 0)">
                {{url.linkText}}
              </a>
            </slider-nav-item>
        </ng-container>
      </slider-column>
      <slider-column type="slider">
        <slider-item type="static">
          <img class="uk-position-center uk-position-z-index" [src]="'https://' + (properties.environment == 'production'?'':'beta.')
          + 'connect.openaire.eu/assets/connect-assets/home/tablet.png'"
               alt="ipad" loading="lazy">
        </slider-item>
        <ng-container *ngFor="let card of activeCards; let i = index">
            <slider-item type="slide" [start]="i">
              <img [src]="card.image" [alt]="card.tag" loading="lazy">
            </slider-item>
        </ng-container>
      </slider-column>
</ng-container>
    </slider-container>
  </div>
</div>
