<div>
  <div class="flex justify-end items-center pb-[5px]">

    <div class="flex gap-[5px] items-center">
      {{#if this.filters.length}}
        {{{button this token=(token  table="gis.registers" form="gis.registers_filter.form" id=register_id) edit=1 }}}
      {{^}}
        <button
          onclick="window.v3plugin.$api(
          {
            api: '/api/insert-filters/{{token id=register_id type="registers"}}',
            method:'put',
            confirm: {
              title:'Підтвердити операцію',
              text: 'Ви впевнені що хочете автоматично заповнити структуру?',
              cancel: 'Скасувати',
              confirm : 'Виконати'
            }
          })"
          class="px-2 py-1 inline-flex border-solid justify-center items-center gap-2 rounded-md font-semibold focus:outline-none text-sm transition-all border border-transparent hover:text-white ring-offset-white bg-orange-100 text-orange-500 hover:bg-orange-500 focus:ring-orange-500">
          Автозаповнити фільтри
        </button>
        {{{button this token=(token  table="gis.registers" form="gis.registers_filter.form" id=register_id) edit=1 title="Додати"}}}
      {{/if}}
    </div>
  </div>
  {{#if this.filters.length}}
  <div class="overflow-x-auto">
    <table class="min-w-full relative divide-y-2 divide-gray-200 bg-white min-w-full overflow-auto divide-y-2 divide-gray-200 bg-white text-[12px] text-gray-600">
      <thead class="text-left font-medium text-gray-700">
      <tr>
        <th class="py-2 last:min-w-[60px] last:max-w-[60px] last:bg-white last:sticky last:right-0">
          Назва колонки
        </th>
        <th class="py-2 last:min-w-[60px] last:max-w-[60px] last:bg-white last:sticky last:right-0">
          Назва колонки українською
        </th>
        <th class="py-2  last:min-w-[60px] last:max-w-[60px] last:bg-white last:sticky last:right-0">
          Тип колонки
        </th>
        <th class="py-2 last:min-w-[60px] last:max-w-[60px] last:bg-white last:sticky last:right-0">
          Класифікатор
        </th>
        <th class="py-2 last:min-w-[60px] last:max-w-[60px] last:bg-white last:sticky last:right-0">
          Відключити
        </th>

      </tr>
      </thead>
      <tbody class="divide-y divide-gray-200">
      {{#each this.filters}}
        <tr class="bg-white odd:bg-gray-50 ">
          <td class="py-2 pr-5  last:sticky last:right-0 ">
            {{id}}
          </td>
          <td class="py-2 pr-5  last:sticky last:right-0 ">
            {{label}}
          </td>
          <td class="py-2 pr-5  last:sticky last:right-0 ">
            {{sellect type data='gis.filter_type'}}
          </td>
          <td class="py-2 pr-5  last:sticky last:right-0 ">
            {{data}}
          </td>
          <td class="py-2 pr-5  last:sticky last:right-0 ">
            {{{badge disabled data='yes_no'}}}
          </td>

        </tr>
      {{/each}}
      </tbody>
    </table>

  </div>
{{^}}
  <div class='bg-gray-200 text-center p-6 rounded-xl'>
    <h3 class='text-lg font-semibold'>Інформація відсутня</h3>
  </div>
{{/if}}
</div>
