<p-messages [(value)]="disclaimer" [enableService]="false"></p-messages>

<div class="p-grid p-pt-6 p-pl-6">
   <div class="p-col-3">
     <h3>Sectors</h3>
     <p-multiSelect defaultLabel="Select sector" [options]="sectors" [(ngModel)]="selectedSectors" optionLabel="name"></p-multiSelect>

     <h3>Country of origin</h3>
     <p-multiSelect defaultLabel="Select region" [options]="regions" [(ngModel)]="selectedRegions" optionLabel="name"></p-multiSelect>
<div class="p-field">
     <h3>Pest type</h3>
     <p-dropdown   autoWidth="false" [style]="{'width':'100%'}" placeholder="Select pest type"  [options]="pestType" [(ngModel)]="selectedPestType" optionLabel="name" ></p-dropdown>
</div>
     <h3>Project</h3>
     <input id="project" type="text" pInputText [(ngModel)]="selectedProjects" placeholder="Add project">

     <h3>Resource types</h3>
     <p-multiSelect placeholder="Select resource type" [selectionLimit]="1"[(ngModel)]="selectedTypes" [options]="contentTypes" optionLabel="name"
                     ></p-multiSelect>


     <div class="button-right p-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 p-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">
      <h3>Specific pest</h3>
      <p-multiSelect defaultLabel="Select pests" [selectionLimit]="2" [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>


      <h3>Specific crop</h3>
      <p-multiSelect defaultLabel="Select crops" [selectionLimit]="2" [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>

      <h3>Languages</h3>
      <p-multiSelect defaultLabel="Select language" [selectionLimit]="2" [options]="languages" [(ngModel)]="selectedLanguages" optionLabel="name"></p-multiSelect>

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

<div class="p-col-9">
  <div class="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 #dv [value]="resources" [paginator]="true" [rows]="6" layout="grid">
        <ng-template let-resource pTemplate="gridItem">
          <div class="p-col-12 p-md-4">
            <p-card header="{{resource.resourceName}}" subheader="" styleClass="p-card-shadow" routerLink="/resource/{{resource.idResource}}">
              <ng-template pTemplate="header">
                <div class="p-pb-1 button-right">
                  <p-tag *ngIf="resource.resourceType" [rounded]=true value="{{resource.resourceType.name}}">
                  </p-tag>
                </div>
                <img [src]="imagePath+'/'+resource.idResource" class="imageSizeHome">
                <img class="flag" [src]="'assets/flags/'+resource.language.name.toLowerCase()+'.png'">
              </ng-template>
              <div *ngFor="let sector of resource.relevantSectors" class="horizontal">
                <ng-container [ngSwitch]=sector.idSector>
                  <img *ngSwitchCase="1" class="sector" [src]="'assets/sectors/arable.png'" pTooltip="{{sector.name}}">
                  <img *ngSwitchCase="5" class="sector" [src]="'assets/sectors/greenhouse.png'" pTooltip="{{sector.name}}">
                  <img *ngSwitchCase="3" class="sector"[src]="'assets/sectors/orchard.png'" pTooltip="{{sector.name}}">
                  <img *ngSwitchCase="4" class="sector"[src]="'assets/sectors/vegetables.png'" pTooltip="{{sector.name}}">
                  <img *ngSwitchCase="2" class="sector" [src]="'assets/sectors/vineyard.png'" pTooltip="{{sector.name}}">
                </ng-container>
              </div>
              <ng-template pTemplate="footer">
                <button pButton type="button" routerLink="/resource/{{resource.idResource}}" icon="pi pi-forward" class="p-button-outlined p-mr-4" pTooltip="See more..."></button>
                <button pButton type="button" icon="pi pi-share-alt" class="p-button-outlined" pTooltip="Share"></button>
              </ng-template>
            </p-card>
          </div>
        </ng-template>

      </p-dataView>
    </div>

  </div>

</div>
