<header class="app-header">
  <div class="header-left">
    <button
      *ngIf="showBack"
      class="btn btn-secondary btn-back"
      type="button"
      (click)="back.emit()"
    >
      <span class="btn-icon" aria-hidden="true">&larr;</span>
      {{ backLabel }}
    </button>
    <img *ngIf="showLogo" [src]="logoSrc" [alt]="logoAlt" class="header-logo" />
    <div class="header-text">
      <h1>{{ title }}</h1>
      <p *ngIf="subtitle" class="header-subtitle">{{ subtitle }}</p>
    </div>
  </div>
  <div class="header-right">
    <div class="user-info" *ngIf="showUserInfo">
      <span class="user-name">{{ userName }}</span>
      <span class="user-role">{{ userRole }}</span>
    </div>
    <span class="badge-saludut" *ngIf="badgeText">{{ badgeText }}</span>
    <button
      *ngIf="showThemeToggle"
      class="btn btn-ghost theme-toggle"
      type="button"
      (click)="toggleTheme()"
    >
      {{ isDark ? 'Modo claro' : 'Modo oscuro' }}
    </button>
    <button
      *ngIf="showLogout"
      class="btn btn-ghost"
      type="button"
      (click)="logout.emit()"
    >
      {{ logoutLabel }}
    </button>
  </div>
</header>
