{{ 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="page-container">
  <div class="tab-bar">
    <a class="active tab-button" onclick="bm_open_tab(this, 'tab-button', 'tab', 'general')">General</a>
    {{ if $fields_present }}
    <a class="tab-button" onclick="bm_open_tab(this, 'tab-button', 'tab', 'fields')">Fields</a>
    {{ end }}
    <a class="tab-button" 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" id="item-title" type="text" value="{{.item.Title}}" />
        </p>
        <p>
          {{ widget_select "Type_id" "Type" .item.Type_id .types `style="width: 100%"` }}
        </p>
      </div>
      <div class="w3-half">
        <p>
          {{ widget_checkboxes "Notebooks" "Notebooks" .item.Notebooks .notebooks `` }}
        </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" 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" 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" id="item-tags" type="text" value="{{.item.Tags}}" />
        </p>   
      </div>
      <div class="w3-half">
        <p>
          {{ widget_slim_select "Categories" "Categories" .item.Categories .categories `multiple="true"` }}
        </p>
      </div>
    </div>

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

  {{ if $fields_present }}
  <div class="tab" id="fields" 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" 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 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="button w3-metro-blue" 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="hide-small"> Find</span></a>
            </div>
      </div>
      <div id="items-list-for-relations" style="margin-top:10px">
      </div>
     </fieldset>
  </div>
</div>
  <p class="hide-small w3-container">
    <button class="w3-metro-dark-blue">
      <i class="bi bi-floppy"></i> Save
    </button>
    {{ if not (eq .item.Id 0) }}
    <a class="button w3-metro-blue" 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="button w3-metro-blue w3-delete" 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="button w3-metro-blue" 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="button w3-metro-blue" 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 hide-medium hide-large">
    <div class="w3-bar-item">
    <button type="submit" class="w3-metro-dark-blue" title="Save">
      <i class="bi bi-floppy"></i>
    </button>
    </div>
    {{ if not (eq .item.Id 0) }}
    <div class="w3-bar-item">
      <a class="button w3-metro-dark-blue w3-delete" 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="button w3-metro-dark-blue" 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="button w3-metro-dark-blue" 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 }}