<app-switcher />
<app-loader />
<div class="page">
  <app-header />
  <app-sidebar appHoverEffectSidebar />
  <div class="content">
    <div class="main-content" (click)="clickOnBody()">

         <app-page-header />
          <router-outlet />

    </div>
  </div>
  <app-footer />
  <app-tab-to-top />

</div>
<div #responsiveoverlay id="responsive-overlay" (click)="clearToggle()"></div>

@if (sessionTimeoutService.showWarning()) {
  <div
    class="hs-overlay ti-modal mt-[1.75rem] hs-overlay-backdrop-open:!bg-[#32325180] dark:hs-overlay-backdrop-open:!bg-[#323251cc] pointer-events-none !block">
    <div class="ti-modal-box pointer-events-auto">
      <div class="ti-modal-content !border !border-defaultborder dark:!border-defaultborder/10 !rounded-[0.5rem]">
        <div class="ti-modal-body !p-[1.5rem]">
          <div class="flex items-start gap-4">
            <span class="!w-[3rem] !h-[3rem] !leading-[3rem] rounded-[50%] avatar bg-warning/10 !text-warning text-center">
              <i class="fe fe-alert-triangle text-[1.125rem]"></i>
            </span>
            <div>
              <p class="text-[1rem] font-semibold text-defaulttextcolor dark:text-defaulttextcolor/70 mb-2">Session Expiring Soon</p>
              <p class="text-[#8c9097] dark:text-white/50 text-[0.875rem] mb-0">
                You have been inactive. You will be signed out in {{ sessionTimeoutService.remainingSeconds() }} seconds unless you continue your session.
              </p>
            </div>
          </div>
        </div>
        <div class="ti-modal-footer !border !border-defaultborder dark:!border-defaultborder/10 !py-[1rem] !px-[1.25rem] justify-end gap-2">
          <button type="button" class="ti-btn ti-btn-light" (click)="sessionTimeoutService.logoutNow()">Log Out</button>
          <button type="button" class="ti-btn ti-btn-primary-full" (click)="sessionTimeoutService.staySignedIn()">Stay Signed In</button>
        </div>
      </div>
    </div>
  </div>
}

