{%- liquid
  assign controller_slug = section.settings.controller | default: "pages"
  assign block_lists = block_lists | join : ","
  assign block_types = section.settings.block_types | default: block_lists
  assign page_type_name = item.page_type | capitalize | default: "Default"
  assign language = language |  default: "en"
  assign page_id = item.id
-%}
<div id="main-editor" class="panel-main">
  <form id="main-form" action="/admin/{{ controller_slug }}/{{ page_id }}?language={{ language }}" method="post"></form>

  <div class="panel-space mt-20">
    <h1 class="panel-header">Edit {{ page_type_name }}</h1>
  </div>

  <div class="order-last z-10 sticky bottom-4">
    <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/{{ controller_slug }}/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">
        {%  render 'page/edit/scaffold-input', items: blueprint_props.attributes, key: "@", prefix: prefix, inputs: inputs, placeholders: placeholders.tokens, values: tokens, icon: 'gear', form: "main-form" %}
      </div>
    </div>
  </div>
  <!-- pointers -->
  {% if pointers != blank %}
  <div id="page-pointers" class="min-h-8 mt-16 my-4">
    <input type="checkbox" class="peer hidden" data-state-store="true" checked="checked" id="toggle-pointers">
    <label for="toggle-pointers" 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: "pointers", color: "primary", hover_color: "highlight", icon: "gear" %}
      <div class="grid grid-cols-3 gap-3">
        {%  render 'page/edit/scaffold-input', items: blueprint_props.pointers, key: "*", prefix: prefix, inputs: inputs, placeholders: placeholders.tokens, values: tokens, icon: 'gear', form: "main-form" %}
      </div>
    </div>
  </div>
  {% endif %}

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

  <div class="mb-12">
    {%  render 'page/edit/scaffold-input', items: blueprint_props.fields, key: ".", prefix: prefix, inputs: inputs, placeholders: placeholders.tokens, values: tokens, expandable: true, form: "main-form" %}
  </div>

  <div id="editor-items" class="mb-12">
    <!-- items -->
    {% for item in blueprint_props.items %}
      {%- liquid
        assign item_name = item.name
        assign item_label = item.name | capitalize
        assign default_items = " " |  split: ","
        assign page_items = tokens[item_name] | default: default_items
        assign page_items = page_items | sort : "_weight"
        assign key = "." | append: forloop.index0 | append: item_name | md5
      -%}
      <div id="{{ key }}" class="item-container min-h-8 mb-4">
        <input type="checkbox" class="peer hidden" data-state-store="true" checked="checked" id="toggle-{{ key }}">
        <label class="peer-checked:w-0 peer-checked:px-0 transition-[width] w-auto absolute overflow-hidden inline-block cursor-pointer select-none font-bold text-white bg-gray-400 ps-[24px] md:ps-[55px] pe-6 py-1" for="toggle-{{ key }}">{{ item_label }}<i class="far fa-copy ms-2"></i></label>

        <div class="hidden peer-checked:flex">
          <label
              for="toggle-{{ key }}"
              class="-translate-x-[1px] cursor-pointer select-none transition duration-300 flex justify-center min-w-[24px] md:min-w-[55px] border-l-[2px] border-dotted border-gray-400 hover:border-highlight"
          ><i class="pt-[0.3rem] fa-light fa-grid-2"></i></label>

          <div class="w-full relative">
            <!-- item name -->
            <form
                action="/admin/{{ controller_slug }}/{{ page_id }}?language={{ language }}"
                method="post"
                class="flex justify-between items-center mb-4 sticky top-12 z-10"
            >
              <div class="flex backdrop-blur">
                <label for="toggle-{{ key }}" class="block font-bold cursor-pointer select-none hover:text-highlight">{{ item_name | capitalize }}</label>
                <button type="submit" class="button-add mx-2" name="action" value="item-add:{{ item_name }}"><i class="fa-light fa-circle-plus"></i></button>
                <input type="text" pattern="\d+" name="count:{{ item_name }}" value="1"
                       class="w-8 text-center bg-white text-black rounded-full py-0.5 text-sm border border-gray-300">
              </div>

              <div class="flex backdrop-blur">
                <div class="me-2">
                  <input id="bulk-toggle-{{ key }}" type="checkbox" class="bulk-toggle-item peer hidden" checked data-state-store="true" />
                  <label for="bulk-toggle-{{ key }}" class="peer-checked:block hidden cursor-pointer"><i class="fa-light fa-arrows-to-dotted-line"></i></label>
                  <label for="bulk-toggle-{{ key }}" class="peer-checked:hidden block cursor-pointer"><i class="fa-light fa-arrows-from-dotted-line"></i></label>
                </div>
                <div>
                  <input id="bulk-toggle-attribute-{{ key }}" type="checkbox" class="bulk-toggle-item-attribute peer hidden" checked data-state-store="true" />
                  <label for="bulk-toggle-attribute-{{ key }}" class="peer-checked:block hidden cursor-pointer"><i class="fa-solid fa-gear"></i></label>
                  <label for="bulk-toggle-attribute-{{ key }}" class="peer-checked:hidden block cursor-pointer"><i class="fa-light fa-gear"></i></label>
                </div>
              </div>

            </form>

            <!-- item list -->
            <ul>
            {% for page_item in page_items %}
            {% capture prefix %}.{{ item_name }}[{{ page_item._key }}]{% endcapture %}
            <li class="relative">
              <div class="absolute left-[-24px] md:left-[-55px] w-[24px] md:w-[55px] flex justify-center">
                {% render "page/edit/item/weight", prefix: prefix, weight: page_item._weight, form: "main-form" %}
              </div>

              <div>
                <div class="absolute -right-4 z-10">
                  {% if forloop.length > 1 %}
                    <button type="submit" name="action" value="item-delete:{{ item_name }}|{{ page_item._key }}" form="main-form" class="cursor-pointer hover:text-red-900"><i class="fal fa-times"></i></button>
                  {% endif %}
                </div>

                <input type="checkbox" class="toggle-item peer hidden" data-state-store="true" checked id="toggle-item-{{ prefix }}">
                <div class="w-full peer-checked:block hidden">
                  <!-- item pointers -->
                  {% if item.pointers != blank %}
                    <div>
                      <input type="checkbox" class="toggle-item-pointer peer hidden" data-state-store="true" checked id="toggle-pointer-{{ prefix }}">
                      <label for="toggle-pointer-{{ prefix }}" class="mb-2 peer-checked:hidden inline-block cursor-pointer select-none text-gray-400 ps-2 pe-4 text-center bg-gray-200 rounded-e-full"><i class="far fa-turn-right"></i> Pointers</label>

                      <div class="hidden peer-checked:block mb-3 relative">
                        <label for="toggle-pointer-{{ prefix }}" class="absolute z-10 right-2 cursor-pointer select-none hover:text-highlight"><i class="fas fa-turn-right"></i></label>
                        {% render 'page/edit/scaffold-input', items: item.pointers, key: "*", prefix: prefix, inputs: inputs, placeholders: placeholders.tokens[item_name][page_item._key], values: page_item, icon: 'fa-turn-right', form: "main-form" %}
                      </div>
                    </div>
                  {% endif %}


                  <!-- item attribute -->
                  <div>
                    <input type="checkbox" class="toggle-item-attribute peer hidden" data-state-store="true" checked id="toggle-attribute-{{ prefix }}">
                    <label for="toggle-attribute-{{ prefix }}" class="mb-2 peer-checked:hidden inline-block cursor-pointer select-none text-gray-400 ps-2 pe-4 text-center bg-gray-200 rounded-e-full"><i class="far fa-gear"></i> Settings</label>

                    <div class="hidden peer-checked:block mb-3 relative">
                      <label for="toggle-attribute-{{ prefix }}" class="absolute z-10 right-2 cursor-pointer select-none hover:text-highlight"><i class="fas fa-gear"></i></label>
                      {% render 'page/edit/scaffold-input', items: item.attributes, key: "@", prefix: prefix, inputs: inputs, placeholders: placeholders.tokens[item_name][page_item._key], values: page_item, icon: 'gear', form: "main-form" %}
                    </div>
                  </div>

                  <!-- item field -->
                  <div>
                    {% render 'page/edit/scaffold-input', items: item.fields, key: ".", prefix: prefix, inputs: inputs, placeholders: placeholders.tokens[item_name][page_item._key], values: page_item, form: "main-form" %}
                  </div>
                </div>

                <label for="toggle-item-{{ prefix }}" class="cursor-pointer peer-checked:hidden flex items-start justify-between px-2 w-full bg-gray-200 rounded select-none"><span class="text-gray-400">{{ page_item.name | default: page_item.title | default: "--" }}</span><i class="mt-1 fa-thin fa-chevron-down"></i></label>
                <label for="toggle-item-{{ prefix }}" class="absolute top-0 right-0 cursor-pointer peer-checked:inline hidden pe-2 select-none"><i class="fa-thin fa-chevron-up"></i></label>
              </div>
            </li>
          {% endfor %}
            </ul>
          </div>
          <div class="min-w-[24px] md:min-w-[55px]"></div>
        </div>

      </div>
    {% endfor %}
    <!-- end items -->

  </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">
      {% render "page/edit/block/container", page_id: item.id, placeholder: placeholders.tokens, block_names: block_names, blocks: blocks, limits: block_types, blocks_blueprint: blocks_blueprint, inputs: inputs, block_templates: section.settings.block_templates, form: "main-form" %}
    </div>
  </div>

{{ page_lists | json }}
  {%- 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/{{ controller_slug }}/search/{{ item.page_type }}" method="get"></form>
</div>