<p-messages	severity="info" [enableService]="false" *ngIf="!close">
 <ng-template pTemplate>
   <span class="p-message-icon pi pi-info-circle"></span>
   <span class="p-message-summary">Disclaimer</span>
   <span class="p-message-detail">This IPMWORKS Resource Toolbox is a repository for IPM resource developed by the EU IPMWORKS project (101000339). The cooperating partners have no economic responsibility whatsoever for losses due to using this service. In continuing to use the IPMWorks Resource Toolbox you agree to <a [ngStyle]="{color:'var(--surface-0)'}" href="#">Part 1</a> of the Toolbox Terms and Conditions.</span>
   <button type="button" (click)="closeDisclaimer()"  class="p-message-close p-link"><i class=" p-message-close-icon pi pi-times"></i></button>
 </ng-template>
</p-messages>

<div class="grid pt-6 pl-6">
   <div class="col-3">
     <form #searchForm="ngForm" (ngSubmit)="searchResource()">
       <p class="text-xl">Sectors</p>
       <p-multiSelect  defaultLabel="Select sector" [options]="sectors" name="sector" [(ngModel)]="searchModel.sector" optionLabel="name"></p-multiSelect>
       <p class="text-xl">Country of origin</p>
       <p-multiSelect  defaultLabel="Select region" [options]="regions" name="region" [(ngModel)]="searchModel.region" optionLabel="name"></p-multiSelect>
     <!-- <div class="field">
        <p class="text-xl">Pest type</p>
        <p-dropdown   autoWidth="false" [style]="{'width':'100%'}" placeholder="Select pest type"  [options]="pestType" name="pestType"[(ngModel)]="searchModel.pestType" optionLabel="name" ></p-dropdown>
      </div>-->
       <p class="text-xl">Project</p>
       <p-dropdown   autoWidth="false" [style]="{'width':'100%'}" placeholder="Select project"  [(ngModel)]="searchModel.project" [options]="projects" name="project" optionLabel="name" ></p-dropdown>
       <p class="text-xl">Resource types</p>
       <p-multiSelect placeholder="Select resource type" name="resourceType" [(ngModel)]="searchModel.resourceType" [options]="contentTypes" optionLabel="name">
       </p-multiSelect>


       <div class="button-right pt-3" *ngIf="!more">
        <button pButton type="button" pTooltip="More filters..." icon="pi pi-plus" class="p-button-text p-button-sm p-button-rounded p-button-outlined " (click)="toggleFilters()"></button>
      </div>
       <div class="button-right pt-3" *ngIf="more">
         <button pButton type="button" icon="pi pi-minus" pTooltip="Less filters..."
                 class="p-button-text p-button-sm p-button-rounded p-button-outlined " (click)="toggleFilters()"></button>
       </div>
      <div *ngIf="more">
        <p class="text-xl">Specific pest</p>
        <p-multiSelect defaultLabel="Select pests"  [options]="pests" optionLabel="commonName"   filterBy="commonName,latinName,eppo" [(ngModel)]="searchModel.pest" name="pest">
          <ng-template let-pest pTemplate="item">
            <div>{{pest.commonName}} <i *ngIf="pest.latinName !=undefined">
              ({{pest.latinName}}, {{pest.eppo}})</i></div>
          </ng-template>
        </p-multiSelect>


        <p class="text-xl">Specific crop</p>
        <p-multiSelect defaultLabel="Select crops" [options]="crops" optionLabel="commonName" filterBy="commonName,latinName,eppo" [(ngModel)]="searchModel.crop" name="crop">
          <ng-template let-crop pTemplate="item">
            <div>{{crop.commonName}} <i *ngIf="crop.latinName !=undefined">
              ({{crop.latinName}}, {{crop.eppo}})</i></div>
          </ng-template>
        </p-multiSelect>

        <p class="text-xl">Languages</p>
        <p-multiSelect defaultLabel="Select language"  [options]="languages" name="language" [(ngModel)]="searchModel.language" optionLabel="name"></p-multiSelect>

        <!--<h3>Arbitrary text search</h3>
       <input type="text" pInputText [(ngModel)]="searchTerm"/>-->
      </div>
       <div class="flex justify-content-center">
         <div class="pt-3 pr-3">
         <p-button type="submit" label="Search" [disabled] = "isEmptySearch()"  icon="pi pi-search" [loading]="serachRunning"></p-button>
       </div>
       <div class="pt-3 pl-3">
         <p-button type="submit" label="Reset" icon="pi pi-refresh" (click)="resetSearch()" [loading]="false"></p-button>
       </div>
       </div>
     </form>
   </div>

<div class="col-9">
    <p-card>
      <p-dataView [value]="resources" [lazy]="true" (onLazyLoad)="onPageChange($event)" (onPage)="onPageChange($event)" [totalRecords]="totalElements" [paginator]="true" [rowsPerPageOptions]=[12,24,48,96] [rows]="12" layout="grid">
        <ng-template let-resource pTemplate="gridItem">
          <div class="card col-12 md:col-4 flex flex-column p-3 mt-3" >
                <div class="pb-1 align-self-end">
                  <p-tag *ngIf="resource.resourceType" [rounded]=true value="{{resource.resourceType.name}}">
                  </p-tag>
                  <p-avatar *ngIf="resource.external" shape="circle" icon="pi pi-external-link"></p-avatar>

                </div>
               <div class="" routerLink="/resource/{{resource.idResource}}">
                  <img [defaultImage]="'assets/sectors/multi.jpg'" [useSrcset]="true" [lazyLoad]="imagePath+'/'+resource.idResource" class="imageSizeHome"/>
                  <p class="text-center">{{resource.resourceName}}</p>
               </div>
                <div class="align-self-center">
                  <a routerLink="/resource/{{resource.idResource}}" target="_blank" [style]="'text-decoration:unset'">
                    <button pButton type="button"  icon="pi pi-forward" class="p-button-outlined mr-4" pTooltip="See more..."></button>
                  </a>
                  <!--<button pButton type="button" icon="pi pi-share-alt" class="p-button-outlined" pTooltip="Copy link for sharing" ngxClipboard [cbContent]="getPermLink(resource.idResource)" (click)=linkCopied(getPermLink(resource.idResource))></button>-->
                </div>
               </div>
        </ng-template>

        <ng-template let-item pTemplate="paginatordropdownitem">
          {{item.value}} - per page
        </ng-template>
      </p-dataView>
      <div class="justify-content-center flex pt-3" *ngIf="totalElements>0">Number of results: {{totalElements}}</div>

    </p-card>
    </div>
</div>
