<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">
                {{ $primary ? 'Key Info' : 'Notes' }}
                @can('notes.create')
                    <button class="btn btn-primary btn-sm" wire:click="showAddNote">
                        <i class="mdi mdi-plus"></i>
                    </button>
                @endcan
            </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 {{ $primary ? 'Key Info' : 'Note' }}</h5>
                            <button type="button" class="btn-close text-dark" wire:click.prevent="hideAddNote"></button>
                        </div>

                        <div class="offcanvas-body  bg-light">
                            <form method="post" wire:submit="addNote">
                                @csrf
                                <x-wip-timer />
                                
                                <textarea class="form-control mt-4" wire:model.defer="note" name="note" rows="10"></textarea>
                                @error('note')
                                <div class="text-danger font-bold mt-4">
                                    {{ $message }}
                                </div>
                                @enderror
                               
                                <x-ui.button style="success" class="w-100 mt-4">Add</x-ui.button>
                            </form>

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

            @if($notes->count())
                <ul class="list-group">
                    @foreach($notes as $note)
                        <div class="list-group">
                            <div class="list-group-item bg-light mb-2 rounded position-relative">
                                <p class="mb-1 fw-semibold">{{ $note->note }}</p>
                                <small class="text-muted">{{ $note->created_at->diffForHumans() }} &bull; {{ $note->created_at->format("d/m/Y H:i") }}</small><br>
                                <small class="text-primary">{{ $note->user->name_first }} {{ $note->user->name_last }}</small>

                                @can('delete', $note)
                                    <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="deleteNote({{ $note->id }})"></i>
                                    </div>
                                @endcan
                            </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 {{ $primary ? 'key info has' : 'notes have' }} been added.</p>
                </div>
            @endif

        </div>
        <div class="card-footer">
            {{ $notes->links() }}
        </div>

    @endcan

    @cannot('notes.view')
        <div class="card-body">
            <div class="text-center p-5 text-muted">
                <i class="mdi mdi-cancel text-danger" style="font-size: 48px;"></i>
                <p class="mt-3 fw-bold">You do not have permission to view this.</p>
            </div>
        </div>
    @endcannot
</div>