<div class="w-full border-t border-border bg-card/50 px-1 py-2">
  @if (user()) {
    <div class="flex flex-col items-center gap-1 text-xs">
      <button
        #avatarBtn
        type="button"
        class="rounded-full transition-opacity hover:opacity-90"
        (click)="toggleProfileCard(avatarBtn)"
      >
        <app-user-avatar
          [name]="user()!.displayName"
          [avatarUrl]="user()!.avatarUrl"
          size="sm"
          [status]="user()!.status"
          [showStatusBadge]="true"
        />
      </button>
    </div>
  } @else {
    <div class="flex flex-col items-center gap-1">
      <button
        type="button"
        (click)="goto('login')"
        class="w-full px-1 py-1 text-[10px] rounded bg-secondary hover:bg-secondary/80 flex items-center justify-center gap-1"
      >
        <ng-icon
          name="lucideLogIn"
          class="w-3 h-3"
        />
        {{ 'auth.userBar.login' | translate }}
      </button>
      <button
        type="button"
        (click)="goto('register')"
        class="w-full px-1 py-1 text-[10px] rounded bg-primary text-primary-foreground hover:bg-primary/90 flex items-center justify-center gap-1"
      >
        <ng-icon
          name="lucideUserPlus"
          class="w-3 h-3"
        />
        {{ 'auth.userBar.register' | translate }}
      </button>
    </div>
  }
</div>
