/// Shared header chrome for typed form views (login, secure-note, identity, card,
/// key, totp, document). Renders the title row plus a fullscreen-only "esc to
/// cancel" subtitle. Use the existing `${...}` template-literal interpolation
/// at call sites: `${renderFormHeader({ titleText: 'new login' })}`.
///
/// item-form.ts (the type-selection screen) uses a different header structure
/// and does NOT consume this helper.

import { isInTab } from '../../shared/state';

export interface FormHeaderOpts {
  titleText: string;
}

export function renderFormHeader(opts: FormHeaderOpts): string {
  return `
      <div class="form-header">
        <div class="detail-title">${opts.titleText}</div>
        <span style="flex:1;"></span>
        ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
      </div>
      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : ''}
    `;
}
