<div class="card pt-6 pl-6 pr-6">
<p *ngIf="(!edit)" class="text-3xl"> Add resource</p>
<p *ngIf="(edit)" class="text-3xl"> Edit resource</p>
<form #resourceForm="ngForm" (ngSubmit)="saveResource()">
<div class="p-fluid">
<div class="field grid">
<label for="title" class="col-12 mb-2 md:col-2 md:mb-0">Short description</label>
<div class="col-12 md:col-10">
<input id="title" name="title" #title='ngModel' type="text" pInputText [(ngModel)]="resource.resourceName" required [ngClass]="!title.valid ? 'ng-invalid ng-dirty' : ''">
<div [hidden]="title.valid" class="text-xs p-error ">
Short description is required
</div>
</div>
</div>
<div class="field grid">
<label for="description" class="col-12 mb-2 md:col-2 md:mb-0">Long description (in English, 500 words)</label>
<div class="col-12 md:col-10">
<textarea id="description" name="description" #description='ngModel' type="text" rows="4" pInputTextarea [(ngModel)]="resource.description" required [ngClass]="!description.valid ? 'ng-invalid ng-dirty' : ''"></textarea>
<div [hidden]="description.valid" class="text-xs p-error">
Long description is required
</div>
</div>
</div>
<div class="field grid">
<label for="description" class="col-12 mb-2 md:col-2 md:mb-0">Long description (in native language, if not English, 500 words)</label>
<div class="col-12 md:col-10">
<textarea id="descriptionNative" name="descriptionNative" type="text" rows="4" pInputTextarea [(ngModel)]="resource.descriptionNative"></textarea>
</div>
</div>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Sectors</label>
<div class="col-12 md:col-10">
<p-multiSelect name="sector" #sector='ngModel' required defaultLabel="Select sector" [options]="sectors" optionLabel="name" [(ngModel)]="resource.sectors" [ngClass]="!sector.valid? 'ng-invalid ng-dirty' : ''" >
</p-multiSelect>
<div [hidden]="sector.valid" class="text-xs p-error">
Sector is required
</div>
</div>
</div>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Country of origin</label>
<div class="col-12 md:col-10">
<p-multiSelect name="region" #region='ngModel' required defaultLabel="Select region" [options]="regions" optionLabel="name" [(ngModel)]="resource.regions" [ngClass]="!region.valid? 'ng-invalid ng-dirty' : ''"></p-multiSelect>
<div [hidden]="region.valid" class="text-xs p-error">
Country of origin is required
</div>
</div>
</div>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Relevant pests
<i class="pl-3 pi pi-question-circle" pBadge pTooltip="You can enter common English name, Latin name or EPPO to select pest. Choose Other to add new pest."></i>
</label>
<div class="col-12 md:col-10">
<p-multiSelect name="pests" defaultLabel="Select pests" [options]="pests" optionLabel="commonName" filterBy="commonName,latinName,eppo" [(ngModel)]="resource.pests" (onChange)="openPestModal()">
<ng-template let-pest pTemplate="item">
<div>{{pest.commonName}} <i *ngIf="pest.latinName !=undefined">
({{pest.latinName}}, {{pest.eppo}})</i></div>
</ng-template>
</p-multiSelect>
</div>
</div>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Relevant crops
<i class="pl-3 pi pi-question-circle" pBadge pTooltip="You can enter common English name, Latin name or EPPO to select crop. Choose Other to add new crop."></i>
</label>
<div class="col-12 md:col-10">
<p-multiSelect name="crops" defaultLabel="Select crops" [options]="crops" optionLabel="commonName" filterBy="commonName,latinName,eppo" [(ngModel)]="resource.crops" (onChange)="openCropModal()">
<ng-template let-crop pTemplate="item">
<div>{{crop.commonName}} <i *ngIf="crop.latinName !=undefined">
({{crop.latinName}}, {{crop.eppo}})</i></div>
</ng-template>
</p-multiSelect>
</div>
</div>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Relevant project title</label>
<div class="col-12 md:col-10">
<input id="project" name="project" type="text" pInputText [(ngModel)]="resource.project">
</div>
</div>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Link to project website</label>
<div class="col-12 md:col-10">
<input id="projectWeb" name="projectWeb" type="text" pInputText [(ngModel)]="resource.projectWeb">
</div>
</div>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">If an EU project, add grant code</label>
<div class="col-12 md:col-10">
<input id="projectGrantNo" name="projectGrantNo" type="text" pInputText [(ngModel)]="resource.projectGrantNo">
</div>
</div>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Resource type</label>
<div class="col-12 md:col-10">
<p-dropdown [options]="resourceTypes" [required]="true" #resourceType='ngModel' name="resourceTypes" optionLabel="name" placeholder="Select resource type" [(ngModel)]="resource.resourceType" [ngClass]="!resourceType.valid ? 'ng-invalid ng-dirty' : ''"></p-dropdown>
<div [hidden]="resourceType.valid" class="text-xs p-error">
Resource type is required
</div>
</div>
</div>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Language</label>
<div class="col-12 md:col-10">
<p-dropdown [options]="languages" optionLabel="name" name="languages" placeholder="Select language" [(ngModel)]="resource.language"></p-dropdown>
</div>
</div>
<div *ngIf="logoExist" class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Project logo</label>
<div class="col-12 md:col-10">
<p-fileUpload name="logo" (onRemove) = removeLogo() [maxFileSize]=5242880 chooseLabel="Change project logo" (onSelect)=hideOldLogo() [previewWidth]=250 [auto]=true accept="image/*" [showUploadButton]=false [customUpload]=true (uploadHandler)="fileUploader('logo',$event)">
<ng-template pTemplate="content" let-files >
<p-image [src]="imagePath+'/'+resource.idResource+'/logo'" *ngIf="showOldLogo" [preview]="true" width="250"></p-image>
</ng-template>
</p-fileUpload>
</div>
</div>
<div class="field grid" *ngIf="!edit || !logoExist">
<label class="col-12 mb-2 md:col-2 md:mb-0">Upload project logo</label>
<div class="col-12 md:col-10">
<p-fileUpload name="logo" [previewWidth]=250 [auto]=true accept="image/*" [maxFileSize]=5242880 [auto]=true [showUploadButton]=false [customUpload]=true (uploadHandler)="fileUploader('logo',$event)"></p-fileUpload>
</div>
</div>
<div *ngIf="imageExist" class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Uploaded image</label>
<div class="col-12 md:col-10">
<p-fileUpload name="image" (onRemove) = removeImage() [maxFileSize]=5242880 chooseLabel="Change image" (onSelect)=hideOldImage() [previewWidth]=250 [auto]=true accept="image/*" [showUploadButton]=false [customUpload]=true (uploadHandler)="fileUploader('image',$event)">
<ng-template pTemplate="content" let-files >
<p-image [src]="imagePath+'/'+resource.idResource+'/image'" *ngIf="showOldImg" [preview]="true" width="250"></p-image>
</ng-template>
</p-fileUpload>
</div>
</div>
<div class="field grid" *ngIf="!edit || !imageExist">
<label class="col-12 mb-2 md:col-2 md:mb-0">Upload image</label>
<div class="col-12 md:col-10">
<p-fileUpload name="image" [previewWidth]=250 [auto]=true accept="image/*" [maxFileSize]=5242880 [auto]=true [showUploadButton]=false [customUpload]=true (uploadHandler)="fileUploader('image',$event)"></p-fileUpload>
</div>
</div>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Upload resource content</label>
<div class="col-12 md:col-10">
<p-fileUpload name="resources" required [multiple]=true [fileLimit]=5 [maxFileSize]=5242880 [auto]=true [showUploadButton]=false [customUpload]=true (uploadHandler)="fileUploader('content',$event)"></p-fileUpload>
</div>
</div>
<div class="field grid">
<label for="source" class="col-12 mb-2 md:col-2 md:mb-0">Original website address </label>
<div class="col-12 md:col-10">
<input id="source" type="text" name="source" pInputText [(ngModel)]="resource.resourceOrigin">
</div>
</div>
<div class="field grid">
<label for="citation" class="col-12 mb-2 md:col-2 md:mb-0">DOI</label>
<div class="col-12 md:col-10">
<input id="citation" name="citation" type="text" pInputText [(ngModel)]="resource.citation">
</div>
</div>
<div class="field grid">
<label class="col-12 mb-2 md:col-2 md:mb-0">Up to 5 links to further reading</label>
<div class="col-12 md:col-10">
<p-chips [(ngModel)]="resource.links" name="links" [max]=5 placeholder="Enter relevant links" [allowDuplicate]=false></p-chips>
</div>
</div>
<div class="field grid">
<label for="contactOrg" class="col-12 mb-2 md:col-2 md:mb-0">Contact institution</label>
<div class="col-12 md:col-10">
<input id="contactOrg" name="contactOrg" type="text" pInputText [(ngModel)]="resource.contactInstitution">
</div>
</div>
<!-- <div class="field grid">
<label for="contactName" class="col-12 mb-2 md:col-2 md:mb-0">Contact name</label>
<div class="col-12 md:col-10">
<input id="contactName" type="text" pInputText [(ngModel)]="resource.contactName">
</div>
</div>-->
<div class="field grid">
<label for="contactEmail" class="col-12 mb-2 md:col-2 md:mb-0">Contact email</label>
<div class="col-12 md:col-10">
<input id="contactEmail" name="contactEmail" type="text" pInputText [(ngModel)]="resource.contactEmail">
</div>
</div>
<div class="field grid">
<label for="contactPhone" class="col-12 mb-2 md:col-2 md:mb-0">Contact phone</label>
<div class="col-12 md:col-10">
<input id="contactPhone" name="contactPhone" type="text" pInputText [(ngModel)]="resource.contactPhone">
</div>
</div>
</div>
<div class="col-12 pt-3 justify-content-center flex" *ngIf="!edit">
<p-button label="Back" icon="pi pi-step-backward" class="pr-5"routerLink="/home" type="button" ></p-button>
<p-button label="Save resource" icon="pi pi-save" [loading]="false" type="submit" [disabled]="resourceForm.form.invalid"></p-button>
</div>
<div class="col-12 pt-3 justify-content-center flex" *ngIf="edit" >
<p-button label="Back" icon="pi pi-step-backward" class="pr-5"routerLink="/resource/{{resource.idResource}}" type="button" ></p-button>
<p-button label="Save resource" icon="pi pi-save" [loading]="false" type="submit" [disabled]="resourceForm.form.invalid"></p-button>
</div>
</form>
</div>
<p-toast></p-toast>
<p-dialog id="pestModal" header="Add new pest" [(visible)]="displayPestModal">
<div class="field">
<label>English common name</label>
<input id="commonName" type="text" pInputText [(ngModel)]="newPest.commonName"/>
</div>
<div class="field">
<label>Latin name</label>
<input id="latinName" type="text" pInputText [(ngModel)]="newPest.latinName"/>
</div>
<div class="field">
<label>EPPO</label>
<input id="eppo" type="text" pInputText [(ngModel)]="newPest.eppo" />
</div>
<div class="field button-center">
<button pButton type="button" class="p-button-help" label="Cancel" (click)="displayPestModal=false" ></button>
<button pButton type="button" class="p-pl-3" label="Submit" (click)="addPest()"></button>
</div>
</p-dialog>
<p-dialog id="cropModal" name="cropModal" header="Add new crop" [(visible)]="displayCropModal">
<div class="field">
<label>English common name</label>
<input id="commonNameCrop" type="text" pInputText [(ngModel)]="newCrop.commonName" />
</div>
<div class="field">
<label>Latin name</label>
<input id="latinNameCrop" type="text" pInputText [(ngModel)]="newCrop.latinName"/>
</div>
<div class="field">
<label>EPPO</label>
<input id="eppoCrop" type="text" pInputText [(ngModel)]="newCrop.eppo"/>
</div>
<div class="field button-center">
<button pButton type="button" class="p-button-help" label="Cancel" (click)="displayCropModal=false" ></button>
<button pButton type="button" class="p-pl-3" label="Submit" (click)="addCrop()" ></button>
</div>
</p-dialog>