<div class="shadow-2xl rounded p-2 mt-2">
<h3>Family Tree </h3>
<div>
    <label>link from partner and Father and Mother Id</label>
<div >
    <!--this styleclass all logic in api one not here. background color -->
    <!--the treeNode.Data has treeData image and sex-->
    <!--image is 64 string so to show 'data:image/png;base64,'imageStr' here -->
    <!-- selectionMode="multiple" [(selection)]="selectedNodes" -->
    <p-organization-chart [value]="familyTree()" [collapsible]="true">
        <ng-template let-node pTemplate="default">
            <div class="flex flex-col items-center">
                @if (node.data.image != "")
                {
                  <img [src]= "node.data.image" class="mb-2 w-12 h-12 rounded-full " />
                }
                <!--img src="https://primefaces.org/cdn/primeng/images/flag/flag_placeholder.png" [alt]="node.label" [class]="'flag' + ' flag-' + node.data" width="32" /-->
                <div class="mt-2 font-medium text-lg">{{ node.label }}</div>
                <div>{{ node.data.sex }} </div>
            </div>
        </ng-template>
    </p-organization-chart>
</div>
<div class="flex justify-end">
        <button pButton pRipple class="p-button-sm mr-2 p-button-success" type="button" icon="pi pi-sign-in" label="Close"
          (click)="close()"></button>
  </div>
</div>
  
