{# Partial: _toolbar.html.j2 — Unified filter toolbar (both modes) #}
{# Implements: REQ-p00006-A, REQ-p00006-B #}

<div class="toolbar" id="edit-toolbar">
    <!-- Text Filter (first, so it's always above the tree) -->
    <input type="text" class="filter-text-input" id="edit-filter-text"
           placeholder="Filter tree... (e.g. auth OR password)"
           oninput="onTreeTextFilter()"
           title="Filter the tree view: space=AND, OR, -exclude, =exact, &quot;phrase&quot;">

    <!-- Git Filters -->
    <div class="btn-group" role="group">
        <button class="btn" id="edit-btn-unsaved" onclick="toggleEditFilter('unsaved')"
                title="Show only requirements with pending in-memory edits (not yet saved to disk)">Unsaved</button>
        <button class="btn" id="edit-btn-uncommitted" onclick="toggleEditFilter('uncommitted')"
                title="Show only requirements saved to disk but not yet git-committed">Uncommitted</button>
        <button class="btn" id="edit-btn-changed" onclick="toggleEditFilter('changed')"
                title="Show only requirements changed on this branch compared to main">Changed</button>
    </div>

    <!-- Status filter badges (filled=showing, outline=hidden) -->
    <div class="status-filter-group" id="status-filter-group">
        {% for status in statuses %}
        <button class="status-filter-btn{% if status not in default_hidden_statuses %} on{% endif %}"
                id="status-filter-{{ status | lower }}"
                data-status="{{ status | lower }}"
                onclick="toggleStatusFilter('{{ status }}')"
                title="Toggle {{ status }} requirements">{{ status }}</button>
        {% endfor %}
    </div>

    <!-- Coverage dropdown -->
    <select class="filter-select" id="edit-filter-coverage" onchange="applyEditFilters()" title="Filter by coverage">
        <option value="">Cov: All</option>
        <option value="none">None</option>
        <option value="partial">Partial</option>
        <option value="full">Full</option>
    </select>

    <!-- Toggles -->
    <div class="toggle-group">
        <label class="toggle-item">
            <input type="checkbox" id="edit-toggle-leaf" onchange="toggleEditFilter('leaf')">
            <span>Leaf Only</span>
        </label>
        <label class="toggle-item">
            <input type="checkbox" id="edit-toggle-hide-filtered" onchange="toggleEditFilter('hideFiltered')">
            <span>Hide Filtered</span>
        </label>
    </div>

    <!-- Actions -->
    <div class="toolbar-actions">
        <button class="btn" onclick="clearEditFilters()" title="Clear all filters">Clear</button>
        <span class="counter" id="edit-counter"></span>
    </div>
</div>
