<div class="grid md:pt-6 md:pl-6">
  <div class="flex col-12 justify-content-center">
    <p class="text-3xl">{{resource.resourceName}}
    </p>
  </div>
  <div class="md: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="md:col-3 col-5 inline my-0" [ngStyle]="{color:'var(--surface-500)'}" i18n="@@{project}">Project</div><div class="my-0">{{resource.project}}</div></div>
        <div class="flex align-items-center"><div class="md:col-3 col-5 inline my-0" [ngStyle]="{color:'var(--surface-500)'}" i18n="@@{language}">Resource language</div><div class="my-0">{{resource.language?.name}}</div></div>
        <div class="flex align-items-center"><div class="md:col-3 col-5 inline my-0" [ngStyle]="{color:'var(--surface-500)'}" i18n="@@{resourceOrigin}">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="md:col-3 col-5 inline my-0" [ngStyle]="{color:'var(--surface-500)'}" i18n="@@{resourceType}">Resource type</div><div class="my-0">{{resource.resourceType?.name}}</div></div>
        <div class="flex align-items-center"><div class="md:col-3 col-5 inline my-0" [ngStyle]="{color:'var(--surface-500)'}" i18n="@@{contactInstitution}">Organization name</div><div class="my-0">{{resource.contactInstitution}}</div></div>
        <div class="flex align-items-center"><div class="md:col-3 col-5 inline my-0"[ngStyle]="{color:'var(--surface-500)'}" i18n="@@{contactEmail}">Contact email</div><div class="my-0"></div>{{resource.contactEmail}}</div>
        <div class="flex align-items-center"><div class="md:col-3 col-5 inline my-0"[ngStyle]="{color:'var(--surface-500)'}" i18n="@@{contactPhone}">Contact phone</div><div class="my-0">{{resource.contactPhone}}</div></div>
        <div class="flex align-items-center"><div class="md:col-3 col-5 inline my-0" [ngStyle]="{color:'var(--surface-500)'}" i18n="@@{citation}">Citation (DOI)</div><div class="overflow-text my-0">{{resource.citation}}</div></div>
        <div class="flex align-items-center"><div class="md:col-3 col-5 inline my-0" [ngStyle]="{color:'var(--surface-500)'}" i18n="@@{creationDate}">Creation date</div><div class="overflow-text my-0">{{resource.creationDate | date:"dd. MM. yyyy."}}</div></div>

      </p-panel>
    </div>
    <p-panel class="col-12" i18n-header="@@{find_more}" header="Find out more" *ngIf="(resource.files != undefined) || ((resource.links != undefined))">
      <div [ngClass]="{'pr-5': resource.youtube, 'col-12': !resource.youtube}">
        <div *ngFor="let file of resource.files" class="pb-5" >
          <i class="pi pi-file p-mr-2" style="font-size: 2rem"></i>
          <button pButton type="button" label="{{file.description}}" class="p-button-link button-link"
                  (mouseover)="displayPreviewModal=true;selectedFile=filePath+'/'+file.description"
                  (click)="downloadFile(file.description)" ></button>
        </div>
        <div class="mt-2" *ngFor="let link of resource.links" >
          <i class="pi pi-link mr-2 " style="font-size: 2rem" *ngIf="link.url !=''"></i>
          <a class="link-wrap" href="{{link.url}}" target="_blank">{{link.name}}</a>
        </div>
      </div>
    </p-panel>
  </div>
  <div class="md:col-6 md:flex md:flex-column">
  <p-panel i18n-header="@@{short_summary}" header="Short summary" class="col-12 p-d-block">
      <div *ngIf="resource.descriptionNative == undefined" class="flex keep-format" [innerHTML]="resource.description"></div>
    <p-tabView *ngIf="resource.descriptionNative != undefined">
      <p-tabPanel i18n-header="@@{tab_english}" header="English" >
        <div class="flex keep-format"> {{resource.description}}</div>
      </p-tabPanel>
      <p-tabPanel i18n-header="@@{tab_native}}" header="Native">
        <div class="flex keep-format"> {{resource.descriptionNative}}</div>
      </p-tabPanel>
    </p-tabView>
      <div class="flex mt-5">
        <div class="inline col-3 my-0"[ngStyle]="{color:'var(--surface-500)'}" i18n="@@{sectors}">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)'}" i18n="@@{regions}">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)'}"i18n="@@{relevant_pests}">Relevant pest(s)</div>
        <div class="col-9">
        <div *ngFor="let pest of resource.pests" class="inline-flex pr-2 pb-2">
          <p-badge  [styleClass]="'button-dark-orange'" value={{pest.commonName}}></p-badge>
        </div>
        </div>
      </div>
      <div class="flex">
        <div class="inline col-3" [ngStyle]="{color:'var(--surface-500)'}" i18n="@@{relevant_crops}"> Relevant crop(s)</div>
        <div class="col-9">
          <div class="inline-flex pr-2 pb-2" *ngFor="let crop of resource.crops">
            <p-badge  [styleClass]="'button-light-green'" value={{crop.commonName}}></p-badge>
          </div>
        </div>


      </div>
    </p-panel>
    <div class="col-12 pt-3 embed-responsive embed-responsive-16by9" *ngIf="resource.youtube !=undefined">
      <iframe [src]='safeURL' allowfullscreen width="100%" height="500px"></iframe>
    </div>
  </div>
