{{-- Phone app chrome: tab bar + "create" sheet + "more" sheet. Hidden on large screens. --}}
@php
    $tabs = bottom_tabs();
    $creates = quick_create_actions();
    $nav = nav_menu();
    $tabPatterns = collect([...$tabs['left'], ...$tabs['right']])->pluck(2)->all();
    $moreActive = ! collect($tabPatterns)->contains(fn ($p) => request()->routeIs($p));
    $tab = fn ($t) => '<a class="bn-item '.(request()->routeIs($t[2]) ? 'active' : '').'" href="'.route($t[1]).'"'.(request()->routeIs($t[2]) ? ' aria-current="page"' : '').'><i class="bi bi-'.$t[3].(request()->routeIs($t[2]) ? '-fill' : '').'" aria-hidden="true"></i><span>'.e($t[0]).'</span></a>';
@endphp
<nav class="bottom-nav d-lg-none d-print-none" aria-label="Main">
    @foreach ($tabs['left'] as $t){!! $tab($t) !!}@endforeach
    @if ($creates)
        <button type="button" class="bn-fab" data-bs-toggle="offcanvas" data-bs-target="#create-sheet" aria-controls="create-sheet" aria-label="Create new"><i class="bi bi-plus-lg" aria-hidden="true"></i></button>
    @endif
    @foreach ($tabs['right'] as $t){!! $tab($t) !!}@endforeach
    <button type="button" class="bn-item {{ $moreActive ? 'active' : '' }}" data-bs-toggle="offcanvas" data-bs-target="#more-sheet" aria-controls="more-sheet"><i class="bi bi-grid{{ $moreActive ? '-fill' : '' }}" aria-hidden="true"></i><span>More</span></button>
</nav>

@if ($creates)
<div class="offcanvas offcanvas-bottom sheet d-lg-none" tabindex="-1" id="create-sheet" aria-labelledby="create-sheet-title">
    <div class="sheet-handle" aria-hidden="true"></div>
    <div class="sheet-head"><h2 class="h6 mb-0" id="create-sheet-title">Create new</h2><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div>
    <div class="sheet-body">
        <div class="sheet-list">
            @foreach ($creates as [$label, $url, $icon, $hint])
                <a href="{{ $url }}" class="sheet-row"><span class="icon-chip"><i class="bi bi-{{ $icon }}" aria-hidden="true"></i></span><span class="grow"><span class="t">{{ $label }}</span><span class="s">{{ $hint }}</span></span><i class="bi bi-chevron-right text-muted" aria-hidden="true"></i></a>
            @endforeach
        </div>
    </div>
</div>
@endif

<div class="offcanvas offcanvas-bottom sheet d-lg-none" tabindex="-1" id="more-sheet" aria-labelledby="more-sheet-title">
    <div class="sheet-handle" aria-hidden="true"></div>
    <div class="sheet-head">
        <div class="d-flex align-items-center gap-2 min-w-0">
            <span class="avatar" style="--size:38px">{{ initials(auth()->user()->name) }}</span>
            <div class="min-w-0"><h2 class="h6 mb-0 text-truncate" id="more-sheet-title">{{ auth()->user()->name }}</h2><div class="small text-muted text-truncate">{{ auth()->user()->role->name ?? 'No role' }}</div></div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="sheet-body">
        @foreach ($nav as [$heading, $links])
            @continue($heading === 'Overview')
            <div class="sheet-group">{{ $heading }}</div>
            <div class="sheet-grid">
                @foreach ($links as [$label, $pattern, $route, $icon])
                    <a href="{{ route($route) }}" class="sheet-tile {{ request()->routeIs($pattern) ? 'active' : '' }}"><i class="bi bi-{{ $icon }}" aria-hidden="true"></i><span>{{ $label }}</span></a>
                @endforeach
            </div>
        @endforeach

        <div class="sheet-group">App</div>
        <div class="sheet-list">
            <a href="{{ route('account.edit') }}" class="sheet-row"><span class="icon-chip"><i class="bi bi-person-gear" aria-hidden="true"></i></span><span class="grow"><span class="t">My account</span><span class="s">Name and password</span></span></a>
            <button type="button" class="sheet-row" data-theme-toggle><span class="icon-chip"><i class="bi bi-moon-stars" data-theme-icon aria-hidden="true"></i></span><span class="grow"><span class="t">Dark mode</span><span class="s">Easier on the eyes at night</span></span></button>
            <button type="button" class="sheet-row" data-install hidden><span class="icon-chip chip-success"><i class="bi bi-phone" aria-hidden="true"></i></span><span class="grow"><span class="t">Install app</span><span class="s">Add {{ config('erp.company_name') }} to your home screen</span></span></button>
            <div class="sheet-row text-muted small" data-install-ios hidden><span class="icon-chip chip-success"><i class="bi bi-box-arrow-up" aria-hidden="true"></i></span><span class="grow">To install: tap <strong>Share</strong>, then <strong>Add to Home Screen</strong>.</span></div>
            <form method="POST" action="{{ route('logout') }}">@csrf<button class="sheet-row w-100 text-danger"><span class="icon-chip chip-danger"><i class="bi bi-box-arrow-right" aria-hidden="true"></i></span><span class="grow"><span class="t">Sign out</span></span></button></form>
        </div>
    </div>
</div>