@php
    $user = auth()->user();
    $isAdminArea = ($area ?? 'user') === 'admin';
    $navItems = $isAdminArea && $user->isAdmin()
        ? config('vpm-navigation.admin', [])
        : config('vpm-navigation.user', []);
@endphp

<div class="vpm-menu-drawer__backdrop" data-vpm-menu-close hidden></div>

<aside
    id="vpm-user-menu"
    class="vpm-menu-drawer"
    role="dialog"
    aria-modal="true"
    aria-label="Navigation menu"
    aria-labelledby="vpm-menu-drawer-title"
    hidden
>
    <div class="vpm-menu-drawer__profile">
        @if ($user->profilePhotoUrl())
            <img src="{{ $user->profilePhotoUrl() }}" alt="" class="vpm-menu-drawer__avatar vpm-menu-drawer__avatar--photo" width="64" height="64">
        @else
            <img src="{{ asset('pages/human.webp') }}" alt="" class="vpm-menu-drawer__avatar" width="64" height="64">
        @endif
        <h2 id="vpm-menu-drawer-title" class="vpm-menu-drawer__name">{{ $user->name }}</h2>
    </div>

    <nav class="vpm-menu-drawer__nav" aria-label="{{ $isAdminArea ? 'Admin' : 'App' }} links">
        <ul>
            @foreach ($navItems as $item)
                @if (($item['type'] ?? null) === 'divider')
                    <li class="vpm-menu-drawer__section-label" aria-hidden="true">{{ $item['label'] }}</li>
                    @continue
                @endif
                <li>
                    @php
                        $navRoute = ($item['route'] ?? '') === 'app.cards'
                            ? $user->cardsRouteName()
                            : $item['route'];
                        $navActive = ($item['route'] ?? '') === 'app.cards' && $user->activeDebitCard()
                            ? in_array($active ?? '', ['cards', 'withdrawals'], true)
                            : ($active ?? '') === ($item['key'] ?? '');
                    @endphp
                    <a
                        href="{{ route($navRoute) }}"
                        class="vpm-menu-drawer__link {{ $navActive ? 'vpm-menu-drawer__link--active' : '' }}"
                    >
                        <span class="material-icons notranslate" aria-hidden="true">{{ $item['icon'] }}</span>
                        <span>{{ $item['label'] }}</span>
                    </a>
                </li>
            @endforeach

            @if ($isAdminArea)
                <li>
                    <a href="{{ route('app.home') }}" class="vpm-menu-drawer__link vpm-menu-drawer__link--admin">
                        <span class="material-icons notranslate" aria-hidden="true">arrow_back</span>
                        <span>User area</span>
                    </a>
                </li>
            @elseif ($user->isAdmin())
                <li>
                    <a href="{{ route('admin.deposits') }}" class="vpm-menu-drawer__link vpm-menu-drawer__link--admin">
                        <span class="material-icons notranslate" aria-hidden="true">settings</span>
                        <span>Management</span>
                    </a>
                </li>
            @endif

            <li>
                <form method="POST" action="{{ route('logout') }}" class="vpm-menu-drawer__logout">
                    @csrf
                    <button type="submit" class="vpm-menu-drawer__link">
                        <span class="material-icons notranslate" aria-hidden="true">power_settings_new</span>
                        <span>Sign Out</span>
                    </button>
                </form>
            </li>
        </ul>
    </nav>
</aside>