{{/*
    User Menu Component — reusable user avatar + flyout dropdown.
    Usage: {{template "user-menu" dict "ID" ""}}
    With empty ID, generates existing IDs: userMenuBtn, userAvatar, etc.
    With prefix: {{template "user-menu" dict "ID" "editor"}} → editorUserMenuBtn, etc.
    UserMenu.create() in user-menu.js binds to these IDs.
*/}}
{{define "user-menu"}}
<div class="user-menu-wrap" id="{{.ID}}userMenuWrap">
    <button id="{{.ID}}userMenuBtn" class="user-btn">
        <div id="{{.ID}}userAvatar" class="user-avatar">
            <span id="{{.ID}}avatarLetter">?</span>
        </div>
        <span id="{{.ID}}userName" class="sb-label">User</span>
    </button>
    <div id="{{.ID}}userFlyout" class="sw-menu-flyout" data-position="up">
        <button id="{{.ID}}menuSettings" class="flyout-item">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.32 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
            <span>Settings</span>
        </button>
        <button id="{{.ID}}menuAdmin" class="flyout-item" style="display:none;">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            <span>Admin</span>
        </button>
        <button id="{{.ID}}menuTeamAdmin" class="flyout-item" style="display:none;">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            <span>Team Admin</span>
        </button>
        <button id="{{.ID}}menuDebug" class="flyout-item" style="display:none;">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/><path d="M12 6V12L16 14"/></svg>
            <span>Debug Log</span>
        </button>
        <hr class="flyout-divider">
        <button id="{{.ID}}menuSignout" class="flyout-item flyout-danger">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
            <span>Sign Out</span>
        </button>
    </div>
</div>
{{end}}