{% assign prefix = section.settings.controller | default: "pages" %}
{% assign suffix = section.settings.page_type %}
<form id="search" action="/admin/{{ prefix }}/search{{ suffix }}" method="get"></form>
<div class="w-full panel-space">
  {% assign qs = "" %}
  {% if request.query.pagesize %}{% assign qs = qs | append: "pagesize=" | append: request.query.pagesize %}{% endif %}
  {% if request.query.page %}{% assign qs = qs | append: "&page=" | append: request.query.page %}{% endif %}
  {% if request.query.language %}{% assign qs = qs | append: "&language=" | append: request.query.language %}{% endif %}
  {% if qs != blank %}{% assign qs = '?' | append: qs %}{% endif %}
  <form id="form-list" action="/admin/{{ prefix }}{{ qs }}" method="post"></form>
    <input form="form-list" type="hidden" name="destination" value="/admin/{{ prefix }}/list{{ suffix }}{{ qs }}">
    <table id="table" class="table-primary">
      <thead>
      <tr class="text-left text-primary border-b border-b-gray-300">
        <th class="text-left pe-4 pb-2">Name</th>
        <th class="text-center pe-4 pb-2">Weight</th>
        <th class="text-center pb-2">Published</th>
      </tr>
      </thead>
      <tbody>
      {% assign items = items | sort: "weight" | reverse %}
      {% for item in items %}
        <tr>
          <td class="{% if forloop.index0 == 0 %}pt-4 {% endif %}pe-4 pb-2 overflow-hidden md:w-full md:max-w-[40rem] max-w-[5rem] leading-4">
            <a href="/admin/{{prefix}}/{{item.id}}">{{item.name | truncate: 100}}</a><br>
            <span class="block text-xs text-nowrap overflow-hidden text-ellipsis text-gray-400">/{{ item.slug | truncate: 100 }}</span></td>
          <td class="pe-4 pb-2 text-center">
            <input form="form-list" type="text" name="({{ item.id }}):weight" value="{{ item.weight }}"
            class="mx-auto block px-0 text-xs w-8 md:text-md md:w-16 text-center rounded-full 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"/>
          </td>
          <td class="pb-2 text-center">
            {% if item.published %}
              {% if item.synced %}<i class="fa-sharp fa-solid fa-circle-check"></i>{% else %}<i class="fa-sharp fa-light fa-arrows-rotate text-amber-500"></i>{% endif %}
              {% if item.weight == item.live_weight %}
                <i class="fa-sharp fa-light fa-scale-balanced"></i>
              {% else %}
                <span class="relative">
                  <i class="fa-light fa-scale-unbalanced text-amber-500"></i>
                  <span class="absolute text-[0.5rem] rounded-full bg-amber-800 text-white text-center w-4 h-4 flex items-center justify-center -right-2 -top-2">{{ item.live_weight }}</span>
                </span>
              {% endif %}
            {% else %}
              <button hx-swap="none" hx-post="/admin/{{ prefix }}/{{ item.id }}?language={{ language | default: 'en'}}" name="action" value="publish" class="button-primary">Publish</button>
            {% endif %}
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    <div class="text-end my-3">
      <button form="form-list" type="submit" class="inline-block transition duration-500 rounded-lg px-8 py-2 uppercase text-base leading-8 font-sans text-white bg-secondary hover:bg-gray-900 cursor-pointer">Save Priority</button>
      <button form="form-list" type="submit" name="action" value="publish_weights" class="inline-block transition duration-500 rounded-lg px-8 py-2 uppercase text-base leading-8 font-sans text-white bg-primary hover:bg-gray-900 cursor-pointer">Publish Priority</button>
    </div>
</div>