{{define "page:content"}}
<dialog id="dialog" class="quickbox-transform">
  <header>
    <h5><i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i> Quicknote transform</h5>
    <span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
  </header>
    <form hx-post="/quickbox/transform/{{ .quicknote.Id }}" hx-target="#message">
      <div class="content">
      <p>
        <label for="item-title">Title</label>
        <input name="Title" id="item-title" type="text" value=""/>
      </p>
      <div class="row">
        <div class="col s12 m6" style="padding-right: 4px">
          <p>
            {{ widget_select "Type_id" "Type" 0 .types `` }}
          </p>
        </div>
        <div class="col s12 m6" style="padding-left: 4px">
          <p>
            {{ widget_checkboxes "Notebooks" "Notebooks" "" .notebooks `` }}
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col s12 m6" style="padding-right: 4px">
          <p>
            <label for="item-tags">Tags</label>
            <input name="Tags" id="item-tags" type="text" value=""/>
          </p>
        </div>
        <div class="col s12 m6" style="padding-left: 4px">
          <p>
            {{ widget_select "Categories" "Categories" "" .categories `multiple="true"` }}
          </p>
        </div>
      </div>
      <p>
        <label for="item-description">Description</label>
        <textarea name="Description" id="item-description" rows="5">{{.quicknote.Note}}</textarea>
      </p>
      <p>
        <label class="switch">
          <input name="Keep_in_quickbox" type="checkbox" value="1"/>
          <span class="slider round"></span>
        </label>
        <span class="label-checkbox">Keep in Quickbox</span>
      </p>
      </div>
      <div id="footer-navbar">
        <button class="main"><i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i> Transform</button>
      </div>
    </form>
</dialog>
{{ end }}