{%- liquid
assign block_lists = block_lists | join : ","
assign block_types = section.settings.block_types | default: block_lists
assign page_type_name = "Default"
assign language = language |  default: "en"
assign page_id = item.id
-%}

{%- for page_list in page_lists -%}
  <datalist id="page_{{ page_list.type }}_datalist">
    {%- for item in page_list.list -%}
      <option value="/{{ item.slug }}#({{ item.name }})" data-id="{{ item.id }}" data-name="{{ item.name }}"></option>
    {%- endfor -%}
  </datalist>
{%- endfor -%}
<form id="form-search" action="/admin/contents/search/{{ item.page_type }}" method="get"></form>

<form id="main-form" action="/admin/pages/{{ page_id }}?language={{ language }}" method="post"></form>
<div class="flex flex-col w-full md:w-[545px] bg-paper border-x border-black-500 min-h-[100vh] py-[144px] font-sans">
  <div class="px-[24px] md:px-[55px] mt-20">
    <h1 class="text-7xl text-primary font-bold mb-4">Edit {{ page_type_name }}</h1>
  </div>

  <div class="order-last z-10">
    <div class="flex">
      <div class="min-w-[24px] md:min-w-[55px] flex justify-center items-center">
      </div>
      <div class="w-full">
        <button form="main-form" type="submit"
                class="transition duration-500 w-full rounded-lg px-3 py-2 uppercase text-base leading-8 font-sans text-white {% if published %}bg-gray-700 hover:bg-gray-900{% else %}bg-primary hover:bg-highlight{% endif %} focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
        >Save Draft</button>
        {% if published %}
          {% if sync != true%}<button class="button-secondary" type="submit" name="action" value="revert" form="main-form">Revert Published</button>{% endif %}
          <button class="button-primary" type="submit" name="action" value="publish" form="main-form">Save</button>
        {% endif %}
      </div>
      <div class="min-w-[55px]">

      </div>
    </div>
    <div class="px-[24px] md:px-[55px]">
      <a class="button-danger" href="/admin/pages/delete/{{ item.id }}">Delete</a>
    </div>
  </div>

  <!-- attributes -->
  <div id="page-attributes" class="min-h-8 mt-16 my-4">
    <input type="checkbox" class="peer hidden" data-state-store="true" checked="checked" id="toggle-attributes">
    <label for="toggle-attributes" class="peer-checked:hidden inline-block cursor-pointer select-none bg-primary flex pe-6 py-1">
      <span class="text-white min-w-[24px] md:min-w-[55px] flex justify-center items-center"><i class="fa-regular fa-gear"></i></span>
      <span class="font-bold text-white" >Settings</span>
    </label>

    <div class="hidden peer-checked:flex">
      {% render "side-toggle", selector: "attributes", color: "primary", hover_color: "highlight", icon: "gear" %}
      <div class="grid grid-cols-3 gap-3">
