@forelse ($notes as $note)
    <div class="d-flex gap-3 note-item mb-4">
        <div class="left d-flex flex-column gap-2 mt-2">
            <i class="bx bx-star update-note-start-icon fs-3 {{ $note->is_featured ? 'text-warning' : '' }}"
                data-note-id="{{ $note->id }}"
                data-is-featured="{{ $note->is_featured }}"
                role="button"
                title="Mark as Featured"></i>
            <i class="bx bx-edit fs-3 edit-note-icon"
                data-note-id="{{ $note->id }}"
                data-note-type="{{ $note->type }}"
                data-note-opportunity="{{ $note->related_opportunity }}"
                data-note-text="{{ $note->note }}"
                role="button"
                title="Edit Note"></i>
        </div>
        <div class="right">
            <div class="note-header">
                <div class="title">
                    <h5>{{ $note->type }}</h5>
                </div>
                <div>
                    <i class="bi bi-pencil-square"></i>
                </div>
            </div>
            <div class="note-body">
                <h6 class="text-black fs-5">
                    {{ $note->note }}
                </h6>
                {{-- <h1 class="badge bg-light text-black">Opportunity: Policy123233</h1> --}}
            </div>
            <div class="note-footer">
                <span>Added by {{ $note->user->name }} on {{ $note->created_at->format('d M Y h:i A') }}</span>
                @if($note->updatedBy)
                <br>
                <span class="text-muted">Modified by {{ $note->updatedBy->name }} on {{ $note->updated_at->format('d M Y h:i A') }}</span>
                @endif
            </div>
        </div>
    </div>
@empty
<div class="row my-3">
    <div class="col-12">
        <h5 class="text-center text-warning">Notes not found!</h5>
    </div>
</div>
@endforelse