@php($notesPage = (bool) ($fullPage ?? false))
<section class="float-notes{{ $notesPage ? ' is-page' : '' }}" data-float-notes data-full-page="{{ $notesPage ? '1' : '0' }}" data-user-id="{{ auth()->id() }}" data-index-url="{{ url('/float-notes') }}"
    data-reference-url="{{ url('/float-notes/references') }}" data-reference-detail-url="{{ url('/float-notes/reference/{type}/{id}') }}" data-map-url="{{ url('/float-notes/map') }}"
    data-csrf="{{ csrf_token() }}">
    @unless($notesPage)
        <button class="float-notes-trigger" type="button" data-fn-open aria-expanded="false" aria-controls="float-notes-panel"
            aria-label="Abrir notas rápidas" aria-description="Mantenha pressionado por 3 segundos para mover verticalmente" title="Notas rápidas · segure por 3 segundos para reposicionar">
            <i class="ic" aria-hidden="true">sticky_note_2</i>
        </button>
    @endunless
    <aside class="float-notes-panel" id="float-notes-panel" role="{{ $notesPage ? 'region' : 'dialog' }}"
        @unless($notesPage) aria-modal="true" @endunless aria-labelledby="float-notes-title" tabindex="-1"
        @unless($notesPage) hidden @endunless>
        <header class="float-notes-header">
            <div><strong id="float-notes-title">{{ $notesPage ? 'Suas notas' : 'Float Notes' }}</strong>
                @if($notesPage)<span>Notas privadas, leitura e relações</span>@endif
            </div>
            @if($notesPage)
                <a class="btn btn--ghost" href="{{ url('/') }}"><i class="ic sm">arrow_back</i> Voltar ao sistema</a>
            @else
                <div class="float-notes-window-controls" role="group" aria-label="Controles da janela">
                    <button type="button" class="icon-btn float-notes-window-control float-notes-window-control--close"
                        data-fn-close aria-label="Fechar notas" title="Fechar"><i class="ic">close</i></button>
                    <button type="button"
                        class="icon-btn float-notes-window-control float-notes-window-control--fullscreen" data-fn-maximize
                        aria-pressed="false" aria-label="Maximizar notas" title="Maximizar"><i
                            class="ic">open_in_full</i></button>
                </div>
            @endif
        </header>
        <div class="float-notes-tabs" role="tablist" aria-label="Seções das notas">
            <button type="button" class="is-active" data-fn-tab="notes" role="tab"
                aria-selected="true">Notas</button>
            <button type="button" data-fn-tab="map" role="tab" aria-selected="false">Relações</button>
        </div>
        <div class="float-notes-view" data-fn-view="notes">
            <div data-fn-library>
                <div class="float-notes-library-heading">
                    <div><strong data-fn-library-title>Suas notas</strong><span data-fn-library-count></span></div>
                    <div class="float-notes-library-actions">
                        @unless($notesPage)
                            <a class="btn btn--ghost" href="{{ url('/float-notes/todas') }}" data-fn-all><i class="ic sm">open_in_full</i> Ver todas</a>
                        @endunless
                        <button type="button" class="btn btn--primary" data-fn-new><i class="ic sm">add</i> Nova nota</button>
                    </div>
                </div>
                <p class="float-notes-library-status" data-fn-library-status role="status" aria-live="polite"></p>
                <div class="float-notes-library">
                    <label class="sr-only" for="float-notes-search">Buscar nas notas</label>
                    <input id="float-notes-search" type="search" placeholder="Buscar nas notas…" data-fn-search>
                    <label class="sr-only" for="float-notes-collection">Coleção de notas</label>
                    <select id="float-notes-collection" data-fn-collection>
                        <option value="active">Ativas</option>
                        <option value="archived">Arquivadas</option>
                    </select>
                </div>
                <div class="float-notes-list" data-fn-list aria-label="Notas recentes"></div>
                <div class="float-notes-pagination" data-fn-pagination>
                    <button type="button" class="btn btn--ghost" data-fn-previous aria-label="Página anterior">Anterior</button>
                    <span data-fn-page aria-live="polite"></span>
                    <button type="button" class="btn btn--ghost" data-fn-next aria-label="Próxima página">Próxima</button>
                </div>
            </div>
            <article class="float-note-reader" data-fn-reader hidden aria-labelledby="float-note-reader-title">
                <div class="float-note-reader-toolbar">
                    <button type="button" class="float-notes-back" data-fn-reader-back><i class="ic sm">arrow_back</i> Todas as notas</button>
                    <button type="button" class="btn btn--primary btn--sm" data-fn-edit><i class="ic sm">edit</i> <span data-fn-edit-label>Editar</span></button>
                </div>
                <header class="float-note-reader-heading">
                    <h2 id="float-note-reader-title" data-fn-reader-title tabindex="-1">Nota</h2>
                    <time data-fn-reader-date></time>
                </header>
                <div class="float-note-reader-content" data-fn-reader-content></div>
                <div class="float-notes-references float-note-reader-references" data-fn-reader-references aria-label="Registros relacionados"></div>
            </article>
            <div class="float-notes-editor" data-fn-editor hidden>
                <button type="button" class="float-notes-back" data-fn-back-list><i class="ic sm">arrow_back</i> Todas as notas</button>
                <div class="float-notes-editor-heading" data-fn-editor-heading>Nova nota</div>
                <label class="sr-only" for="float-note-title">Título da nota</label>
                <input id="float-note-title" type="text" maxlength="160" placeholder="Título (opcional)"
                    data-fn-title>
                <div class="float-notes-text-wrap">
                    <label class="sr-only" for="float-note-content">Texto da nota</label>
                    <div class="rich-editor float-note-rich-editor" data-rich-editor data-maxlength="15000">
                        <div class="rich-editor-toolbar" role="toolbar" aria-label="Formatação da nota">
                            <button type="button" data-editor-command="bold" title="Negrito" aria-label="Negrito"><i
                                    class="ic sm">format_bold</i></button>
                            <button type="button" data-editor-command="italic" title="Itálico" aria-label="Itálico"><i
                                    class="ic sm">format_italic</i></button>
                            <button type="button" data-editor-command="underline" title="Sublinhado"
                                aria-label="Sublinhado"><i class="ic sm">format_underlined</i></button>
                            <button type="button" data-editor-command="insertUnorderedList" title="Lista"
                                aria-label="Lista"><i class="ic sm">format_list_bulleted</i></button>
                            <button type="button" data-editor-command="insertOrderedList" title="Lista numerada"
                                aria-label="Lista numerada"><i class="ic sm">format_list_numbered</i></button>
                            <button type="button" data-editor-command="formatBlock" data-editor-value="h3"
                                title="Título" aria-label="Título"><i class="ic sm">title</i></button>
                            <button type="button" data-editor-command="formatBlock" data-editor-value="blockquote"
                                title="Citação" aria-label="Citação"><i class="ic sm">format_quote</i></button>
                            <button type="button" data-editor-link title="Inserir link" aria-label="Inserir link"><i
                                    class="ic sm">link</i></button>
                        </div>
                        <div id="float-note-content" class="rich-editor-surface" data-rich-editor-surface
                            data-fn-content contenteditable="true" role="textbox" aria-multiline="true"
                            data-placeholder="Anote uma ideia... Use @ para citar clientes, soluções, projetos, leads ou contas.">
                        </div>
                        <button type="button" class="btn float-note-consolidate" data-fn-consolidate disabled
                            title="Salve a nota para consolidar"><i class="ic sm"
                                aria-hidden="true">auto_awesome</i>
                            Consolidar</button>
                        <input type="hidden" data-rich-editor-input value="">
                    </div>
                    <div class="float-notes-suggestions" data-fn-suggestions hidden role="listbox"
                        aria-label="Referências encontradas"></div>
                </div>
                <div class="float-notes-references" data-fn-chips aria-label="Referências vinculadas"></div>
                <div class="float-notes-status" data-fn-status role="status" aria-live="polite">Suas notas ficam
                    visíveis somente para você.</div>
                <div class="float-notes-actions">
                    <button type="button" class="btn btn--primary" data-fn-save><i class="ic sm">save</i>
                        Salvar</button>
                    <button type="button" class="btn btn--ghost" data-fn-archive hidden>Arquivar</button>
                    <button type="button" class="btn btn--ghost" data-fn-restore hidden>Restaurar</button>
                    <button type="button" class="btn btn--ghost float-notes-delete" data-fn-delete hidden><i class="ic sm">delete</i> Excluir</button>
                </div>
                <div class="float-notes-proposal" data-fn-proposal hidden>
                    <span>Revisão sugerida — confira antes de aplicar.</span>
                    <textarea readonly aria-label="Sugestão de consolidação" data-fn-suggestion></textarea>
                    <div class="float-notes-actions">
                        <button type="button" class="btn btn--primary" data-fn-apply>Aplicar sugestão</button>
                        <button type="button" class="btn btn--ghost" data-fn-discard>Descartar</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="float-notes-view" data-fn-view="map" hidden>
            <p class="float-notes-map-intro">Relações explícitas entre suas notas e registros citados. Nenhuma conexão
                é inferida.</p>
            <div class="float-notes-graph" data-fn-graph role="region" aria-label="Mapa das relações entre notas e registros"></div>
        </div>
    </aside>
    <dialog class="float-note-reference-dialog" data-fn-ref-dialog aria-labelledby="float-note-ref-title">
        <div class="float-note-reference-dialog-head">
            <div><span data-fn-ref-type></span><h2 id="float-note-ref-title" data-fn-ref-title>Referência</h2></div>
            <button type="button" class="icon-btn" data-fn-ref-close aria-label="Fechar detalhes"><i class="ic">close</i></button>
        </div>
        <dl class="float-note-reference-fields" data-fn-ref-fields></dl>
        <a class="btn btn--primary" data-fn-ref-open href="#"><i class="ic sm">open_in_new</i> Abrir ficha</a>
    </dialog>
</section>