{# Partial: _header.html.j2 — Unified header (both modes) #}
{# Implements: REQ-p00006-A, REQ-p00006-B, REQ-p00004-C, REQ-p00004-D #}
{# Search available in both modes; edit controls (toggle, save/revert) wrapped in mode conditionals #}

<header class="header">
    <div class="header-left">
        <h1 class="header-title">Elspais <span class="version-badge">v{{ version }}</span> <span class="repo-name-badge">{{ repo_name }}</span></h1>
        <div class="header-stats" id="header-stats">
            <span class="stat-badge prd" id="stat-prd" onclick="toggleEditLevelFilter('levelPrd')" title="Click to hide PRD requirements">PRD: --</span>
            <span class="stat-badge ops" id="stat-ops" onclick="toggleEditLevelFilter('levelOps')" title="Click to hide OPS requirements">OPS: --</span>
            <span class="stat-badge dev" id="stat-dev" onclick="toggleEditLevelFilter('levelDev')" title="Click to hide DEV requirements">DEV: --</span>
            <span class="stat-sep">|</span>
            <span class="stat-badge main" id="stat-main" onclick="toggleEditFilter('main')" title="Click to hide core requirements">Core: --</span>
            <span class="stat-sep">|</span>
            <span class="stat-badge tests" id="stat-tests" style="display:none;" title="Test count (from graph)">Tests: --</span>
            <span class="stat-badge results" id="stat-results" style="display:none;" title="Result count (from graph)">Results: --</span>
            <span class="stat-sep repo-sep" id="repo-sep" style="display:none;">|</span>
            <span id="repo-badges-container"></span>
            <span class="stat-sep">|</span>
            <button class="stat-badge filter-toggle-btn active" id="filter-toggle-btn" onclick="toggleToolbar()" title="Toggle filter bar"
                data-help="Show or hide the filter toolbar. Filters let you narrow the tree by level, status, or text search."><svg width="14" height="12" viewBox="0 0 14 12" fill="currentColor" style="vertical-align: middle;"><rect x="0" y="0" width="14" height="2" rx="1"/><rect x="2" y="5" width="10" height="2" rx="1"/><rect x="4" y="10" width="6" height="2" rx="1"/></svg></button>
        </div>
    </div>

    <div class="header-center">
        <div class="search-box" id="search-box">
            <input type="text" id="search-input" placeholder="Find requirement..." autocomplete="off" title="Search and navigate to a requirement">
            <div class="search-results" id="search-results"></div>
        </div>
    </div>

    <div class="header-right">
        {% if mode == 'edit' %}
        <span class="branch-badges" id="branch-badges">
            <span class="branch-badge" id="branch-badge" onclick="showBranchPickerModal()"
                  title="Click to switch branch" style="cursor: pointer;">
                <span class="branch-status-dot" id="branch-status-dot"></span>
                <span id="branch-name">...</span>
                <span class="branch-warning hidden" id="branch-warning"
                      title="Main has new commits since this branch was created. Use Sync to rebase before merging.">&#x26A0;</span>
            </span>
        </span>
        <button class="btn btn-sync hidden" id="btn-sync" onclick="doGitSync()"
                title="Sync: merge remote changes and rebase on main">&#x21bb; Sync</button>
        <button class="edit-toggle" id="edit-toggle" onclick="toggleEditMode()" title="Toggle edit mode"
                data-help="Enable or disable edit mode. When active, you can modify requirement titles, statuses, assertions, and relationships directly in the cards.">
            <span class="edit-toggle-indicator"></span>
            <span>Edit Mode</span>
        </button>

        <button class="btn" id="btn-undo" onclick="doUndo()" disabled title="Undo last change"
                data-help="Undo the most recent in-memory mutation. Mutations are not saved to disk until you click Save.">
            Undo
        </button>

        <button class="btn btn-primary" id="btn-save" onclick="doSave()" disabled title="Save mutations to disk"
                data-help="Persist all pending in-memory mutations to spec files on disk. The badge shows the number of unsaved changes.">
            Save
            <span class="unsaved-badge hidden" id="unsaved-badge">0</span>
        </button>

        <button class="btn btn-warning edit-only" id="btn-checkpoint" onclick="showCheckpointModal()" disabled
                title="Commit spec changes as a local checkpoint"
                data-help="Create a local git checkpoint (commit) of your spec file changes. This is rewindable — you can always go back.">
            Checkpoint
            <span class="uncommitted-badge hidden" id="uncommitted-badge">0</span>
        </button>

        <button class="btn btn-success edit-only" id="btn-share" disabled
                title="Push local commits to remote">
            Share
        </button>

        {% endif %}

    </div>

    <div class="hamburger-menu" id="hamburger-menu">
        <button class="btn hamburger-btn" onclick="toggleHamburgerMenu()" title="Options">&#9776;</button>
        <div class="hamburger-dropdown" id="hamburger-dropdown">
            <button class="hamburger-item" id="help-mode-btn" onclick="toggleHelpMode(); closeHamburgerMenu()">
                ? Help
            </button>
            <button class="hamburger-item" onclick="toggleLegend(); closeHamburgerMenu()">
                &#8505; Legend
            </button>
            <div class="hamburger-divider"></div>
            <div class="hamburger-label">Font Size</div>
            <div class="hamburger-item font-size-controls">
                <button class="btn font-size-btn" onclick="event.stopPropagation(); adjustFontSize(-1)" title="Decrease font size">A&#x2212;</button>
                <span id="font-size-display">14px</span>
                <button class="btn font-size-btn" onclick="event.stopPropagation(); adjustFontSize(1)" title="Increase font size">A+</button>
            </div>
            <div class="hamburger-divider"></div>
            <div class="hamburger-label">Theme</div>
            <div class="hamburger-item theme-controls">
                {% for t in catalog.themes %}
                <button class="btn theme-btn" data-theme="{{ t.name }}" onclick="event.stopPropagation(); setTheme('{{ t.name }}')" title="{{ t.label }} theme">{{ t.icon | safe }}</button>
                {% endfor %}
                <button class="btn theme-btn active" data-theme="system" onclick="event.stopPropagation(); setTheme('system')" title="System theme">&#9881;</button>
            </div>
        </div>
    </div>
</header>

<div class="stale-banner hidden" id="stale-banner">
    <span>Spec files have changed on disk.</span>
    <button class="btn btn-sm" onclick="refreshFromDisk()">Refresh Now</button>
    <button class="btn btn-sm stale-dismiss" onclick="dismissStaleBanner()">&times;</button>
</div>

<div class="help-bar hidden" id="help-bar">
    <span class="help-bar-label">Help:</span>
    <span class="help-bar-text" id="help-bar-text">Hover over any control to see its description.</span>
</div>
