{{--
    Account area: full-width, fixed-width sidebar + fluid content. Pages set
    @section('title') and fill @section('account').

    Below lg the sidebar becomes a horizontally scrollable row above the
    content.
--}}
@extends('layouts.app')

@push('seo')
    <meta name="robots" content="noindex, nofollow">
@endpush

@php
    $accountNav = [
        [
            'label' => __('storefront.account.nav_profile'),
            'href' => route('account'),
            'active' => request()->routeIs('account', 'account.email.*'),
        ],
        [
            'label' => __('storefront.account.nav_orders'),
            'href' => route('account.orders'),
            'active' => request()->routeIs('account.orders*'),
        ],
        [
            'label' => __('storefront.account.nav_wishlist'),
            'href' => route('account.wishlist'),
            'active' => request()->routeIs('account.wishlist'),
        ],
    ];

    $accountNavLink = 'nav-link uppercase inline-flex shrink-0 whitespace-nowrap font-display font-extrabold italic text-black no-underline';
@endphp

@section('content')

    <div class="flex flex-col lg:flex-row lg:min-h-[calc(100vh-102px)]">

        <aside class="border-b border-black lg:w-80 lg:shrink-0 lg:border-b-0 lg:border-r">
            <nav aria-label="{{ __('storefront.nav.account') }}">
                <ul class="flex gap-8 overflow-x-auto px-4 py-5 sm:px-8 lg:flex-col lg:gap-5 lg:overflow-visible lg:px-10 lg:py-12">
                    @foreach ($accountNav as $item)
                        <li class="shrink-0">
                            <a
                                href="{{ $item['href'] }}"
                                @class([$accountNavLink, 'is-active' => $item['active']])
                                @if ($item['active']) aria-current="page" @endif
                            ><span>{{ $item['label'] }}</span></a>
                        </li>
                    @endforeach

                    <li class="shrink-0">
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="{{ $accountNavLink }} cursor-pointer">
                                <span>{{ __('storefront.auth.logout') }}</span>
                            </button>
                        </form>
                    </li>
                </ul>
            </nav>
        </aside>

        <div class="min-w-0 flex-1 px-4 py-12 sm:px-8 lg:px-16 lg:py-16">
            @yield('account')
        </div>

    </div>

@endsection