[% IF show_form %]<form action="#" method="POST">[% END %]
<div class="relative">
  <button
    class="iconOnly"
    id="[% paneprefix %]_btn_columns_hover"
    onclick="initStatusTableColumnSorting('[% paneprefix %]', 'mainTable'); toggleElement('[% paneprefix %]_columns_select', undefined, true, undefined, function() { reloadPageIfColumnsChanged('[% paneprefix %]'); }); return false;"
    title="change column visibility"
  >
    <i class="uil uil-columns"></i>
  </button>
  <div class="card absolute z-30 shadow-float" style="display:none;" id="[% paneprefix %]_columns_select">
    <div class="head justify-between">
      <h3>Edit Columns</h3>
      <button class="iconOnly p-0" onclick="toggleElement('[% paneprefix %]_columns_select', undefined, true); reloadPageIfColumnsChanged('[% paneprefix %]'); return false;" title="accept">
        <i class="fa-solid fa-check round small green"></i>
      </button>
    </div>
    <div>
      <table id="[% paneprefix %]_columns_table" class="w-full cellspacing-x">
        <thead>
          <tr>
            <th colspan=3 class="px-2 py-0.5">
              reorder columns with drag/drop<br>rename with double click
            </th>
          </tr>
          <tr>
            <th colspan=3 class="px-2 py-0.5">
              <input type="button"  class="w-full" value="use as my default [% columns_name %] columns" onclick='setDefaultColumns("[% colprefix %]", "[% paneprefix %]")'>
            </th>
          </tr>
          <tr>
            <th colspan=3 class="px-2 py-0.5">
              <input type="button" class="w-full [% paneprefix %]_reset_columns_btn" value="reset my default [% columns_name %] columns" onclick='setDefaultColumns("[% colprefix %]", "[% paneprefix %]", "")'[% IF !has_user_columns.$paneprefix %] disabled[% END %]>
            </th>
          </tr>
          <tr>
            <td colspan=3 class="px-2 py-0.5">
              [% id = paneprefix _ "_columns_table_body"; PROCESS _table_search_field.tt ids=[id] extraCls="w-full" skip_hash=1 skip_form=1 placeholder="filter columns" %]
            </td>
          </tr>
        </thead>

        <tbody class="rowhover" id="[% paneprefix %]_columns_table_body">
          [% FOREACH col = table_columns.$paneprefix %]
            <tr>
              <td class="clickable cursor-move w-5 pr-1 js-drag-handle"><i class="uil uil-draggabledots opacity-75"></i></td>
              <td class="cursor-text px-1 col_[% col.field | html %] js-column-renameable" id="[% paneprefix %]_col_[% col.field | html %]n" width="90%" title="double click to rename column">[% col.title | html %]</td>
              <td class="pl-0"><input type="checkbox" value="[% col.field | html %]" title="[% IF col.defined('orig'); col.orig; ELSE; escape_html(col.title); END %]" class="[% paneprefix %]_col" id="[% paneprefix %]_col_[% col.field | html %]" name="[% paneprefix %]_columns_select" onchange="updateStatusColumns('[% paneprefix %]');"[% IF col.checked %] checked[% END %]></td>
            </tr>
          [% END %]
        </tbody>
      </table>
    </div>
  </div>
</div>
[% IF show_form %]</form>[% END %]
