<div class="flex items-center justify-center min-h-screen overflow-hidden">
  <div class="flex flex-col items-center justify-center">
    <div class="mb-10 flex flex-col gap-5 items-center">
      <img [src]="logo" width="80" />
      <span class="text-2xl font-semibold text-surface-900 dark:text-surface-0">مدیریت صورت‌حساب‌های مالیاتی</span>
    </div>
    <div
      style="
        border-radius: 56px;
        padding: 0.3rem;
        background: linear-gradient(
          180deg,
          color-mix(in srgb, var(--primary-color), transparent 60%) 10%,
          var(--surface-ground) 30%
        );
      "
    >
      <div
        class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center"
        style="border-radius: 53px"
      >
        <span class="text-primary font-bold text-3xl">404</span>
        <h1 class="text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2">صفحه مورد نظر یافت نشد</h1>
        <div class="text-surface-600 dark:text-surface-200 mb-8">
          متاسفانه صفحه ای که به دنبال آن هستید وجود ندارد یا ممکن است حذف شده باشد.
        </div>
        <div class="mb-10">
          @for (item of notFoundListItems; track item) {
            <a
              [routerLink]="item.link"
              class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b"
            >
              <span
                class="flex justify-center items-center border-2 border-primary text-primary rounded-border"
                style="height: 3.5rem; width: 3.5rem"
              >
                <i class="pi pi-fw {{ item.icon }} text-2xl!"></i>
              </span>
              <span class="ms-6 flex flex-col">
                <span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block">{{
                  item.title
                }}</span>
                <span class="text-surface-600 dark:text-surface-200 lg:text-xl"> {{ item.description }} </span>
              </span>
            </a>
          }
        </div>
        <p-button label="بازگشت به پنل کاربری" routerLink="/" />
      </div>
    </div>
  </div>
</div>
