<div class="grid pt-6 pl-6 flex">
  <div class="flex col-12 justify-content-center">
    <p class="text-3xl">{{resource.resourceName}}
    </p>
  </div>
  <div class="col-6 flex flex-column">
    <div class="col-12 text-center">
      <img [src]="imagePath+'/'+resourceId" class="imageSize" >
    </div>
    <div class="col-12">
      <p-panel class="col-12 inline">
        <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource language</div><div class="my-0">{{resource.language?.name}}</div></div>
        <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource origin</div> <div class="my-0 overflow-text"><a href="{{resource.resourceOrigin}}" target="_blank">{{resource.resourceOrigin}}</a></div></div>
        <div class="flex align-items-center"> <div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}">Resource type</div><div class="my-0">{{resource.resourceType?.name}}</div></div>
        <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}">Organization name</div><div class="my-0">{{resource.contactInstitution}}</div></div>
        <div class="flex align-items-center"><div class="col-3 inline my-0"[ngStyle]="{color:'var(--surface-500)'}">Contact email</div><div class="my-0"></div>{{resource.contactEmail}}</div>
        <div class="flex align-items-center"><div class="col-3 inline my-0"[ngStyle]="{color:'var(--surface-500)'}">Contact phone</div><div class="my-0">{{resource.contactPhone}}</div></div>
        <div class="flex align-items-center"><div class="col-3 inline my-0"[ngStyle]="{color:'var(--surface-500)'}">Contact address</div><div class="my-0">{{resource.contactAddress}}</div></div>
        <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}">Citation (DOI)</div><div class="overflow-text my-0">{{resource.citation}}</div></div>
      </p-panel>
    </div>
  </div>
  <div class="col-6 flex flex-column">
  <p-panel header="Short summary" class="col-12 p-d-block">
      <div class="flex"> {{resource.description}}</div>
      <div class="flex mt-5">
        <div class="inline col-3 my-0"[ngStyle]="{color:'var(--surface-500)'}">Sectors</div>
        <div class="inline my-0" *ngFor="let sector of resource.sectors">
          <img class="sector mx-2" [src]="'assets/sectors/'+sector.sectorIcon" pTooltip="{{sector.name}}">
        </div>
      </div>
      <div class="flex flex-wrap">
        <div class="inline col-3 my-0" [ngStyle]="{color:'var(--surface-500)'}">Regions</div>
        <div *ngFor="let region of resource.regions" class="inline my-0">
          <p class=" my-0 py-2 mx-2" >{{region.name}}</p>
        </div>
      </div>
      <div class="flex">
        <div class="inline col-3" [ngStyle]="{color:'var(--surface-500)'}">Relevant pest(s)</div>
        <div class="col-9">
        <div *ngFor="let pest of resource.pests" class="inline-flex pr-2 pb-2">
          <p-badge  severity="danger" value={{pest.commonName}}></p-badge>
        </div>
        </div>
      </div>
      <div class="flex">
        <div class="inline col-3" [ngStyle]="{color:'var(--surface-500)'}"> Relevant crop(s)</div>
        <div class="col-9">
          <div class="inline-flex pr-2 pb-2" *ngFor="let crop of resource.crops">
            <p-badge  severity="success" value={{crop.commonName}}></p-badge>
          </div>
        </div>


      </div>
    </p-panel>
    <p-panel class="col-12 p-d-block" header="Find out more" *ngIf="(resource.fileNames != undefined) || (resource.links != undefined)">
      <div *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>
      <div class="mt-2" *ngFor="let link of resource.links" >
        <i class="pi pi-link p-mr-2" style="font-size: 2rem"></i>
        <a class="link-wrap" href="{{link}}" target="_blank">{{link}}</a>
      </div>
    </p-panel>
</div>
  <div class="col-12 pt-3 flex justify-content-center">
    <div class="pr-2">
      <p-button  label="Back to search" icon="pi pi-search" routerLink="/home" [loading]="false"></p-button>
      <p-button  label="Share" icon="pi pi-share-alt" class="ml-3"(click)=linkCopied(getPermLink(resource.idResource)) [loading]="false"></p-button>

    </div>
    <div class="pr-2" *ngIf="!resource.approved && resource.canEdit && (loggeduser| async)?.roles?.includes('ADMIN')">
      <p-button  label="Approve" icon="pi pi-check" (onClick)="approve($event)" [loading]="false"></p-button>
    </div>
    <div class="pr-2" *ngIf="(loggeduser| async)?.roles?.includes('ADMIN') && resource.canEdit">
      <p-button  label="Edit" icon="pi pi-pencil" routerLink="/resource/edit/{{resourceId}}" [loading]="false"></p-button>
    </div>
    <div *ngIf="(loggeduser| async)?.roles?.includes('ADMIN') && resource.canEdit">
      <p-button  label="Delete" icon="pi pi-trash" (onClick)="delete($event)" [loading]="false"></p-button>
    </div>
  </div>
</div>
<p-toast position="bottom-center" key="bc"></p-toast>
<p-confirmDialog></p-confirmDialog>
<p-dialog id="shareModal" name="shareModal" header="Copy link to share" [(visible)]="displayModal"  [style]="{width: '40vw'}">
  <div class="field">
    <label>Link</label>
    <input id="link" type="text" [(ngModel)]="copiedLink" pInputText/>
  </div>

  <div class="field button-center">
    <button pButton type="button" class="p-button-help" label="Ok"  (click)="displayModal=false" ></button>
  </div>
</p-dialog>
