<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">
                <span>
                    Key Info
                </span>
                @if($note)
                    <small class="text-muted fw-normal" title="{{ $note->updated_at }}">
                        Updated {{ $note->updated_at->diffForHumans() }}
                    </small>
                @endif
            </h4>

            @can('notes.create')
                <textarea class="form-control mb-2"
                          rows="6"
                          wire:model.defer="content"
                          placeholder="Anything other users need to know at a glance about this institution…"></textarea>
                @error('content')
                    <div class="text-danger small mb-2">{{ $message }}</div>
                @enderror

                <div class="d-flex justify-content-between align-items-center">
                    <small class="text-muted">
                        @if($note && $note->user)
                            Last edited by {{ $note->user->name_first }} {{ $note->user->name_last }}
                        @else
                            &nbsp;
                        @endif
                    </small>
                    <button class="btn btn-warning btn-sm" wire:click="save">
                        <i class="mdi mdi-content-save me-1"></i> Save
                    </button>
                </div>
            @else
                @if($content)
                    <p class="mb-0" style="white-space: pre-wrap;">{{ $content }}</p>
                @else
                    <div class="text-center p-4 text-muted">
                        <i class="mdi mdi-flask-empty" style="font-size: 40px;"></i>
                        <p class="mt-2 fw-bold mb-0">There is no key info recorded.</p>
                    </div>
                @endif
            @endcan
        </div>
    @endcan

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