@page "/Note"
<PageTitle>Note</PageTitle>
<script type="module" src="@Assets["Components/Pages/Note.razor.js"]"></script>

<main>
    <div id="toolbar" class="note-toolbar" role="toolbar" aria-label="Formatting" aria-controls="input">
        <button type="button" data-command="bold" aria-pressed="false" title="Bold (Ctrl+B)"><b>B</b></button>
        <button type="button" data-command="italic" aria-pressed="false" title="Italic (Ctrl+I)"><i>I</i></button>
        <button type="button" data-command="underline" aria-pressed="false" title="Underline (Ctrl+U)"><u>U</u></button>
        <button type="button" data-command="insertUnorderedList" aria-pressed="false" title="Bulleted list">• list</button>
        <button type="button" data-command="insertOrderedList" aria-pressed="false" title="Numbered list">1. list</button>
        <button type="button" id="table-toggle" data-table="toggle" aria-pressed="false" title="Insert a table">table</button>
        <div id="table-tools" class="note-toolbar-group" role="group" aria-label="Table" hidden>
            <button type="button" data-table="rowAbove" title="Insert a row above">↑ row</button>
            <button type="button" data-table="rowBelow" title="Insert a row below">↓ row</button>
            <button type="button" data-table="columnLeft" title="Insert a column to the left">← col</button>
            <button type="button" data-table="columnRight" title="Insert a column to the right">→ col</button>
            <button type="button" data-table="deleteRow" title="Delete this row">× row</button>
            <button type="button" data-table="deleteColumn" title="Delete this column">× col</button>
        </div>
    </div>
    <div id="input" class="editor-tall note-editor" contenteditable="true"
         role="textbox" aria-multiline="true" aria-label="Note" autofocus></div>
    <div class="flex-row note-actions">
        <button type="button" id="save" title="Keep a link to this note on the Storage page">Save</button>
        <a id="saved-notes" href="Storage#notes">Saved notes</a>
    </div>
    <Log/>
</main>