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

     <h3>Regions</h3>
     <p-multiSelect defaultLabel="Select region" [options]="regions" [(ngModel)]="selectedRegions" optionLabel="value"></p-multiSelect>

     <h3>Resource types</h3>
     <p-multiSelect defaultLabel="Select resource type" [options]="contentTypes" [(ngModel)]="selectedTypes" optionLabel="value"></p-multiSelect>

     <h3>Languages</h3>
     <p-multiSelect defaultLabel="Select language" [options]="languages" [(ngModel)]="selectedLanguages" optionLabel="value"></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>Keywords</h3>
      <p-multiSelect defaultLabel="Select keywords" [options]="keywords" [(ngModel)]="selectedKeywords" optionLabel="value" [selectionLimit]='3'></p-multiSelect>

     <h3>Projects</h3>
     <p-multiSelect defaultLabel="Select project" [options]="keywords" [(ngModel)]="selectedKeywords" optionLabel="value" [selectionLimit]='3'></p-multiSelect>

     <h3>Organisations</h3>
     <p-multiSelect defaultLabel="Select organisation" [options]="keywords" [(ngModel)]="selectedKeywords" optionLabel="value" [selectionLimit]='3'></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.title}}" subheader="" styleClass="p-card-shadow">
              <ng-template pTemplate="header">
                <div class="p-pb-1 button-right">
                  <p-tag *ngIf="resource.contentType" [rounded]=true value="{{resource.contentType.value}}">
                  </p-tag>
                </div>
                <img alt="Card" [src]="resource.imagePath">
                <img class="flag" alt="Card" [src]="'/assets/flags/'+resource.language.toLowerCase()+'.svg'">
              </ng-template>
              <div *ngFor="let sector of resource.relevantSectors" class="horizontal">
                <ng-container [ngSwitch]=sector.sectorId>
                  <img *ngSwitchCase="1" class="sector" [src]="'/assets/sectors/arable.svg'" pTooltip="{{sector.value}}">
                  <img *ngSwitchCase="5" class="sector" [src]="'/assets/sectors/greenhouse.svg'" pTooltip="{{sector.value}}">
                  <img *ngSwitchCase="3" class="sector"[src]="'/assets/sectors/orchard.svg'" pTooltip="{{sector.value}}">
                  <img *ngSwitchCase="4" class="sector"[src]="'/assets/sectors/vegetables.svg'" pTooltip="{{sector.value}}">
                  <img *ngSwitchCase="2" class="sector" [src]="'/assets/sectors/vineyard.svg'" pTooltip="{{sector.value}}">
                </ng-container>
              </div>
              <ng-template pTemplate="footer">
                <button pButton type="button" routerLink="/resource/{{resource.resourceId}}" 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>
