@props(['title'])

@php
    $tabs = [
        ['Personal Information', 'account'],
        ['My Orders', 'account.orders'],
        ['Track Order', 'account.track-order'],
        ['Manage Address', 'account.address'],
        ['Payment Method', 'account.payment'],
        ['Password Manager', 'account.password'],
    ];
@endphp

<x-storefront.shop-page :title="$title.' - My Account'" hero="My Account">
    <div class="row g-4">
        <div class="col-12 col-md-4 col-lg-3">
            <nav class="sm-account-nav" aria-label="My account">
                @foreach ($tabs as [$label, $route])
                    <a @class(['sm-account-tab', 'active' => request()->routeIs($route)]) href="{{ route($route) }}" @if (request()->routeIs($route)) aria-current="page" @endif>{{ $label }}</a>
                @endforeach
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button class="sm-account-tab" type="submit">Logout</button>
                </form>
            </nav>
        </div>

        <div class="col-12 col-md-8 col-lg-9">
            <h2 class="visually-hidden">{{ $title }}</h2>
            {{ $slot }}
        </div>
    </div>

    <x-storefront.service-strip />
</x-storefront.shop-page>