{{ define "page:content" }}

{{ $fields_present := false }}
{{ if (gt (len (index .item.FieldsSection "fields"))  0) }}
{{ $fields_present = true }}
{{ end }}

<form
  method="POST"
  hx-post="{{.formAction}}"
  hx-target="{{.formTarget}}"
>
<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>
    {{ if $fields_present }}
    <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>
    {{ end }}
    <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', 'relationsSection')"
    >
      Relations
    </a>
  </div>

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

    <div id="fields-general">
      {{ template "items:fields" (map "FieldsSection" .item.FieldsSection "FieldsValues" .item.FieldsValues "uisection" "general")}}
    </div>

    {{ if eq .item.Type_show_summary 1}}
    <p>
      <label for="item-summary">Summary</label>
      <textarea
        name="Summary"
        class="w3-input w3-border"
        id="item-summary"
        type="text"
        rows="5"
        >{{.item.Summary}}</textarea
      >
    </p>
    {{ end }}

    {{ if eq .item.Type_show_description 1}}
    <p>
      <label for="item-description">Description</label>
      <textarea
        name="Description"
        class="w3-input w3-border"
        id="item-description"
        type="text"
        rows="10"
        >{{.item.Description}}</textarea
      >
    </p>
    {{ end }}
    <div class="w3-row">
      <div class="w3-half">
        <p>
          <label for="item-tags">Tags</label>
          <input
            name="Tags"
            class="w3-input w3-border"
            id="item-tags"
            type="text"
            value="{{.item.Tags}}"
          />
        </p>   
      </div>
      <div class="w3-half">
        <p>
          {{ widget_select "Categories" "Categories" .item.Categories .categories `multiple="true" class="w3-input w3-border"` }}
        </p>
      </div>
    </div>

    <p>
      <label class="switch">
        <input
        class="w3-check"
        name="On_dashboard"
        type="checkbox"
        value="1"
        {{if
        eq
        .item.On_dashboard
        1
        }}
        checked="checked"
        {{end}}
      />
        <span class="slider round"></span>
      </label><span class="label-checkbox">On dashboard</span>
    </p>
  </div>

  {{ if $fields_present }}
  <div class="tab" id="fields" class="tab" style="display: none">
    <div id="fields-fields">
    {{ template "items:fields" (map "FieldsSection" .item.FieldsSection "FieldsValues" .item.FieldsValues "uisection" "fields")}}
    </div>
  </div>
  {{ end }}

  <div class="tab" id="relationsSection" class="tab" style="display: none">
    <fieldset class="w3-round-medium" style="margin-top: 10px;">
      <legend>Related items</legend>
      <div id="relations" style="margin-top: 8px;">
        {{ template "item:relations" . }}
      </div>
     </fieldset>
    <fieldset class="w3-round-medium" style="margin-top: 8px;">
      <legend>Add items</legend>
      <div class="w3-row">
          <div class="w3-col l6 m9 s10">
            <input
              class="w3-input w3-border"
              id="search-item-relation"
              name="SearchText"
              type="text"
              value=""
              placeholder="Search"
              hx-get="/items/search-for-relations/{{.item.Id}}"
              hx-trigger="search-item-relation, keyup changed delay:1s"
              hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}"
              hx-target="#items-list-for-relations"
            />
          </div>
          <div class="w3-col l6 m3 s1" style="padding-left: 10px;">  
            <a
            class="w3-btn w3-metro-blue w3-round-large"
            hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}"
            hx-target="#items-list-for-relations"
            hx-get="/items/search-for-relations/{{.item.Id}}"
            ><i class="bi bi-search"></i><span class="w3-hide-small"> Find</span></a>
            </div>
      </div>
      <div id="items-list-for-relations" style="margin-top:10px">
      </div>
     </fieldset>
  </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"></i> Save
    </button>
    {{ if not (eq .item.Id 0) }}
    <a
      class="w3-btn w3-metro-blue w3-round-large"
      href="/item/read/{{.item.Id}}"
      hx-get="/item/read/{{.item.Id}}"
      hx-push-url="true"
      hx-target="#page-content"
      ><i class="bi bi-binoculars"></i> View</a
    >
    <a class="w3-button w3-metro-blue w3-delete w3-round-large" hx-delete="/item/delete/{{.item.Id}}" hx-target="#page-content" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"><i class="bi bi-trash"></i> Delete</a>
    <a
     class="w3-btn w3-metro-blue w3-round-large"
     href="#"
     hx-target="#modal-container"
     hx-get="/item/share/{{.item.Id}}"
     title="Share"
     ><i class="bi bi-share-fill"></i> Share</a
    >
    {{ end }}
    <a
      class="w3-btn w3-metro-blue w3-round-large"
      hx-target="#page-content"
      hx-push-url="true"
      hx-get="/items/type/{{.item.Type_id}}"
      ><i class="bi bi-arrow-left-circle"></i> Back</a
    >
  </p>

  <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-button w3-metro-dark-blue w3-round-large" title="Save">
      <i class="bi bi-floppy"></i>
    </button>
    </div>
    {{ if not (eq .item.Id 0) }}
    <div class="w3-bar-item">
      <a
    class="w3-button w3-metro-dark-blue w3-delete w3-round-large"
    hx-delete="/item/delete/{{.item.Id}}"
    hx-target="#page-content"
    hx-trigger="confirmed"
    onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"
    title="Delete"
    ><i class="bi bi-trash"></i>
  </a>
    </div>
    <div class="w3-bar-item">
      <a
    class="w3-button w3-metro-dark-blue w3-round-large"
    href="#"
    hx-target="#modal-container"
    hx-get="/item/share/{{.item.Id}}"
    title="Share"
    ><i class="bi bi-share-fill"></i>
    </a>
    </div>
    <div class="w3-bar-item">
      <a
    class="w3-button w3-metro-dark-blue w3-round-large"
    href="/item/read/{{.item.Id}}"
    hx-get="/item/read/{{.item.Id}}"
    hx-push-url="true"
    hx-target="#page-content"
    title="View"
    ><i class="bi bi-binoculars"></i>
  </a>
    </div>
    {{ end }}
    </div>
    </div>
</form>
{{ end }}