<div class="card shadow-sm">
    <div class="card-body">
        <h4 class="fw-bold mb-3 d-flex justify-content-between align-items-center">
            Address Book
            @can('edit', $owner)
                <button class="btn btn-primary btn-sm" wire:click="showAdd">
                    <i class="mdi mdi-plus"></i>
                </button>
            @endcan
        </h4>

        @if($owner->addresses()->count())
            @foreach($owner->addresses as $address)
                <div class="p-3 rounded bg-light border position-relative mb-2">
                    @if($address->display_name)
                        <p class="mb-0 text-primary">{{ $address->display_name }}</p>
                    @endif
                    <p class="mb-0 fw-semibold">{!! $address->asHtml() !!}</p>
                    @can('edit', $owner)
                    <div class="position-absolute top-0 end-0 p-2 d-flex gap-2">
                        <i class="mdi mdi-star action-icon me-2 {{ $address->is_current ? 'text-warning' : '' }}"
                           wire:click="makePrimary({{ $address->id }})"></i>
                        <i class="mdi mdi-pencil-outline action-icon me-2"
                           wire:click="loadAddress({{ $address->id }})"></i>
                        <i class="mdi mdi-delete-outline action-icon text-danger"
                           wire:click="deleteAddress({{ $address->id }})"></i>
                    </div>
                    @endcan
                </div>
            @endforeach
        @else
            <div class="text-center p-5 text-muted">
                <i class="mdi mdi-account-details" style="font-size: 48px;"></i>
                <p class="mt-3 fw-bold">No addresses have been added.</p>
            </div>
        @endif

    </div>

    @if($show)
        <div>
            <div class="offcanvas offcanvas-end  show" tabindex="-1" style="--bs-offcanvas-width: 600px;" role="dialog">
                <div class="offcanvas-header">
                    <h5 id="offcanvasRightLabel">{{ $editing ? 'Edit' : 'Add' }} Address</h5>
                    <button type="button" class="btn-close text-dark" wire:click.prevent="hideAdd"></button>
                </div>

                <div class="offcanvas-body  bg-light">
                    @if($editing)
                        <form method="post" wire:submit="editAddress({{ $address->id }})">
                            @else
                                <form method="post" wire:submit="addAddress">
                                    @endif
                                    @csrf

                        <x-ui.input name="display_name" label="Label"/>
                        <div class="row">
                            <div class="col-md-6">
                                <x-ui.input name="line_1" label="Address Line 1"/>
                            </div>
                            <div class="col-md-6">
                                <x-ui.input name="line_2" label="Address Line 2"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <x-ui.input name="line_3" label="Address Line 3"/>
                            </div>
                            <div class="col-md-6">
                                <x-ui.input name="line_4" label="Address Line 4"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <x-ui.input name="line_5" label="Address Line 5"/>
                            </div>
                            <div class="col-md-6">
                                <x-ui.input name="line_6" label="Address Line 6"/>
                            </div>
                        </div>
                                    <x-ui.input name="postcode" label="Postcode"/>

                        <x-ui.button class="btn-success w-100 btn-lg">{{ $editing ? 'Edit' : 'Add' }}</x-ui.button>
                    </form>

                </div>
            </div>
        </div>
    @endif
</div>