<div class="p-grid p-pt-6 p-pl-6 p-d-flex">
  <div class="p-d-flex p-col-12">
    <h1 class="p-text-center" [ngStyle]="{'flex-grow':1}">{{resource.resourceName}}</h1>
  </div>
  <div class="p-col-6 p-d-flex p-jc-center">
      <img [src]="imagePath+'/'+resource.idResource" class="imageSize" >
  </div>
  <p-panel header="Short summary" class="p-col-6 p-d-block">
      <div class="p-d-flex "> {{resource.description}}</div>
      <div class="p-d-flex  p-mt-5 ">
        <div class="p-d-inline p-col-3 p-my-0"[ngStyle]="{color:'var(--surface-500)'}">Sectors</div>
        <div class="p-d-inline p-my-0" *ngFor="let sector of resource.sectors">
          <img class="sector p-mx-2" [src]="'assets/sectors/'+sector.sectorIcon" pTooltip="{{sector.name}}">
        </div>
      </div>
      <div class="p-d-flex ">
        <div class="p-d-inline p-col-3 p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Regions</div>

        <div *ngFor="let region of resource.regions" class="p-d-inline p-my-0">
          <img class="sector p-mx-2" [src]="'assets/flags/'+region.name.toLowerCase()+'.svg'" pTooltip="{{region.name}}">
        </div>
      </div>
      <div class="p-d-flex ">
        <div class="p-d-inline p-col-3 p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Relevant pest(s)</div>
        <div *ngFor="let pest of resource.pests" class="p-d-inline p-my-0">
          <p class=" p-my-0 p-py-2 p-mx-2" >{{pest.name}}</p>
        </div>
      </div>
      <div class="p-d-flex ">
        <div class="p-d-inline p-col-3 p-my-0" [ngStyle]="{color:'var(--surface-500)'}"> Relevant crop(s)</div>

        <div *ngFor="let crop of resource.crops" class="p-d-inline p-my-0">
          <p class="p-my-0 p-py-2 p-mx-2" >{{crop.name}}</p>

        </div>
      </div>
    </p-panel>
    <p-panel class="p-col-6 p-d-inline">
    <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource language</div><div class=" p-d-inline p-my-0">{{resource.language?.name}}</div></div>
    <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource origin</div> <div class=" p-d-inline p-my-0">{{resource.resourceOrigin}}</div></div>
    <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Country (of origin)</div><div class=" p-d-inline p-my-0"></div>{{resource.countryOrigin?.name}}</div>
    <div class="p-d-flex p-ai-center"> <div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource type</div><div class=" p-d-inline p-my-0">{{resource.resourceType?.name}}</div></div>
    <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Organization name</div><div class=" p-d-inline p-my-0">{{resource.contactInstitution}}</div></div>
    <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0"[ngStyle]="{color:'var(--surface-500)'}">Contact name</div><div class=" p-d-inline p-my-0"></div>{{resource.contactName}}</div>
    <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0"[ngStyle]="{color:'var(--surface-500)'}">Contact email</div><div class=" p-d-inline p-my-0"></div>{{resource.contactEmail}}</div>
    <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0"[ngStyle]="{color:'var(--surface-500)'}">Contact phone</div><div class=" p-d-inline p-my-0">{{resource.contactPhone}}</div></div>

    <div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource main url</div><div class=" p-d-inline p-my-0">{{resource.mainURL}}</div></div>
<div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0" [ngStyle]="{color:'var(--surface-500)'}">Citation (DOI)</div><div class=" p-d-inline p-my-0">{{resource.citation}}</div></div>
<div class="p-d-flex p-ai-center"><div class="p-col-3 p-d-inline p-my-0"[ngStyle]="{color:'var(--surface-500)'}">Keywords</div>
  <div *ngFor="let keyword of resource.keywords" class="p-col-4 p-d-inline p-my-0">
  <p-tag value=" {{keyword.name}}"></p-tag>
</div>
</div>

  </p-panel>

  <p-panel class="p-col-6" header="Find out more">

    <div *ngFor="let link of resource.links" >
      <a href="{{link}}">{{link}}</a>
    </div>
    <div class="p-mt-2" *ngFor="let file of resource.fileNames" >
      <i class="pi pi-file p-mr-2" style="font-size: 2rem"></i>
      <button pButton type="button" label="{{file}}" class="p-button-link button-link" (click)="downloadFile(file)"></button>

    </div>
  </p-panel>
  <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>