<!--  <div class="md:col-6 md:flex">-->
<!--    <p-panel class="flex-1 pt-3 pb-3 pr-3" i18n-header="@@{find_more}" header="Find out more" *ngIf="(resource.files != undefined) || ((resource.links != undefined))">-->
<!--    <div [ngClass]="{'pr-5': resource.youtube, 'col-12': !resource.youtube}">-->
<!--      <div *ngFor="let file of resource.files" class="pb-5" >-->
<!--        <i class="pi pi-file p-mr-2" style="font-size: 2rem"></i>-->
<!--        <button pButton type="button" label="{{file.description}}" class="p-button-link button-link"-->
<!--                (mouseover)="displayPreviewModal=true;selectedFile=filePath+'/'+file.description"-->
<!--                (click)="downloadFile(file.description)" ></button>-->
<!--      </div>-->
<!--      <div class="mt-2" *ngFor="let link of resource.links" >-->
<!--        <i class="pi pi-link mr-2 " style="font-size: 2rem" *ngIf="link.url !=''"></i>-->
<!--        <a class="link-wrap" href="{{link.url}}" target="_blank">{{link.name}}</a>-->
<!--      </div>-->
<!--    </div>-->
<!--    </p-panel>-->
<!--  </div>-->
<!--  <div class="md:col-6 md:flex embed-responsive embed-responsive-16by9" *ngIf="resource.youtube !=undefined">-->
<!--    <iframe [src]='safeURL' allowfullscreen width="100%" height="500px"></iframe>-->
<!--  </div>-->
  <div class="col-12 pt-3 flex justify-content-center md:flex-row flex-column">
    <div class="pr-2 flex flex-wrap md:flex-row flex-column">
      <p-button i18n-label="@@{back_to_search}" label="Back to search" class="md:my-0 my-2" routerLink="/home" [loading]="false"></p-button>
      <p-button i18n-label="@@{share}" label="Share" class="md:ml-3 md:my-0 my-2"(click)=linkCopied(getPermLink(resource.idResource)) [loading]="false"></p-button>
      <p-button i18n-label="@@{download}" label="Download" class="md:ml-3 md:my-0 my-2 "(click)=download(resource) [loading]="false"></p-button>
      <p-button i18n-label="@@{comment}" label="Comment" class="md:ml-3 md:my-0 my-2"(click)=toogleCommentModal() [loading]="false"></p-button>


    </div>
    <div class="pr-2 md:my-0 my-2" *ngIf="!resource.approved && resource.canEdit && (loggeduser| async)?.roles?.includes('ADMIN')">
      <p-button i18n-label="@@{approve}" label="Approve" (onClick)="approve($event)" [loading]="false"></p-button>
    </div>
    <div class="pr-2 md:my-0 my-2" *ngIf="(loggeduser| async)?.roles?.includes('ADMIN') && resource.canEdit">
      <p-button  i18n-label="@@{edit}" label="Edit" routerLink="/resource/edit/{{resourceId}}" [loading]="false"></p-button>
    </div>
    <div class="pr-2 md:my-0 my-2" *ngIf="(loggeduser| async)?.roles?.includes('ADMIN') && resource.canEdit">
      <p-button  i18n-label="@@{delete]" label="Delete" (onClick)="delete($event)" [loading]="false"></p-button>
    </div>
    <div class="pr-2 md:my-0 my-2" *ngIf="(loggeduser| async)?.roles?.includes('ADMIN') && resource.canEdit && resource.approved">
      <p-button  i18n-label="@@{archive]" label="Archive" (onClick)="archive($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 i18n="@@{link}">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>

<p-dialog id="commentModal" name="commentModal" header="Comment resource" [(visible)]="displayCommentModal"  [style]="{width: '40vw'}">
  <div>
    <label>{{resource.resourceName}}</label>
  </div>
  <div class="mt-4">
    <textarea id="comment" name="comment" type="text" rows="10" pInputTextarea [(ngModel)]="comment.text"></textarea>
  </div>
  <div class="field">
    <label i18n="@@{email}">Your email</label>
    <input id="commenterEmail" type="text" [(ngModel)]="comment.commenterEmail" pInputText/>
  </div>
  <div class="field flex justify-content-center mt-4">
    <button pButton type="button" label="Cancel"  (click)=toogleCommentModal() ></button>
    <button pButton type="button" class="ml-3" label="Submit" [disabled]="comment.text?.length == 0"  (click)=sendEmail() ></button>

  </div>
</p-dialog>

<p-dialog id="previewModal" name="previewModal" header="Preview" [(visible)]="displayPreviewModal">
  <div>
    <pdf-viewer
      src="{{selectedFile}}"
      [rotation]="0"
      [original-size]="false"
      [render-text]="true"
      [show-all]="true"
      style="width: 50vw; height: 50vh">
    </pdf-viewer>

<!--    <ngx-extended-pdf-viewer [src]="'{{selectedFile}}'"></ngx-extended-pdf-viewer>-->

  </div>
</p-dialog>
