<div class="card p-pt-6 p-pl-6 p-pr-6">
   <h2> Add resource</h2>
   <div class="p-fluid">
     <div class="p-field p-grid">
       <label for="title" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Title</label>
       <div class="p-col-12 p-md-10">
         <input id="title" type="text" pInputText [(ngModel)]="resource.resourceName">
       </div>
     </div>
     <div class="p-field p-grid">
       <label for="description" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Description</label>
       <div class="p-col-12 p-md-10">
         <textarea id="description" type="text" rows="4" pInputTextarea [(ngModel)]="resource.description"></textarea>
       </div>
     </div>
     <div class="p-field p-grid">
       <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Sectors</label>
       <div class="p-col-12 p-md-10">
         <p-multiSelect defaultLabel="Select sector" [options]="sectors" optionLabel="name" [(ngModel)]="resource.sectors">       </p-multiSelect>
       </div>
     </div>
     <div class="p-field p-grid">
       <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Regions</label>
       <div class="p-col-12 p-md-10">
         <p-multiSelect defaultLabel="Select region" [options]="regions" optionLabel="name" [(ngModel)]="resource.regions"></p-multiSelect>
       </div>
     </div>
     <div class="p-field p-grid">
       <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Relaevant pests</label>
       <div class="p-col-12 p-md-10">
         <p-multiSelect defaultLabel="Select pests" [options]="pests" optionLabel="name" [(ngModel)]="resource.pests"></p-multiSelect>
       </div>
     </div>
     <div class="p-field p-grid">
       <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Relevant crops</label>
       <div class="p-col-12 p-md-10">
         <p-multiSelect defaultLabel="Select crops" [options]="crops" optionLabel="name" [(ngModel)]="resource.crops"></p-multiSelect>
       </div>
     </div>
     <div class="p-field p-grid">
       <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Relevant project</label>
       <div class="p-col-12 p-md-10">
         <p-dropdown [options]="projects" optionLabel="name" placeholder="Select project" [(ngModel)]="resource.project"></p-dropdown>
       </div>
     </div>
     <div class="p-field p-grid">
       <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Resource type</label>
       <div class="p-col-12 p-md-10">
         <p-dropdown [options]="resourceTypes" optionLabel="name" placeholder="Select resource type" [(ngModel)]="resource.resourceType"></p-dropdown>
       </div>
     </div>
     <div class="p-field p-grid">
       <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Language</label>
       <div class="p-col-12 p-md-10">
         <p-dropdown [options]="languages" optionLabel="name" placeholder="Select language" [(ngModel)]="resource.language"></p-dropdown>
       </div>
     </div>
     <div class="p-field p-grid">
       <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Keywords</label>
       <div class="p-col-12 p-md-10">
         <p-chips [(ngModel)]="resource.keywordsTemp" [max]=5 placeholder="Enter keywords" [allowDuplicate]=false></p-chips>
       </div>
     </div>
     <div class="p-field p-grid">
       <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Upload image</label>
       <div class="p-col-12 p-md-10">
         <p-fileUpload name="image" [maxFileSize]=5242880 [auto]=true [showUploadButton]=false [customUpload]=true (uploadHandler)="fileUploader('image',$event)"></p-fileUpload>

       </div>
     </div>
       <div class="p-field p-grid">
         <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Upload resource content</label>
         <div class="p-col-12 p-md-10">
           <p-fileUpload name="resources"  [multiple]=true [fileLimit]=5  [maxFileSize]=5242880 [auto]=true [showUploadButton]=false [customUpload]=true (uploadHandler)="fileUploader('content',$event)"></p-fileUpload>
         </div>
     </div>
     <div class="p-field p-grid">
       <label class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Links</label>
       <div class="p-col-12 p-md-10">
         <p-chips [(ngModel)]="resource.links" [max]=5 placeholder="Enter relevant links" [allowDuplicate]=false></p-chips>
       </div>
     </div>
     <div class="p-field p-grid">
       <label for="source" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Original source</label>
       <div class="p-col-12 p-md-10">
         <input id="source" type="text" pInputText [(ngModel)]="resource.resourceOrigin">
       </div>
     </div>
     <div class="p-field p-grid">
       <label for="citation" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Citation</label>
       <div class="p-col-12 p-md-10">
         <input id="citation" type="text" pInputText [(ngModel)]="resource.citation">
       </div>
     </div>
     <div class="p-field p-grid">
       <label for="contactOrg" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Contact institution</label>
       <div class="p-col-12 p-md-10">
         <input id="contactOrg" type="text" pInputText [(ngModel)]="resource.contactInstitution">
       </div>
     </div>
       <div class="p-field p-grid">
         <label for="contactName" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Contact name</label>
         <div class="p-col-12 p-md-10">
           <input id="contactName" type="text" pInputText [(ngModel)]="resource.contactName">
         </div>
       </div>
     <div class="p-field p-grid">
       <label for="contactEmail" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Contact email</label>
       <div class="p-col-12 p-md-10">
         <input id="contactEmail" type="text" pInputText [(ngModel)]="resource.contactEmail">
       </div>
     </div>
     <div class="p-field p-grid">
       <label for="contactPhone" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Contact phone</label>
       <div class="p-col-12 p-md-10">
         <input id="contactPhone" type="text" pInputText [(ngModel)]="resource.contactPhone">
       </div>
     </div>
   </div>
   <div class="p-col-12 p-pt-3 button-center">
     <p-button  label="Save resource" icon="pi pi-save"[loading]="false" (click)="saveResource()"></p-button>
   </div>
 </div>
 <p-toast></p-toast>