<div [ngClass]="{'mini-sidebar': layoutMode === '2' || sidebarSize==='2'|| layoutMode==='13'|| miniSidebar === true || layoutWidth !== '1',
  'menu-horizontal': layoutMode === '3' || layoutMode === '4' || layoutMode === '8'|| layoutMode === '14'|| layoutMode === '15',
  'layout-box-mode':layoutWidth === '2','expand-menu':sidebarSize==='3' || expandMenu === true && miniSidebar === true,
  'slide-nav': mobileSidebar === true
 }" style="--primary-rgb-picr : {{dthemeColor}}; --sidebar--rgb-picr : {{selectedColor}}; --topbar--rgb-picr : {{selectedColor1}};  --topbarcolor--rgb-picr : {{horizontalColor}};" [class.header-collapse]="isCollapsed">
@if (showPreloader && !withoutWrapperPages) {
  <div id="global-loader">
    <span class="page-loader"></span>
  </div>
}
  <div class="main-wrapper ">
    @if(!withoutWrapperPages) {
      <app-default-header></app-default-header>
      <app-default-sidebar></app-default-sidebar>
      <app-stacked-sidebar></app-stacked-sidebar>
      <app-two-col-sidebar></app-two-col-sidebar>
      <app-horizontal-sidebar></app-horizontal-sidebar>
      }
  <router-outlet></router-outlet>
  @if(!withoutWrapperPages && !withoutLayouts ) {
  <app-theme-settings></app-theme-settings>
  }
  </div>
</div>

<div [ngStyle]="{'display':mobileSidebar? 'block' : 'none'}" class="sidebar-overlay opened"></div>
<!-- Delete Modal -->
<div class="modal fade" id="delete_modal">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-body text-center">
        <span class="avatar avatar-xl bg-transparent-danger text-danger mb-3">
          <i class="ti ti-trash-x fs-36"></i>
        </span>
        <h4 class="mb-1">Confirm Delete</h4>
        <p class="mb-3">You want to delete all the marked items, this cant be undone once you delete.</p>
        <div class="d-flex justify-content-center">
          <a href="javascript:void(0);" class="btn btn-light me-3" data-bs-dismiss="modal">Cancel</a>
          <a href="javascript:void(0);" class="btn btn-danger" data-bs-dismiss="modal">Yes, Delete</a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /Delete Modal -->