{{ define "page:content" }}
<form
  method="POST"
  hx-post="{{.formAction}}"
  hx-target="{{.formTarget}}"
  autocomplete="off"
  style="margin-bottom: 10px;"
>
  <div class="w3-container page-container">
  <div class="tab-bar w3-bar w3-light-gray">
    <a
      class="active tab-button w3-bar-item w3-button w3-border-top w3-border-left w3-border-right"
      onclick="bm_open_tab(this, 'tab-button', 'tab', 'general')"
    >
      General
    </a>
    <a
      class="tab-button w3-bar-item w3-button w3-border-top w3-border-left w3-border-right"
      onclick="bm_open_tab(this, 'tab-button', 'tab', 'fields')"
    >
      Fields
    </a>
  </div>

  <div class="tab" id="general" style="display: block">
    <div class="w3-row">
      <div class="w3-half">
        <p>
          <label for="type-title">Title</label>
          <input
            name="Title"
            class="w3-input w3-border"
            id="type-title"
            type="text"
            value="{{.type.Title}}"
          />
        </p>
        <p>
          <label for="type-icon">Icon</label>
          <input
            name="Icon"
            class="w3-input w3-border"
            id="type-icon"
            type="text"
            value="{{.type.Icon}}"
          />
        </p>
      </div>
      <div class="w3-half">
        <p>
        {{ widget_checkboxes "Notebooks" "Notebooks" .type.Notebooks .notebooks `class="w3-check"` }}
        </p>
      </div>
    </div>

    <p>
      <label for="type-description">Description</label>
      <textarea
        name="Description"
        class="w3-input w3-border"
        id="type-description"
        type="text"
        rows="5"
        >{{.type.Description}}</textarea
      >
    </p>

    <p>
      <label class="switch">
        <input
        id="show_summary"
        class="w3-check"
        name="Show_summary"
        type="checkbox"
        value="1"
        {{if eq .type.Show_summary 1}}
        checked="checked"
        {{end}}
      />
        <span class="slider round"></span>
      </label><label for="show_summary" class="label-checkbox">Show summary</label>
    </p>

    <p>
      <label class="switch">
        <input
        id="show_description"
        class="w3-check"
        name="Show_description"
        type="checkbox"
        value="1"
        {{if eq .type.Show_description 1}}
        checked="checked"
        {{end}}
      />
        <span class="slider round"></span>
      </label><label for="show_description" class="label-checkbox">Show description</label>
    </p>
  </div>

  <div class="tab" id="fields" style="display: none">
    <div id="fields-list" style="margin-bottom: 10px">
      {{ template "types:fields" (map "fields" .type.Fields "widgets" $.widgets "uisections" $.uisections)}}
    </div>
      <div class="w3-bar" style="margin-top: 10px;">
        <a
          class="w3-right w3-btn w3-metro-dark-blue w3-round-large"
          hx-get="/type/field-new"
          hx-target="#fields-list"
          hx-swap="beforeend"
          href="#"
          hx-vals="js:{counter: document.getElementById(&quot;fields-list&quot;).childElementCount + 1}"
          ><i class="bi bi-file-plus" title="Add field"></i><span class="w3-hide-small"> Add field</span></a
        >
      </div>
  </div>

  <p class="w3-hide-small w3-container">
      <button class="w3-btn w3-metro-dark-blue w3-round-large">
        <i class="bi bi-floppy" title="Save"></i> Save
      </button>
      <a
        class="w3-btn w3-metro-blue w3-round-large"
        hx-target="#page-content"
        hx-push-url="true"
        hx-get="/types"><i class="bi bi-arrow-left-circle" title="Back"></i> Back</a
      >
  </p>
</div>
<div class="footerNavbar-container">
  <div class="w3-bar footerNavbar w3-hide-medium w3-hide-large w3-round-large">
    <div class="w3-bar-item">
    <button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large" title="Save">
      <i class="bi bi-floppy"></i>
    </button>
    </div>
    <div class="w3-bar-item">
    <a
      class="w3-btn w3-metro-dark-blue w3-round-large"
      hx-target="#page-content"
      hx-push-url="true"
      hx-get="/types"><i class="bi bi-arrow-left-circle" title="Back"></i></a>
    </div>
    </div>
  </div>
</form>
{{ end }}
