lami/src/app/shared/components/page-header/page-header.component.html

<div class="grid grid-cols-[1fr_auto_1fr] items-center gap-4 px-6 py-4 border-b border-surface-200 dark:border-surface-300 bg-white dark:bg-surface-100">
  <div class="flex items-center gap-3 min-w-0">
    @if (icon) {
      <div class="w-9 h-9 rounded-lg bg-primary-50 dark:bg-primary-50/20 text-primary-600 dark:text-primary-400 flex items-center justify-center shrink-0">
        <fa-icon [icon]="icon" size="lg" />
      </div>
    }
    <div class="min-w-0">
      <h1 class="text-lg font-bold text-surface-900 dark:text-surface-900">{{ title }}</h1>
      @if (subtitle) {
        <p class="text-sm text-surface-500 dark:text-surface-500 mt-0.5 truncate">{{ subtitle }}</p>
      }
    </div>
  </div>
  <div class="justify-self-center">
    <ng-content select="[headerCenter]" />
  </div>
  <div class="flex items-center gap-3 justify-self-end">
    <ng-content select="[headerActions]" />
    @if (showAction && actionLabel) {
      <button
        (click)="action.emit()"
        class="inline-flex items-center gap-2 px-4 py-2 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors"
      >
        @if (actionIcon) {
          <fa-icon [icon]="actionIcon" size="sm" />
        }
        {{ actionLabel }}
      </button>
    }
  </div>
</div>