<div class="panel-header" style="flex-direction: column; align-items: stretch; padding: 16px 16px 12px 16px; gap: 12px;">
    <div style="display: flex; justify-content: space-between; align-items: center; position: relative;">
        @php
            $currentFilter = request()->query('filter', 'open');
        @endphp
        <div style="font-weight: 700; font-size: 16px; color: var(--text);">Messages</div>
        <div style="align-items: center; display: flex; gap: 12px;">
            <button class="icon-button" type="button" title="Search Inbox"><i class="ph ph-magnifying-glass" style="font-size: 18px;"></i></button>
            
            <div style="position: relative;">
                <button class="icon-button" type="button" title="Filter by Label" onclick="document.getElementById('label-filter-menu').style.display = document.getElementById('label-filter-menu').style.display === 'none' ? 'block' : 'none'"><i class="ph ph-funnel" @style(['font-size: 18px', 'color: var(--primary)' => request('label')])></i></button>
                <div id="label-filter-menu" class="dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; margin-top: 4px; background: rgba(255, 255, 255, 0.90); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); z-index: 100; min-width: 160px; padding: 8px 0;">
                    <div style="padding: 4px 12px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase;">Filter by Label</div>
                    <a href="{{ route('conversations.index', ['filter' => request('filter')]) }}" @style(['display: block', 'padding: 8px 12px', 'color: var(--text)', 'text-decoration: none', 'font-size: 13px', 'background: var(--surface-hover)' => !request('label'), 'font-weight: 600' => !request('label')])>All Conversations</a>
                    @php
                        $predefinedLabels = ['Lead', 'Hot Lead', 'Customer', 'Repeat Customer'];
                        $allLabels = collect($predefinedLabels)->merge($existingLabels ?? [])->unique()->filter()->values();
                    @endphp
                    @foreach($allLabels as $lbl)
                        <a href="{{ route('conversations.index', ['filter' => request('filter'), 'label' => $lbl]) }}" @style(['display: block', 'padding: 8px 12px', 'color: var(--text)', 'text-decoration: none', 'font-size: 13px', 'background: var(--surface-hover)' => request('label') === $lbl, 'font-weight: 600' => request('label') === $lbl])>
                            <i class="ph ph-tag" @style(['margin-right: 6px', 'color: ' . (request('label') === $lbl ? 'var(--primary)' : 'var(--muted)')])></i>{{ $lbl }}
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    
    <div class="inbox-filter-pills" id="inbox-filters" style="display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;">
        <a href="{{ route('conversations.index', ['filter' => 'open']) }}" class="filter-pill {{ $currentFilter === 'open' ? 'active' : '' }}">Open</a>
        <a href="{{ route('conversations.index', ['filter' => 'archived']) }}" class="filter-pill {{ $currentFilter === 'archived' ? 'active' : '' }}">Archived</a>
        <a href="{{ route('conversations.index', ['filter' => 'trash']) }}" class="filter-pill {{ $currentFilter === 'trash' ? 'active' : '' }}">Trash</a>
    </div>
    
    <div class="inbox-bulk-toolbar" id="inbox-bulk-toolbar" style="display: none; gap: 8px; overflow-x: auto; padding-bottom: 2px; align-items: center; justify-content: space-between;">
        <div style="font-size: 13px; font-weight: 600; color: var(--primary); display: flex; align-items: center;">
            <span id="bulk-count">0</span>&nbsp;selected
            <button id="bulk-clear" class="icon-button" style="display: inline-flex; margin-left: 4px; padding: 2px;" title="Clear selection"><i class="ph ph-x"></i></button>
        </div>
        <div style="display: flex; gap: 4px;">
            @if ($currentFilter !== 'trash')
                <button class="button secondary bulk-action-btn" data-action="trash" title="Trash"><i class="ph ph-trash"></i></button>
            @else
                <button class="button secondary bulk-action-btn" data-action="restore" title="Restore"><i class="ph ph-arrow-u-up-left"></i></button>
                <button class="button bulk-action-btn" data-action="forceDestroy" title="Delete Forever" style="background: var(--red); border-color: var(--red); color: white;"><i class="ph ph-warning-circle"></i></button>
            @endif
            
            @if ($currentFilter === 'open')
                <button class="button secondary bulk-action-btn" data-action="archive" title="Archive"><i class="ph ph-archive"></i></button>
            @elseif ($currentFilter === 'archived')
                <button class="button secondary bulk-action-btn" data-action="unarchive" title="Unarchive"><i class="ph ph-tray"></i></button>
            @endif
        </div>
    </div>
</div>
