@php $topbarModSeparator = false; $topbarAdminSeparator = false; @endphp
<header id="topbar">
    <button class="mobile-toggle">
        <i data-lucide="menu"></i>
    </button>

<form id="topbar-search-form" class="search-bar" method="GET">

    <select id="search-scope" class="search-scope-select" name="search_scope">
        <option value="entries" selected>Entries</option>
        <option value="news">News</option>
        <option value="forum">Forum</option>
    </select>

    <input type="text" id="search-input" placeholder="Search" autocomplete="off">

    <button type="submit" class="search-button">
        <i data-lucide="search" size="18" color="var(--text2)"></i>
    </button>
</form>

<script>
    (function () {
        const form   = document.getElementById('topbar-search-form');
        const select = document.getElementById('search-scope');
        const input  = document.getElementById('search-input');

        const scopes = {
            entries: { action: '{{ route('entries.index') }}', param: 's' },
            news:    { action: '{{ route('news.index') }}',    param: 's' },
            forum:   {
                action: '{{ xfRoute('search/2147483647/') }}',
                param: 'q',
                extra: { o: 'relevance' },
            },
        };

        form.addEventListener('submit', function (e) {
            e.preventDefault();

            const term = input.value.trim();
            if (!term) return;

            const cfg = scopes[select.value];
            const params = new URLSearchParams({ [cfg.param]: term, ...(cfg.extra || {}) });

            window.location = cfg.action + '?' + params.toString();
        });
    })();
</script>

    <div class="topbar-actions">

        @can('is-admin')
            @php $topbarAdminSeparator = true; @endphp
            <a href="{{ config('app.forum_url') . '/admin.php' }}" class="btn topbar-admin-btn" title="Admin">
                <i data-lucide="landmark" size="18"></i>
            </a>
            <a href="{{ config('app.url') . '/manage' }}" class="btn topbar-admin-btn" title="Manage">
                <i data-lucide="shield-cog" size="18"></i>
            </a>
        @endcan

        @if( $topbarAdminSeparator )
            <div class="vertical-separator topbar-admin-btn"></div>
        @endif

        @can('is-mod')
            @php $topbarModSeparator = true; @endphp
            <a href="{{ route('modcp.index') }}" class="btn topbar-mod-btn" title="Moderation">
                <i data-lucide="siren" size="18"></i>
            </a>
            <a href="{{ xfRoute('approval-queue') }}" class="btn topbar-mod-btn" title="Approvals">
                <i data-lucide="message-circle-check" size="18"></i>
            </a>
            <a href="{{ xfRoute('reports') }}" class="btn topbar-mod-btn" title="Reports">
                <i data-lucide="triangle-alert" size="18"></i>
            </a>
        @endcan

        @if( $topbarModSeparator )
            <div class="vertical-separator topbar-mod-btn"></div>
        @endif

        <div x-data="{ open: false }" class="topbar-more-container" style="position: relative;">
            @canany(['is-admin','is-mod'])
                <button @click="open = !open" @click.outside="open = false" class="btn topbar-btn-more" title="More actions">
                    <i data-lucide="more-vertical" size="18"></i>
                </button>
                <div x-show="open" class="topbar-more-menu">
                    @can('is-admin')
                        <a href="{{ config('app.forum_url') . '/admin.php' }}" class="topbar-more-item" title="Admin">
                            <i data-lucide="landmark" size="16"></i>
                            <span>Admin</span>
                        </a>
                        <a href="{{ config('app.url') . '/manage' }}" class="topbar-more-item" title="Manage">
                            <i data-lucide="shield-cog" size="16"></i>
                            <span>Manage</span>
                        </a>
                    @endcan

                    @can('is-mod')
                        <a href="{{ route('modcp.index') }}" class="topbar-more-item" title="Moderation">
                            <i data-lucide="siren" size="16"></i>
                            <span>Mod CP</span>
                        </a>
                        <a href="{{ xfRoute('approval-queue') }}" class="topbar-more-item" title="Approvals">
                            <i data-lucide="message-circle-check" size="16"></i>
                            <span>Approval Queue</span>
                        </a>
                        <a href="{{ xfRoute('reports') }}" class="topbar-more-item" title="Reports">
                            <i data-lucide="triangle-alert" size="16"></i>
                            <span>Reports</span>
                        </a>
                    @endcan
                </div>
            @endcanany
        </div>

        @can('create','\App\Models\Entry')
            <a href="{{ route('submit.index') }}" class="btn" title="Submit">
                <i data-lucide="hard-drive-upload" size="18"></i>
            </a>
        @endcan
        @if( !\Auth::guest() )
            <div x-data x-init="$store.notifications.unviewed = {{ \Auth::user()->alerts_unviewed }}" style="position:relative">
                <button type="button" class="btn" :class="{ 'active': $store.notifications.start }" @click="$store.notifications.open($el)" @click.outside="$store.notifications.close()">
                    <i data-lucide="bell" size="18"></i>
                    <span
                        class="topbar-badge"
                        :class="$store.notifications.unread > 9 ? 'topbar-badge--overflow' : ''"
                        x-show="$store.notifications.unread > 0"
                        x-text="$store.notifications.unread > 99 ? '99+' : $store.notifications.unread"
                    ></span>
                </button>

                @include('components.notifications')
            </div>
            <div x-data x-init="$store.conversations.unviewed = {{ \Auth::user()->conversations_unread }}" style="position:relative">
                <button type="button" class="btn" :class="{ 'active': $store.conversations.start }" @click="$store.conversations.open($el)" @click.outside="$store.conversations.close()">
                    <i data-lucide="mail" size="18"></i>
                    <span
                        class="topbar-badge"
                        :class="$store.conversations.unread > 9 ? 'topbar-badge--overflow' : ''"
                        x-show="$store.conversations.unread > 0"
                        x-text="$store.conversations.unread > 99 ? '99+' : $store.conversations.unread"
                    ></span>
                </button>

                @include('components.conversations')
            </div>
        @endif
            <div x-data style="position: relative;" x-init="$store.settings.xfUrls = { 'default': '{{ xfStyleVariationUrl( 'default' ) }}', 'alternate': '{{ xfStyleVariationUrl( 'alternate' ) }}' }; $store.settings.currentTheme = '{{ userTheme() }}'">
                <button
                    type="button"
                    class="btn"
                    :class="{ 'active': $store.settings.start }"
                    @click="$store.settings.open()"
                    @click.outside="$store.settings.close()"
                >
                    <i data-lucide="settings" size="18"></i>
                </button>

                @include('components.settings-dropdown')
            </div>

    </div>
</header>