<p-messages	[styleClass]="'button-light-green'" [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 md:pt-6 md:pl-6 flex-wrap">
   <div class="xl:col-2 col-12">
     <form #searchForm="ngForm" (ngSubmit)="searchResource()">
       <p class="text-xl" i18n="@@{sectors}">Sectors</p>
       <p-multiSelect i18n-placeholder="@@{select_sector}"   placeholder="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-placeholder="@@{select_region}" placeholder="Select region" [options]="regions" name="region" [(ngModel)]="searchModel.region" optionLabel="{{locale === 'en' ? 'name' : 'name_'+locale}}"></p-multiSelect>
       <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>
        <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-placeholder="@@{select_pests}" placeholder="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-placeholder="@@{select_crops}"  placeholder="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-placeholder="@@{select_language}" placeholder="Select language" [options]="languages" name="language" [(ngModel)]="searchModel.language" optionLabel="{{locale === 'en' ? 'name' : 'name_'+locale}}"></p-multiSelect>
      </div>
       <div class="flex justify-content-center">
         <div class="pt-3 pr-3">
         <p-button type="submit" i18n-label="@@{search}" label="Search" [disabled] = "isEmptySearch()" [loading]="serachRunning"></p-button>
       </div>
       <div class="pt-3 pl-3">
         <p-button type="submit" i18n-label="@@{reset}" label="Reset" (click)="resetSearch()" [loading]="false"></p-button>
       </div>
       </div>
       <div class="flex justify-content-center mt-4">
         <button [style.background-color]	="'#f3b967'" pButton type="submit" i18n-label="@@{request_resource}" label="Request resource" routerLink="/resource/request" [loading]="false"></button>

       </div>
     </form>
   </div>

  <div class="xl:col-10 col-12">
    <p-dataView [value]="resources" [lazy]="true" (onLazyLoad)="onPageChange($event)" (onPage)="onPageChange($event)" [totalRecords]="totalElements" [paginator]="true" paginatorDropdownAppandTo="body" rowsPerPageOptions=[12,24,48,96] [rows]="12" layout="grid">
        <ng-template pTemplate="grid" let-resources>
          <div class="grid grid-nogutter">
            <div class="xl:col-3 lg:col-4 md:col-6 px-3" *ngFor="let resource of resources">
              <a routerLink="/resource/{{resource.idResource}}/{{getLang()}}" target="_blank" style="color:black !important;text-decoration:none !important;">
                <div class="card flex flex-column p-0 hoverResource">
                  <div [style.background]="'url('+imagePath+'/'+resource.idResource+')'" class="fillimg">
                  </div>
                  <div class="pl-3 pt-3 mb-3 flex flex-column justify-content-between fixheight">
                    <div>
                    <p-tag [style]="{'background-color': '#0a4b27 !important'}"  *ngIf="resource.sectors && resource.sectors.length >1" [rounded]=true value="{{getRegion(resource)}}"> </p-tag>
                    <p-tag [style]="{'background-color': '#0a4b27 !important'}"  *ngIf="resource.sectors && resource.sectors.length == 1 && resource.sectors[0].sectorIcon == 'arable.jpg'" [rounded]=true value="{{getRegion(resource)}}"> </p-tag>
                    <p-tag [style]="{'background-color': '#0a4b27 !important'}"  *ngIf="resource.sectors && resource.sectors.length == 1 && resource.sectors[0].sectorIcon == 'orchard.jpg'" [rounded]=true value="{{getRegion(resource)}}"> </p-tag>
                    <p-tag [style]="{'background-color': '#097b32 !important'}" *ngIf="resource.sectors && resource.sectors.length == 1 && resource.sectors[0].sectorIcon == 'vegetables.jpg'" [rounded]=true  value="{{getRegion(resource)}}"> </p-tag>
                    <p-tag [style]="{'background-color': '#0a4b27 !important'}" *ngIf="resource.sectors && resource.sectors.length == 1 && resource.sectors[0].sectorIcon == 'vineyard.jpg'" [rounded]=true value="{{getRegion(resource)}}"> </p-tag>
                    <p-tag [style]="{'background-color': '#0a4b27 !important'}" *ngIf="resource.sectors && resource.sectors.length == 1 && resource.sectors[0].sectorIcon == 'greenhouse.jpg'" [rounded]=true  value="{{getRegion(resource)}}"> </p-tag>


                    <p-tag [style]="{'background-color': '#f3b967 !important'}" class="pl-2" *ngIf="resource.resourceType && resource.sectors.length >1" [rounded]=true value="{{getResourceType(resource)}}"></p-tag>
                    <p-tag [style]="{'background-color': '#f3b967 !important'}" class="pl-2" *ngIf="resource.resourceType && resource.sectors.length == 1 && resource.sectors[0].sectorIcon == 'arable.jpg'" [rounded]=true value="{{getResourceType(resource)}}"></p-tag>
                    <p-tag [style]="{'background-color': '#f3b967 !important'}" class="pl-2" *ngIf="resource.resourceType && resource.sectors.length == 1 && resource.sectors[0].sectorIcon == 'orchard.jpg'" [rounded]=true value="{{getResourceType(resource)}}"></p-tag>
                    <p-tag [style]="{'background-color': '#f3b967 !important'}" class="pl-2" *ngIf="resource.resourceType && resource.sectors.length == 1 && resource.sectors[0].sectorIcon == 'vegetables.jpg'" [rounded]=true value="{{getResourceType(resource)}}"></p-tag>
                    <p-tag [style]="{'background-color': '#eda33f !important'}" class="pl-2" *ngIf="resource.resourceType && resource.sectors.length == 1 && resource.sectors[0].sectorIcon == 'vineyard.jpg'" [rounded]=true value="{{getResourceType(resource)}}"></p-tag>
                    <p-tag [style]="{'background-color': '#eda33f !important'}" class="pl-2" *ngIf="resource.resourceType && resource.sectors.length == 1 && resource.sectors[0].sectorIcon == 'greenhouse.jpg'" [rounded]=true value="{{getResourceType(resource)}}"></p-tag>
                    </div>

                    <p-avatar class="pl-2" *ngIf="resource.external" shape="circle" icon="pi pi-external-link"></p-avatar>

                    <p class="text-sm">{{resource.resourceName}}</p>
                    <div>
                      <a routerLink="/resource/{{resource.idResource}}/{{getLang()}}" target="_blank">
                      <button [style.background-color]	="'#f3b967'" pButton label="Learn more..." icon="pi pi-angle-double-right"  iconPos="right" class="p-button-rounded text-sm" ></button>
                      </a>
                        <!--              <button  *ngIf="resource.sectors.length == 1 && resource.sectors[0].sectorIcon == 'arable.jpg'" [style.background-color]	="'#f3b967'" pButton label="Learn more..." icon="pi pi-angle-double-right" iconPos="right" class="p-button-rounded" routerLink="/resource/{{resource.idResource}}/{{getLang()}}" ></button>-->
      <!--              <button  *ngIf="resource.sectors.length == 1 && resource.sectors[0].sectorIcon == 'orchard.jpg'" [style.background-color]	="'#f3b967'" pButton label="Learn more..." icon="pi pi-angle-double-right" iconPos="right" class="p-button-rounded" routerLink="/resource/{{resource.idResource}}/{{getLang()}}" ></button>-->
      <!--              <button  *ngIf="resource.sectors.length == 1 && resource.sectors[0].sectorIcon == 'vegetables.jpg'" [style.background-color]	="'#f3b967'" pButton label="Learn more..." icon="pi pi-angle-double-right" iconPos="right" class="p-button-rounded" routerLink="/resource/{{resource.idResource}}/{{getLang()}}" ></button>-->
      <!--              <button  *ngIf="resource.sectors.length == 1 && resource.sectors[0].sectorIcon == 'vineyard.jpg'" [style.background-color]	="'#0a4b27'" pButton label="Learn more..." icon="pi pi-angle-double-right" iconPos="right" class="p-button-rounded" routerLink="/resource/{{resource.idResource}}/{{getLang()}}" ></button>-->
      <!--              <button  *ngIf="resource.sectors.length == 1 && resource.sectors[0].sectorIcon == 'greenhouse.jpg'" [style.background-color]	="'#eda33f'" pButton label="Learn more..." icon="pi pi-angle-double-right" iconPos="right" class="p-button-rounded" routerLink="/resource/{{resource.idResource}}/{{getLang()}}" ></button>-->
                    </div>

                  </div>
                </div>
              </a>
            </div>
          </div>
        </ng-template>
        <ng-template #mydiv 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 && totalElements>0" i18n="@@{number_of_results}">Number of results: {{totalElements}}</div>
  </div>
</div>
