import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { StyleClassModule } from 'primeng/styleclass';
import { AppSidebar } from './app.sidebar';
import { AppTopbar } from './app.topbar';

@Component({
  selector: 'app-layout',
  standalone: true,
  imports: [
    CommonModule,
    AppSidebar,
    AppTopbar,
    RouterModule,
    StyleClassModule,
  ],
  template: `<div class="min-h-screen flex bg-surface-50 dark:bg-surface-950">
    <app-sidebar></app-sidebar>
    <div
      class="min-h-screen flex flex-col relative flex-auto w-full overflow-auto"
    >
      <app-topbar></app-topbar>
      <div class="p-5 flex flex-col flex-auto">
        <div
          class="p-5 border-2 border-dashed border-surface rounded-border bg-surface-0 dark:bg-surface-950 flex-auto overflow-x-auto"
        >
          <router-outlet></router-outlet>
        </div>
      </div>
    </div>
  </div>`,
})
export class AppLayout {
  constructor() {}
}
