{{define "page:content"}}
<div id="modal" class="w3-modal w3-modal-full">
  <div class="w3-modal-content w3-round-large w3-animate-top">
    <header class="w3-container">
      <h5>
        <i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i> Quicknote transform
      </h5>
    </header>
    <form hx-post="/quickbox/transform/{{ .quicknote.Id }}" hx-target="#message">
      <div class="w3-padding" style="overflow: auto;">
      <p>
        <label for="item-title">Title</label>
        <input
          name="Title"
          class=" w3-border"
          id="item-title"
          type="text"
          value=""
        />
      </p>
      <div class="w3-row">
        <div class="w3-half" style="padding-right: 4px">
          <p>
            {{ widget_select "Type_id" "Type" 0 .types `class=" w3-border"` }}
          </p>
        </div>
        <div class="w3-half" style="padding-left: 4px">
          <p>
            {{ widget_checkboxes "Notebooks" "Notebooks" "" .notebooks `class=""` }}
          </p>
        </div>
      </div>
      <div class="w3-row">
        <div class="w3-half" style="padding-right: 4px">
          <p>
            <label for="item-tags">Tags</label>
            <input
              name="Tags"
              class=" w3-border"
              id="item-tags"
              type="text"
              value=""
            />
          </p>
        </div>
        <div class="w3-half" style="padding-left: 4px">
          <p>
            {{ widget_select "Categories" "Categories" "" .categories `multiple="true" class=" w3-border"` }}
          </p>
        </div>
      </div>
      <p>
        <label for="item-description">Description</label>
        <textarea
          name="Description"
          class=" w3-border"
          id="item-description"
          type="text"
          rows="5"
          >{{.quicknote.Note}}</textarea
        >
      </p>
      <p>
        <label class="switch">
          <input
            class=""
            name="Keep_in_quickbox"
            type="checkbox"
            value="1"
          />
          <span class="slider round"></span> </label
        ><span class="label-checkbox">Keep in Quickbox</span>
      </p>
      <p class="hide-small w3-container" style="text-align: center;">
          <button
            type="submit"
            class="w3-btn w3-metro-dark-blue w3-round-large"
          >
            <i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i> Transform
          </button>
          <button
            type="button"
            _="on click remove #modal"
            class="w3-btn w3-light-gray w3-round-large"
          >
            Cancel
          </button>
      </p>
      </div>
      <div class="footerNavbar-container" style="padding-left:8px;">
        <div class="w3-bar footerNavbar hide-medium hide-large w3-round-large">
          <div class="w3-bar-item">
            <button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large">
              <i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i>
            </button>
          </div>
          <div class="w3-bar-item">
            <button type="button" _="on click remove #modal" class="w3-btn w3-metro-dark-blue w3-round-large">
              <i class="bi bi-x-circle-fill"></i>
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
{{ end }}