<div class="card shadow-sm mb-4">
    @can('notes.view')
        <div class="card-body">
            <h4 class="fw-bold mb-3 d-flex align-items-center justify-content-between">
                Aliases
                    <button class="btn btn-primary btn-sm" wire:click="showAdd">
                        <i class="mdi mdi-plus"></i>
                    </button>
            </h4>
            @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">Add Alias</h5>
                            <button type="button" class="btn-close text-dark" wire:click.prevent="hideAddAlias"></button>
                        </div>

                        <div class="offcanvas-body  bg-light">
                            <form method="post" wire:submit="addAlias">
                                @csrf

                                <x-ui.input name="alias" label="Alias Name"/>

                                <x-ui.button style="success" class="w-100 mt-4">Add</x-ui.button>
                            </form>

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

            @if($aliases->count())
                <ul class="list-group">
                    @foreach($aliases as $alias)
                        <div class="list-group">
                            <div class="list-group-item bg-light mb-2 rounded position-relative">
                                <p class="mb-1 fw-semibold">{{ $alias->alias }}</p>
                                    <div class="position-absolute top-0 end-0 p-2 d-flex gap-2">
                                        <i class="mdi mdi-delete-outline action-icon text-danger"
                                           wire:confirm="Are you sure you want to delete this?"
                                           wire:click="deleteAlias({{ $alias->id }})"></i>
                                    </div>
                            </div>

                        </div>
                    @endforeach
                </ul>
            @else
                <div class="text-center p-5 text-muted">
                    <i class="mdi mdi-note" style="font-size: 48px;"></i>
                    <p class="mt-3 fw-bold">No aliases been added.</p>
                </div>
            @endif

        </div>

    @endcan
</div>