<div class="text-center mb-3">
    <img src="{{ auth()->user()->avatarUrl(160) }}" alt="{{ auth()->user()->name }}" class="rounded-circle" style="width:88px;height:88px;object-fit:cover;">
    <div class="fw-semibold mt-2">{{ auth()->user()->name }}</div>
    <div class="text-muted-soft small">{{ auth()->user()->email }}</div>
</div>
<div class="list-group mb-4">
    <a href="{{ route('account.profile') }}" class="list-group-item list-group-item-action {{ request()->routeIs('account.profile*') ? 'active bg-terracotta border-terracotta' : '' }}">
        <i class="bi bi-person me-2"></i> Profile
    </a>
    <a href="{{ route('account.orders.index') }}" class="list-group-item list-group-item-action {{ request()->routeIs('account.orders.*') ? 'active bg-terracotta border-terracotta' : '' }}">
        <i class="bi bi-bag me-2"></i> My Orders
    </a>
    <a href="{{ route('account.addresses.index') }}" class="list-group-item list-group-item-action {{ request()->routeIs('account.addresses.*') ? 'active bg-terracotta border-terracotta' : '' }}">
        <i class="bi bi-geo-alt me-2"></i> Addresses
    </a>
    <form action="{{ route('logout') }}" method="POST">
        @csrf
        <button type="submit" class="list-group-item list-group-item-action text-danger w-100 text-start">
            <i class="bi bi-box-arrow-right me-2"></i> Logout
        </button>
    </form>
</div>
