<p-messages [(value)]="disclaimer" [enableService]="false"></p-messages>
<div class="grid pt-6 pl-6">
   <div class="col-3">
     <p class="text-xl">Sectors</p>
     <p-multiSelect [selectionLimit]="1" defaultLabel="Select sector" [options]="sectors" [(ngModel)]="selectedSectors" optionLabel="name"></p-multiSelect>
     <p class="text-xl">Country of origin</p>
     <p-multiSelect [selectionLimit]="1" defaultLabel="Select region" [options]="regions" [(ngModel)]="selectedRegions" 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" [(ngModel)]="selectedPestType" optionLabel="name" ></p-dropdown>
    </div>
     <p class="text-xl">Project</p>
     <input id="project" type="text" pInputText [(ngModel)]="selectedProjects" placeholder="Add project">

     <p class="text-xl">Resource types</p>
     <p-multiSelect placeholder="Select resource type" [selectionLimit]="1"[(ngModel)]="selectedTypes" [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" [selectionLimit]="1" [options]="pests" optionLabel="commonName"   filterBy="commonName,latinName,eppo" [(ngModel)]="selectedPests">
        <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" [selectionLimit]="1" [options]="crops" optionLabel="commonName" filterBy="commonName,latinName,eppo" [(ngModel)]="selectedCrops">
        <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" [selectionLimit]="1" [options]="languages" [(ngModel)]="selectedLanguages" optionLabel="name"></p-multiSelect>

      <!--<h3>Arbitrary text search</h3>
     <input type="text" pInputText [(ngModel)]="searchTerm"/>-->
</div>
     <div class="pt-3 button-center">
       <p-button  label="Search" icon="pi pi-search" [loading]="false"></p-button>
     </div>
   </div>

<div class="col-9">
    <p-card>
    <div class="button-right">
       <button pButton type="button" routerLink="/resource/add" icon="pi pi-plus" class="p-button-lg p-button-raised p-button-rounded"></button>
     </div>
      <p-dataView [value]="resources" [paginator]="true" [rows]="6" layout="grid">
        <ng-template let-resource pTemplate="gridItem">
          <div class="card col-12 md:col-4 flex flex-column p-3 mt-3 justify-content-between" routerLink="/resource/{{resource.idResource}}">
                <div class="pb-1 align-self-end">
                  <p-tag *ngIf="resource.resourceType" [rounded]=true value="{{resource.resourceType.name}}">
                  </p-tag>
                </div>
               <div class="">
                  <img [src]="imagePath+'/'+resource.idResource" class="imageSizeHome">
                  <p class="text-center">{{resource.resourceName}}</p>
               </div>
                <div class="align-self-center">
                  <button pButton type="button" routerLink="/resource/{{resource.idResource}}" icon="pi pi-forward" class="p-button-outlined mr-4" pTooltip="See more..."></button>
                  <button pButton type="button" icon="pi pi-share-alt" class="p-button-outlined" pTooltip="Share"></button>
                </div>
               </div>
        </ng-template>
      </p-dataView>
    </p-card>
    </div>
</div>
