<div class="shadow-2xl rounded p-2 mt-2">
<h3>Family Tree by Person has Father</h3>
<div>
  <form>
    <div class="grid grid-cols-12 gap-2">
      <div class="flex items-center">
        <p-checkbox inputId="isFather" [binary]="true" name="isFather" [(ngModel)]="isFather" />
        <label for="isFather" class="ml-2"> Is Father </label>
      </div> 
      <div class="flex items-end">
        <button pButton pRipple class="p-button-sm mr-2 " type="submit" icon="pi pi-sitemap" label="Load"
          (click)="load()"></button>
       </div> 
    </div>
  </form>
</div>
<div>
  <p-tree [value]="familyTree" class="w-full md:w-[30rem]" 
   (onNodeDoubleClick)="nodeDoubleSelect($event)"
   selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="nodeSelect($event)" />
<!--div class="card flex justify-center overflow-x-auto">
    <p-organization-chart [value]="familyTree" selectionMode="multiple" [(selection)]="selectedNodes" [collapsible]="true">
        <ng-template let-node pTemplate="person">
            <div class="flex flex-col">
                <div class="flex flex-col items-center">
                    <img [src]="node.data.image" class="mb-4 w-12 h-12" />
                    <div class="font-bold mb-2">{{ node.data.name }}</div>
                    <div>{{ node.data.title }}</div>
                </div>
            </div>
        </ng-template>
    </p-organization-chart>
</div-->
</div>
  
