<div class="p-grid p-pt-6 p-pl-6">
  <div class="p-col-6">

  <p-card header="{{resource.resourceName}}" >
    <div *ngFor="let keyword of resource.keywords" class="horizontal">
      <p-tag value=" {{keyword.name}}"></p-tag>

    </div>
    <div>
    {{resource.language?.name}}
    </div>
    <div *ngFor="let sector of resource.sectors" class="horizontal">
      <ng-container [ngSwitch]=sector.idSector>
        <img *ngSwitchCase="1" class="sector" [src]="'assets/sectors/arable.svg'" pTooltip="{{sector.name}}">
        <img *ngSwitchCase="5" class="sector" [src]="'assets/sectors/greenhouse.svg'" pTooltip="{{sector.name}}">
        <img *ngSwitchCase="3" class="sector"[src]="'assets/sectors/orchard.svg'" pTooltip="{{sector.name}}">
        <img *ngSwitchCase="4" class="sector"[src]="'assets/sectors/vegetables.svg'" pTooltip="{{sector.name}}">
        <img *ngSwitchCase="2" class="sector" [src]="'assets/sectors/vineyard.svg'" pTooltip="{{sector.name}}">
      </ng-container>
    </div>
    <div>
      <div *ngFor="let region of resource.regions" class="horizontal">
        <img class="sector" alt="Card" [src]="'assets/flags/'+region.name.toLowerCase()+'.svg'" pTooltip="{{region.name}}">
      </div>
    </div>

    <hr/>
    <div class="p-text-italic" [ngStyle]="{color:'var(--green-200)'}">
      Date of upload:{{resource.idResource}}
    </div>
    <div class="p-text-italic" [ngStyle]="{color:'var(--green-200)'}">
      Uploaded by: {{resource.idResource}}

    </div>
    <div> <h3>Summary description</h3>{{resource.description}}</div>
  </p-card>
  </div>
  <div class="p-col-3">
    <img alt="Card" [src]="imagePath+'/'+resource.idResource" class="imageSize">
    <div>
      <h3>Links and downloads</h3>
      <div *ngFor="let link of resource.links" >
       <a href="{{link}}">{{link}}</a>
      </div>
  </div>
  </div>
  <div class="p-col-12 p-pt-3 button-center">
    <p-button  label="Back to search" icon="pi pi-search" routerLink="/home" [loading]="false"></p-button>
  </div>
</div>