attribute root
      </div>
    </div>
  </div>

  <div class="sticky top-4 mt-12 mb-6 z-10">
    {% render "page/edit/language", language: language, form: "main-form" %}
  </div>

  <div class="mb-12">
    fields root
  </div>

  <div class="mb-12">
    items root
  </div>

  <div id="page-blocks" class="my-4">
    <input type="checkbox" class="peer hidden" data-state-store="true" checked="checked" id="toggle-blocks">
    <label class="peer-checked:hidden peer-checked:px-0 absolute -translate-x-[3px] rounded cursor-pointer select-none text-white bg-black px-6 py-2 z-10 leading-8 shadow-sm" for="toggle-blocks"><i class="fa-solid fa-grip-dots"></i></label>

    <div class="hidden peer-checked:flex mb-4">
      <label for="toggle-blocks" class="-translate-x-[3px] cursor-pointer transition duration-300 flex justify-center min-w-[24px] md:min-w-[55px] border-l-[5px] border-black hover:border-highlight"><i class="pt-[0.3rem] fa-solid fa-grid-2-plus"></i></label>
      {% assign limit_blocks = limits | split : "," %}
      <div id="add-block" class="flex flex-row items-center">
          <div class="relative w-full">
            <label for="block-select" class="hidden">Available Blocks</label>
            <select id="block-select" name="block-select"
                    class="border-none bg-transparent font-bold"
                    form="main-form"
            >
              <option value="">Content Blocks</option>
              {% if limits != blank %}
                {% for block_name in limit_blocks %}
                  <option value="{{ block_name }}">{{ block_name }}</option>
                {% endfor %}
              {% else %}
                {% for block_name in block_names %}
                  <option value="{{ block_name }}">{{ block_name }}</option>
                {% endfor %}
              {% endif %}
            </select>
          </div>

          <div>
            <button type="submit"
                    class="btn btn-primary"
                    name="action"
                    value="block-add"
                    form="main-form"
            >
              <i class="fas fa-plus-circle" aria-hidden="true"></i>
            </button>
          </div>
        </div>
      <div class="min-w-[24px] md:min-w-[55px]"></div>
    </div>

    <div class="hidden peer-checked:flex w-full">
      blocks root
    </div>
  </div>


  <div>
    <div>
      <div id="page-tags" class="rounded border border-gray-200 bg-gray-100 px-4 p-4 relative mb-4">
        <h5>Tags</h5>
        <input type="checkbox" class="peer hidden" data-state-store="true" checked id="toggle-tags">
        <label for="toggle-tags" class="cursor-pointer float-end peer-checked:hidden inline absolute right-4 top-4 select-none"><i class="fa-thin fa-chevron-down"></i></label>
        <label for="toggle-tags" class="cursor-pointer float-end peer-checked:inline hidden absolute right-4 top-4 select-none"><i class="fa-thin fa-chevron-up"></i></label>
        <div class="hidden peer-checked:block">
          {%- for tag_list in tag_lists -%}
            {% render "page/edit/tag/input", page_id: item.id, label: tag_list, tag_group: tag_list, tag_options: tags[tag_list], tags: item.tags[tag_list] %}
          {%- endfor -%}
        </div>
      </div>
      <div class="rounded border border-gray-200 bg-gray-100 px-4 p-4 relative mb-4">
        <h5>Commands</h5>

        <input type="checkbox" class="peer hidden" data-state-store="true" checked id="toggle-cmd">
        <label for="toggle-cmd" class="cursor-pointer float-end peer-checked:inline hidden absolute right-4 top-4 select-none"><i class="fa-thin fa-chevron-down"></i></label>
        <label for="toggle-cmd" class="cursor-pointer float-end peer-checked:hidden inline absolute right-4 top-4 select-none"><i class="fa-thin fa-chevron-up"></i></label>

        <div class="block peer-checked:hidden">
          {% render "pagefield/textarea/code", label: "data", selector: "cmd-input", value: "", rows: 16, placeholder: "paste content here" %}
          {% render "pagefield/textarea/code", label: "data fields map to key", selector: "cmd-mapping", value: "", rows: 8, placeholder: "keys", color: "text-amber-500" %}

          <div class="relative w-full">
            <label for="cmd-selector" class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900 bg-gray-100">selector</label>
            <input id="cmd-selector" type="text" class="text-xs block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600"/>
          </div>
          <div class="flex">
            <span id="cmd-copy" class="button-secondary text-xs my-1">Copy ID</span>
            <span id="cmd-clean" class="button-secondary text-xs my-1">Clean</span>
            <span id="cmd-run" class="button-secondary text-xs my-1">Run</span>
          </div>

          <div class="text-xs">Available selectors:
            <ul>
              <li>${i} loop index</li>
              <li>${key} key</li>
              <li>----- item separator</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  const attributes = {{ attributes | json }};
  const fields = {{ fields | json }};
  const items = {{ items | json }};
  const tokens = {{ tokens | json }};
  const placeholders = {{ placeholders.tokens | json }};
  //render attributes
  //render fields
  //render items
  //render blocks
</script>