<p-drawer #drawerRef position="right" [(visible)]="visible">
  <ng-template #headless>
    <div class="flex flex-col h-full">
      <div class="flex items-center justify-between px-6 pt-4 shrink-0">
        <div class="flex flex-col gap-2">
          <span class="font-semibold text-xl text-primary">{{ posInfo()?.name }}</span>
          <span class="font-medium text-md text-muted-color">
            {{ posInfo()?.businessActivity?.name }} - {{ posInfo()?.complex?.name }}
          </span>
        </div>
        <span>
          <p-button type="button" (click)="drawerRef.close($event)" icon="pi pi-times" outlined="true"></p-button>
        </span>
      </div>
      <hr class="mt-4 mx-4 border-b border-0 border-surface" />

      <div class="overflow-y-auto">
        <ul class="list-none p-4 m-0">
          @for (menuItem of menuItems; track $index) {
            <li>
              <a
                pRipple
                [routerLink]="menuItem.routerLink"
                (click)="drawerRef.close($event)"
                class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 duration-150 transition-colors p-ripple"
              >
                <i class="{{ menuItem.icon }} me-2"></i>
                <span class="font-medium">{{ menuItem.label }}</span>
              </a>
            </li>
          }
        </ul>
      </div>
      <div class="mt-auto">
        <hr class="mb-4 mx-4 border-t border-0 border-surface" />
        @if (isPwaBuild) {
          <div class="px-6 pb-6 text-sm text-muted-color">
            نسخه برنامه : <span class="font-semibold">{{ appVersion }}</span>
          </div>
        }
      </div>
    </div>
  </ng-template>
</p-drawer>
