<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" i18n>Disclaimer</span>
   <span class="p-message-detail" i18n>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="https://ipmworks.net/ipmworks/file/get/63b6b7c0d7f8f46f5b2a28b3">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 flex-wrap">
   <div class="md:col-3">
     <form #searchForm="ngForm" (ngSubmit)="searchResource()">
       <p class="text-xl" i18n="@@{sectors}">Sectors</p>
       <p-multiSelect i18n-defaultLabel="@@{select_sector}" defaultLabel="Select sector" [options]="sectors" name="sector" [(ngModel)]="searchModel.sector" optionLabel="{{locale === 'en' ? 'name' : 'name_'+locale}}">


       </p-multiSelect>
       <p class="text-xl" i18n="@@{country_origin}">Country of origin</p>
       <p-multiSelect i18n-defaultLabel="@@{select_region}" defaultLabel="Select region" [options]="regions" name="region" [(ngModel)]="searchModel.region" optionLabel="{{locale === 'en' ? 'name' : 'name_'+locale}}"></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" i18n="@@{project}">Project</p>
       <p-dropdown autoWidth="false" [style]="{'width':'100%'}" i18n-placeholder="@@{select_project}" placeholder="Select project"  [(ngModel)]="searchModel.project" [options]="projects" name="project" optionLabel="name" ></p-dropdown>
       <p class="text-xl" i18n="@@{resource_types}">Resource types</p>
       <p-multiSelect i18n-placeholder="@@{select_resource_type}" placeholder="Select resource type" name="resourceType" [(ngModel)]="searchModel.resourceType" [options]="contentTypes" optionLabel="{{locale === 'en' ? 'name' : 'name_'+locale}}">
       </p-multiSelect>


       <div class="button-right pt-3" *ngIf="!more">
        <button pButton type="button" i18n-pTooltip="@@{more_filters}" 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" i18n-pTooltip="@@{less_filters}" 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" i18n="@@{search_title}">Resource title</p>
        <input id="title" name="title" type="text" pInputText [(ngModel)]="searchModel.title">

        <p class="text-xl" i18n="@@{specific_pest}">Specific pest</p>
        <p-multiSelect i18n-defaultLabel="@@{select_pests}" 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" i18n="@specific_crop">Specific crop</p>
        <p-multiSelect i18n-defaultLabel="@@{select_crops}" 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" i18n="@@{languages}">Resource language</p>
        <p-multiSelect i18n-defaultLabel="@@{select_language}" defaultLabel="Select language" [selectionLimit]="1" [options]="languages" name="language" [(ngModel)]="searchModel.language" optionLabel="{{locale === 'en' ? 'name' : 'name_'+locale}}"></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" i18n-label="@@{search}" label="Search" [disabled] = "isEmptySearch()"  icon="pi pi-search" [loading]="serachRunning"></p-button>
       </div>
       <div class="pt-3 pl-3">
         <p-button type="submit" i18n-label="@@{reset}" label="Reset" icon="pi pi-refresh" (click)="resetSearch()" [loading]="false"></p-button>
       </div>
       </div>
     </form>
   </div>

<div class="md: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 hoverResource">
                <div class="pb-1 align-self-end">
                  <p-tag *ngIf="resource.resourceType" [rounded]=true value="{{getResourceType(resource)}}">
                  </p-tag>
                  <p-avatar *ngIf="resource.external" shape="circle" icon="pi pi-external-link"></p-avatar>

                </div>
               <div  routerLink="/resource/{{resource.idResource}}">
                 <img [src]="imagePath+'/'+resource.idResource" class="imageSizeHome"/>
                 <div class="flex flex-column">
                   <div class="pt-1 align-self-end">
                     <p-tag  [rounded]=true  severity="success" icon="pi pi-globe" value="{{getRegion(resource)}}">
                     </p-tag>
                     <p-tag *ngIf="getProject(resource)!== null" [rounded]=true  severity="warning" icon="pi pi-book" value="{{getProject(resource)}}">
                     </p-tag>

                   </div>
                 </div>

                  <p class="text-center">{{resource.resourceName}}</p>
               </div>
                <div class="align-self-center">
                  <a routerLink="/resource/{{resource.idResource}}/{{getLang()}}" target="_blank" [style]="'text-decoration:unset'">
                    <button pButton type="button"  icon="pi pi-forward" class="p-button-outlined mr-4" i18n-pTooltip="@@{find_more}" 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" i18n="@@{per_page}">
          {{item.value}} - per page
        </ng-template>
      </p-dataView>
      <div class="justify-content-center flex pt-3" *ngIf="totalElements>0" i18n="@@{number_of_results}">Number of results: {{totalElements}}</div>

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