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

        <form class="search-bar" action="{{ route('entries.index') }}">
            <input type="text" name="s" placeholder="Search" />
            <button type="submit" class="search-button">
                <i data-lucide="search" size="18" color="var(--text2)"></i>
            </button>
        </form>

    <div class="topbar-actions">

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

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

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

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

        {{-- Users --}}
        @can('create','\App\Models\Entry')
            <a href="{{ route('submit.index') }}" class="btn">
                <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>