@extends('layouts.app')

@section('content')
<div class="mx-auto max-w-5xl px-4 py-8">
    <div class="flex items-center justify-between"><h1 class="text-3xl font-black">My Addresses</h1><a class="btn-primary" href="{{ route('account.addresses.create') }}">Add Address</a></div>
    <div class="mt-6 grid gap-4 md:grid-cols-2">
        @foreach ($addresses as $address)
            <div class="panel p-5">
                <div class="font-bold">{{ $address->recipient_name }}</div>
                <p class="mt-2 text-sm text-gray-600">{{ $address->street }}, {{ $address->suburb }}, {{ $address->city }}, {{ $address->province }}, {{ $address->postal_code }}</p>
                <div class="mt-4 flex gap-3">
                    <a class="btn-secondary" href="{{ route('account.addresses.edit', $address) }}">Edit</a>
                    <form method="POST" action="{{ route('account.addresses.destroy', $address) }}">@csrf @method('DELETE') <button class="btn-secondary">Delete</button></form>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection