@php
    $oid = 'lt-offcanvas-notas-' . $point->id;
@endphp

<div class="mb-0">
    <button
        type="button"
        class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-2 lt-notes-open-btn"
        data-point-id="{{ $point->id }}"
        data-bs-toggle="offcanvas"
        data-bs-target="#{{ $oid }}"
        aria-controls="{{ $oid }}"
    >
        <i class="fa-regular fa-note-sticky" aria-hidden="true"></i>
        <span>
            <span>{{ __('Notas') }}</span>
            (<span class="lt-notes-count" data-point-id="{{ $point->id }}">{{ $point->activeNotes->count() }}</span>)
        </span>
    </button>
</div>

<div
    class="offcanvas offcanvas-end lt-offcanvas-notas"
    tabindex="-1"
    id="{{ $oid }}"
    aria-labelledby="{{ $oid }}-label"
>
    <div class="offcanvas-header border-bottom">
        <h2 class="offcanvas-title h5 mb-0" id="{{ $oid }}-label">{{ __('Notas') }} — {{ $point->name }}</h2>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{{ __('Fechar') }}"></button>
    </div>
    <div class="offcanvas-body">
        <ul class="list-group list-group-flush mb-3 lt-notes-list" data-point-id="{{ $point->id }}">
            @foreach($point->activeNotes as $n)
                <li class="list-group-item" data-note-id="{{ $n->id }}">
                    <div class="small text-muted mb-1">{{ $n->created_at?->format('d/m/Y H:i') }} — {{ $n->author?->firstName }} {{ $n->author?->lastName }}</div>
                    <div class="lt-note-content">{!! $n->content !!}</div>
                    @if($perm['excluir'])
                        <form method="post" action="{{ route('admin.contaAngra.linhasDoTempo.notas.destroy', [$timeline, $point, $n]) }}" class="d-inline lt-confirm-delete" data-confirm="{{ e(__('Excluir esta nota?')) }}">
                            @csrf
                            @method('delete')
                            <button type="submit" class="btn btn-link btn-sm text-danger p-0" title="{{ __('Excluir') }}" aria-label="{{ __('Excluir') }}">
                                <i class="fa-solid fa-trash" aria-hidden="true"></i>
                                <span class="visually-hidden">{{ __('Excluir') }}</span>
                            </button>
                        </form>
                    @endif
                </li>
            @endforeach
        </ul>
        @if($perm['adicionar'])
            <form class="lt-note-form" data-point-id="{{ $point->id }}" action="{{ route('admin.contaAngra.linhasDoTempo.notas.store', [$timeline, $point]) }}" method="post">
                @csrf
                <label class="form-label" for="note-{{ $point->id }}">{{ __('Nova nota') }}</label>
                <textarea class="form-control mb-2" id="note-{{ $point->id }}" name="content" rows="4" maxlength="10000" required></textarea>
                <button type="submit" class="btn btn-sm btn-primary">{{ __('Salvar nota') }}</button>
            </form>
        @endif
    </div>
</div>