<div class="uk-background-norepeat uk-background-bottom-center uk-padding-remove-bottom" [ngClass]="searchForm.class">
    <div class="uk-width-1-1">
      <div *ngIf="breadcrumbs.length > 0" class="uk-container uk-container-large" [class.uk-light]="searchForm.dark">
        <div class="uk-padding-small uk-padding-remove-horizontal uk-padding-remove-bottom">
          <breadcrumbs  [breadcrumbs]="breadcrumbs"></breadcrumbs>
        </div>
      </div>
      <div class="uk-position-relative">
        <div class="uk-container uk-container-large uk-section uk-section-small uk-margin-bottom" id="searchForm">
          <div class="uk-grid uk-flex uk-flex-middle uk-flex-center" uk-grid>
            <div class="uk-width-1-1 uk-width-auto@m"><div id="searchImage"></div></div>
            <advanced-search-form class="uk-width-expand uk-padding-remove-vertical"
              [entityType]="activeEntity"
              [advancedSearchLink]="advancedSearchLink" [advancedSearchLinkParameters]="parameters"
              (queryChange)="keywordChanged($event)"
              [isDisabled]="disableForms"
              [simpleView]="true" [formPlaceholderText]="formPlaceholderText"
              [selectedFields]="selectedFields" [showSwitchSearchLink]="true" [dark]="searchForm.dark"
              [fieldIdsMap]="fieldIdsMap" [fieldIds]="fieldIds" [entitiesSelection]="false" [customFilter]="customFilter"
            >
            </advanced-search-form>
          </div>

      </div>
    </div>
  </div>
</div>
<schema2jsonld *ngIf="name && logoURL" [URL]="properties.domain+ properties.baseLink +'/search/find'"
							[logoURL]="properties.domain + properties.baseLink+logoURL" type="search" [name]=name
							description="Search for {{openaireEntities.RESULTS}} ({{openaireEntities.PUBLICATIONS}}, {{openaireEntities.DATASETS}}, {{openaireEntities.SOFTWARE}}, {{openaireEntities.OTHER}}), {{openaireEntities.PROJECTS}}, {{openaireEntities.ORGANIZATIONS}}, {{openaireEntities.DATASOURCES}} in the OpenAIRE Graph.  "></schema2jsonld>
