@php
    $user = auth()->user();
    $initial = strtoupper(substr($user->name ?: 'A', 0, 1));
@endphp

<header class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">@yield('page_title', 'Dashboard')</h1>
    </div>

    <div class="admin-topbar__right">
        <form method="POST" action="{{ route('admin.cache.clear') }}" class="inline"
              onsubmit="return confirm('Clear all application caches?')">
            @csrf
            <button type="submit" class="admin-topbar__cache-btn" title="Clear application cache">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182"/>
                </svg>
                <span>Clear cache</span>
            </button>
        </form>

        <a href="{{ url('/') }}" target="_blank" rel="noopener" class="admin-topbar__view-site">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
            </svg>
            <span>View site</span>
        </a>

        <div
            class="admin-topbar__profile"
            x-data="{ open: false }"
            @keydown.escape.window="open = false"
            @click.outside="open = false"
        >
            <button
                type="button"
                class="admin-topbar__avatar-btn"
                @click="open = !open"
                :aria-expanded="open.toString()"
                aria-haspopup="true"
                aria-controls="admin-profile-menu"
            >
                <span class="admin-topbar__avatar" aria-hidden="true">{{ $initial }}</span>
                <span class="admin-topbar__user-meta">
                    <span class="admin-topbar__user-name">{{ $user->name }}</span>
                    <span class="admin-topbar__user-email">{{ $user->email }}</span>
                </span>
                <svg class="admin-topbar__chevron" :class="open && 'is-open'" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd"/>
                </svg>
            </button>

            <div
                id="admin-profile-menu"
                class="admin-topbar__menu"
                x-show="open"
                x-cloak
                x-transition:enter="transition ease-out duration-150"
                x-transition:enter-start="opacity-0 translate-y-1"
                x-transition:enter-end="opacity-100 translate-y-0"
                x-transition:leave="transition ease-in duration-100"
                x-transition:leave-start="opacity-100 translate-y-0"
                x-transition:leave-end="opacity-0 translate-y-1"
                role="menu"
            >
                <div class="admin-topbar__menu-head">
                    <span class="admin-topbar__avatar admin-topbar__avatar--sm">{{ $initial }}</span>
                    <div>
                        <p class="admin-topbar__menu-name">{{ $user->name }}</p>
                        <p class="admin-topbar__menu-email">{{ $user->email }}</p>
                    </div>
                </div>

                <div class="admin-topbar__menu-section" role="none">
                    <a href="{{ route('admin.profile.edit') }}" class="admin-topbar__menu-item" role="menuitem">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/>
                        </svg>
                        Edit profile
                    </a>
                    <a href="{{ route('admin.settings.edit') }}" class="admin-topbar__menu-item" role="menuitem">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.174.1.347.182.52.247.247.093.49.04.712-.118l1.043-.875a1.125 1.125 0 0 1 1.45.12l1.837 1.896c.37.382.404 1.01.087 1.42l-.85.996c-.188.22-.24.47-.16.718a6.2 6.2 0 0 1 0 1.042c-.08.248-.028.498.16.718l.85.996a1.125 1.125 0 0 1-.087 1.42l-1.838 1.896a1.125 1.125 0 0 1-1.45.12l-1.042-.875a1.03 1.03 0 0 0-.713-.118 5.6 5.6 0 0 1-.52.247 1.125 1.125 0 0 0-.645.87l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281a1.125 1.125 0 0 0-.645-.87 5.6 5.6 0 0 1-.52-.247 1.03 1.03 0 0 0-.712.118l-1.043.875a1.125 1.125 0 0 1-1.45-.12L2.93 15.69a1.125 1.125 0 0 1-.087-1.42l.85-.996c.188-.22.24-.47.16-.718a6.2 6.2 0 0 1 0-1.042c.08-.248.028-.498-.16-.718l-.85-.996a1.125 1.125 0 0 1 .087-1.42l1.838-1.896a1.125 1.125 0 0 1 1.45-.12l1.042.875c.223.158.466.21.713.118.173-.065.346-.147.52-.247a1.125 1.125 0 0 0 .645-.87l.213-1.28Z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                        </svg>
                        Settings
                    </a>
                    <a href="{{ route('admin.seo.index') }}" class="admin-topbar__menu-item" role="menuitem">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
                        </svg>
                        SEO
                    </a>
                </div>

                <div class="admin-topbar__menu-footer" role="none">
                    <form method="POST" action="{{ route('admin.logout') }}">
                        @csrf
                        <button type="submit" class="admin-topbar__menu-item is-danger" role="menuitem">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"/>
                            </svg>
                            Logout
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</header>