<div class=" mt-2">
   
    <form [formGroup]="adminuserForm" (ngSubmit)="onSubmit($event)" >        
        <div class="ml-2 grid md:grid-cols-2 gap-3 p-2">  
            <div>
                <div class="">
                    <label for="lastname1">Surname<strong class="app-require">*</strong></label>
                    <input id="lastname1" pInputText formControlName="lastname" type="text" [pAutoFocus]="true"
                        [class]="getClassForRequire('inputfield w-full p-inputtext-sm','lastname')">
                </div>
                <div class="">
                    <label for="firstname">First Name<strong class="app-require">*</strong></label>
                    <input id="firstname" pInputText formControlName="firstname" type="text"
                        [class]="getClassForRequire('inputfield w-full p-inputtext-sm','firstname')">
                </div>
            </div>      
            <!--put here photo of person-->
            <div class="flex flex-row gap-2">
                <div>
                <div class="">
                    <label for="dob" class="flex w-full">DOB</label>               
                    <p-datepicker  ariaLabelledBy="dob" formControlName="dob" [iconDisplay]="'input'" [showIcon]="true"
                     dateFormat="dd/mm/yy" ></p-datepicker>
                </div>
                <div class="">
                    <label class="flex w-full">Sex <strong class="app-require">*</strong></label>
                    <p-select  [options]="sexList" optionLabel="name" optionValue="status" placeholder="Select Gender"
                        formControlName="sex" 
                        [class]="getClassForRequire('inputfield w-full p-inputtext-sm','sex')" 
                        class="w-full p-inputtext-sm mr-1"></p-select >
                </div>
                </div>
                <div class="flex flex-row shadow-md rounded-xl border-gray-100 border-1 p-4">         
                    <!--a href="{{hostsite}}/{{adminuserForm.value.image}}" target="_blank" class="text-blue-400">View Attachment
                    </a-->
                    <input type="file" class="file-input hidden" (change)="onFileSelected($event)" #fileUpload>
                    @if (adminuserForm.value.image != "" && adminuserForm.value.image != null)
                    {
                        <img id="blah" [src]= "dislayImage()" alt="your image" 
                        class="profilePhotoWH profilePhotoBorder" (click)="doViewImage(adminuserForm.value.image)" />
                       
                    }
                    @else
                    {
                        <div class="file-upload profilePhotoBorder profilePhotoWH text-center flex justify-center items-center ">
                            <label class="">{{ adminuserForm.value.image || "No Profile Photo."}}</label>
                        </div>
                    }
                    <div class="flex flex-col gap-2">
                        @if (adminuserForm.value.image != "" && adminuserForm.value.image != null)
                        {
                        <button pButton type="button" icon="pi pi-times" pTooltip="remove profile photo"
                                class="p-button-rounded p-button-text text-red-500 p-button-raised ml-2"
                                (click)="deleteFile()"></button>
                        }
                        <button pButton type="button" icon="pi pi-paperclip"
                                    class="self-end p-button-rounded p-button-text p-button-raised ml-2" pTooltip="load photo"
                                (click)="fileUpload.click()"></button> 
                    </div>
                
                </div>
            </div>
                
            <!---->   
             
           
            <div class="">
                <label for="login">Email</label>
                <input id="login" [attr.disabled]="!isNew?true:null" pInputText formControlName="email"
                    type="text" class="inputfield w-full">
            </div>
            <div class="">
                <label for="phone" class="w-full">Phone</label>
                <input class="w-full" id="phone" pInputText formControlName="phone" type="text" >
            </div>
            <div class="">
                <label class="flex w-full">Father</label>
                <p-select [filter]="true" [showClear]="true" filterBy="name" [options]="fatherList" optionLabel="name" appendTo="body" optionValue="id" placeholder="Select Parent"
                    formControlName="fatherId" class="w-full p-inputtext-sm mr-1"></p-select >
            </div>
             <div class="">
                <label class="flex w-full">Mother</label>
                <p-select  [options]="motherList" [showClear]="true" [filter]="true" filterBy="name" optionLabel="name" appendTo="body" optionValue="id" placeholder="Select Parent"
                    formControlName="motherId" class="w-full p-inputtext-sm mr-1"></p-select >
            </div>
           
            <div class="grid align-end">
                <div class="p-field-checkbox">
                    <p-checkbox inputId="alive" formControlName="alive" [binary]="true"></p-checkbox>
                    <label for="alive" class="ml-2 w-full">Alive</label>
                </div>
            </div>
        </div>     
         <div class="mt-2 w-full">       
            <div class="flex flex-row justify-between">
            <p-button icon="pi pi-images" [raised]="true"
                badge="{{photoList.length}}"
                severity="success" label="Attach Photos" 
                        (onClick)="viewAttachment()"/>    
            <p-button icon="pi pi-user" [raised]="true" severity="info" label="Add Partner" 
                        (onClick)="addPartner()"/>
           </div>
            <div class="shadow rounded mt-2 mb-2">
                <p-table [value]="partners()">
                    <ng-template #header>
                        <tr>    
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Sex</th>
                            <th>Action</th>
                        </tr>
                    </ng-template>
                    <ng-template #body let-user>
                        <tr>
                            <td>{{ user.pfirstName }}</td>
                            <td>{{ user.plastName }}</td>
                            <td>{{ user.sex }}</td>
                            <td>
                                <button pButton type="button" icon="pi pi-times" class="p-button-rounded p-button-text p-button-danger" 
                                    (click)="onDeletePartner(user)"></button>
                            </td>
                        </tr>
                    </ng-template>
                </p-table>
            </div>
        </div>

        <div class="flex justify-end mr-2 mb-2 p-2">          
            <button pButton type="submit" class="p-button-sm mr-2" icon="pi pi-check"  label="Save" [disabled]="isFieldsChange"></button>            
            <button pButton pRipple class="p-button-sm p-button-secondary" type="button" icon="pi pi-times"  label="Cancel" (click)="cancel($event)"></button>
        </div>
    </form>
    <!--pre>{{ adminuserForm.value|json}}</pre-->
</div>