<div class="uk-container uk-container-large uk-margin-top uk-margin-bottom">
	<div class="uk-background-default uk-padding-small uk-padding-remove-horizontal uk-padding-remove-bottom" uk-sticky="media: @m" [attr.offset]="offset">
		<slider-tabs type="dynamic" [flexPosition]="'center'" (activeEmitter)="entityChanged($event)">
			<slider-tab *ngIf="showPublications || showDatasets || showOrps || showSoftware"
						tabId="result" [tabTemplate]="result" [active]="activeEntity == 'result'">
				<ng-template #result>
					<span class="uk-text-uppercase">
						{{resultsName}}
						<span *ngIf=" fetchPublications.searchUtils.totalResults!=null" class="uk-visible@m"
                          [innerHTML]="'('+(fetchPublications.searchUtils.totalResults | numberRound)+')'"></span>
          </span>
				</ng-template>
			</slider-tab>
			<slider-tab *ngIf="showProjects" tabId="projects" [tabTemplate]="projects" [active]="activeEntity == 'projects'">
				<ng-template #projects>
					<span class="uk-text-uppercase">
						{{projectName}}
						<span *ngIf="fetchProjects.searchUtils.totalResults!=null" class="uk-visible@m"
                  [innerHTML]="'('+(fetchProjects.searchUtils.totalResults | numberRound)+')'"></span>
					</span>
				</ng-template>
			</slider-tab>
			<slider-tab *ngIf="showDataProviders" tabId="datasources" [tabTemplate]="datasources" [active]="activeEntity == 'datasources'">
				<ng-template #datasources>
					<span class="uk-text-uppercase">
						{{dataSourcesName}}
						<span *ngIf="fetchDataproviders.searchUtils.totalResults!=null" class="uk-visible@m"
										[innerHTML]="'('+(fetchDataproviders.searchUtils.totalResults | numberRound)+')'"></span>
					</span>
				</ng-template>
			</slider-tab>
			<slider-tab *ngIf="showServices" tabId="services" [tabTemplate]="services" [active]="activeEntity == 'services'">
				<ng-template #services>
					<span class="uk-text-uppercase">
						{{servicesName}}
						<span *ngIf="fetchServices.searchUtils.totalResults!=null" class="uk-visible@m"
                  [innerHTML]="'('+(fetchServices.searchUtils.totalResults | numberRound)+')'"></span>
					</span>
				</ng-template>
			</slider-tab>
			<slider-tab *ngIf="showOrganizations" tabId="organizations" [tabTemplate]="organizations" [active]="activeEntity == 'organizations'">
				<ng-template #organizations>
					<span class="uk-text-uppercase">
						{{organizationsName}}
						<span *ngIf="fetchOrganizations.searchUtils.totalResults!=null" class="uk-visible@m"
                  [innerHTML]="'('+(fetchOrganizations.searchUtils.totalResults | numberRound)+')'"></span>
          </span>
				</ng-template>
			</slider-tab>
		</slider-tabs>
		<!--<div class="uk-position-relative">
			<div class="uk-slider-container">
				<ul class="uk-slider-items uk-flex uk-flex-center" style="flex-wrap: nowrap !important;">
					<li *ngIf="showPublications || showDatasets || showOrps || showSoftware" (click)="entityChanged('result')">
						<ul class="uk-tab">
							<li [class.uk-active]="activeEntity == 'result'">
								<a class="uk-text-uppercase">
									{{resultsName}}
									<span *ngIf=" fetchPublications.searchUtils.totalResults!=null" class="uk-visible@m">
										({{fetchPublications.searchUtils.totalResults | number}})</span>
								</a>
							</li>
						</ul>
					</li>
					<li *ngIf="showProjects" (click)="entityChanged('projects')">
						<ul class="uk-tab">
							<li [class.uk-active]="activeEntity == 'projects'">
								<a class="uk-text-uppercase">
									{{projectName}}
									<span *ngIf="fetchProjects.searchUtils.totalResults!=null" class="uk-visible@m">
										({{fetchProjects.searchUtils.totalResults | number}})</span>
								</a>
							</li>
						</ul>
					</li>
					<li *ngIf="showDataProviders" (click)="entityChanged('datasources')">
						<ul class="uk-tab">
							<li [class.uk-active]="activeEntity == 'datasources'">
								<a class="uk-text-uppercase">
									{{dataSourcesName}}
									<span *ngIf="fetchDataproviders.searchUtils.totalResults!=null" class="uk-visible@m">
										({{fetchDataproviders.searchUtils.totalResults | number}})</span>
								</a>
							</li>
						</ul>
					</li>
					<li *ngIf="showServices" (click)="entityChanged('services')">
						<ul class="uk-tab">
							<li [class.uk-active]="activeEntity == 'services'">
								<a class="uk-text-uppercase">
									{{servicesName}}
									<span *ngIf="fetchServices.searchUtils.totalResults!=null" class="uk-visible@m">
										({{fetchServices.searchUtils.totalResults | number}})</span>
								</a>
							</li>
						</ul>
					</li>
					<li *ngIf="showOrganizations" (click)="entityChanged('organizations')">
						<ul class="uk-tab">
							<li [class.uk-active]="activeEntity == 'organizations'">
								<a class="uk-text-uppercase">
									{{organizationsName}}
									<span *ngIf="fetchOrganizations.searchUtils.totalResults!=null" class="uk-visible@m">
										({{fetchOrganizations.searchUtils.totalResults | number}})</span>
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
			<div>
				<a class="uk-position-center-left uk-blur-background" uk-slider-item="previous"><span uk-icon="chevron-left"></span></a>
				<a class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span uk-icon="chevron-right"></span></a>
			</div>
		</div>-->
	</div>
</div>

<search-research-results *ngIf="activeEntity == 'result'" resultType="result" [includeOnlyResultsAndFilter]="true"
                         (searchPageUpdates)="activeEntityUpdate($event)" [showSwitchSearchLink]="false"
                         [simpleSearchLink]="properties.searchLinkToResults" [customFilter]="customFilter"></search-research-results>

<search-projects *ngIf="activeEntity == 'projects'" [includeOnlyResultsAndFilter]="true"  [showSwitchSearchLink]="false"
                 (searchPageUpdates)="activeEntityUpdate($event)"
                 [simpleSearchLink]="properties.searchLinkToProjects" [customFilter]="customFilter">
</search-projects>

<search-organizations *ngIf="activeEntity == 'organizations'" [includeOnlyResultsAndFilter]="true"  [showSwitchSearchLink]="false"
                      (searchPageUpdates)="activeEntityUpdate($event)"
                      [simpleSearchLink]="properties.searchLinkToOrganizations" [customFilter]="customFilter">
</search-organizations>

<search-dataproviders *ngIf="activeEntity == 'datasources'" [includeOnlyResultsAndFilter]="true"  [showSwitchSearchLink]="false"
                      (searchPageUpdates)="activeEntityUpdate($event)"
                      [simpleSearchLink]="properties.searchLinkToDataProviders" [customFilter]="customFilter">
</search-dataproviders>

<search-dataproviders *ngIf="activeEntity == 'services'" [includeOnlyResultsAndFilter]="true"  [showSwitchSearchLink]="false"
                      (searchPageUpdates)="activeEntityUpdate($event)"
                      [simpleSearchLink]="properties.searchLinkToServices" [customFilter]="customFilter"
                      type="services" entityType="service" [typeName]="openaireEntities.SERVICES">
</search-dataproviders>
