{% comment %}
   Reusable FA6 Icon Picker
   Usage:
     {% include 'cms/partials/icon_picker.html' with field_name='icon_class' current_value=cat.icon_class picker_id='cat-icon' %}

   Parameters:
     field_name    — form field name (required)
     current_value — current icon class string
     picker_id     — unique suffix to avoid ID collisions on pages with multiple pickers
{% endcomment %}

{% with pid=picker_id|default:'main' cur=current_value|default:'' %}
<div class="fa-picker-wrap" id="picker-wrap-{{ pid }}">

  <div style="display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem">
    <div id="picker-preview-{{ pid }}" style="width:44px;height:44px;border-radius:9px;background:rgba(22,81,123,.08);border:1.5px solid rgba(22,81,123,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0">
      <i id="picker-preview-icon-{{ pid }}" class="{{ cur|default:'fa-solid fa-tag' }}" style="font-size:1.3rem;color:#16517b"></i>
    </div>
    <div style="flex:1;min-width:0">
<input type="text"
             name="{{ field_name }}"
             id="picker-input-{{ pid }}"
             value="{{ cur }}"
             placeholder="fa-solid fa-tag"
             autocomplete="off"
             style="width:100%;border:1.5px solid var(--cms-border);border-radius:7px;padding:.4rem .7rem;font-size:.82rem;color:var(--cms-text);font-family:monospace;background:#fff"
             oninput="faPickerSyncPreview('{{ pid }}',this.value)">
    </div>
    <button type="button" onclick="faPickerToggle('{{ pid }}')"
            style="background:#033152;color:#fff;border:none;border-radius:8px;padding:.45rem .85rem;font-size:.78rem;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0">
      <i class="fa-solid fa-icons me-1"></i>Browse
    </button>
  </div>

  <div id="picker-panel-{{ pid }}" style="display:none;border:1.5px solid var(--cms-border);border-radius:10px;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.1);padding:.85rem;margin-top:.3rem">

    <div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem">
      <div style="display:flex;align-items:center;gap:.5rem;flex:1;background:#f8fafc;border:1.5px solid var(--cms-border);border-radius:8px;padding:.4rem .75rem">
        <i class="fa-solid fa-magnifying-glass" style="font-size:.75rem;color:#94a3b8"></i>
        <input type="text" id="picker-search-{{ pid }}" placeholder="Search icons…"
               autocomplete="off"
               style="border:none;background:none;outline:none;font-size:.85rem;width:100%;color:var(--cms-text)"
               oninput="faPickerFilter('{{ pid }}',this.value)">
      </div>
      <button type="button" onclick="faPickerToggle('{{ pid }}')"
              style="background:none;border:none;color:#94a3b8;cursor:pointer;font-size:1rem;padding:.2rem .4rem">
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>

    <div id="picker-grid-{{ pid }}"
         style="display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:4px;max-height:280px;overflow-y:auto">
    </div>
    <div id="picker-empty-{{ pid }}" style="display:none;text-align:center;padding:1.5rem 0;color:var(--cms-muted);font-size:.82rem">No icons match</div>
  </div>

</div>
{% endwith %}

<style>
.fa-picker-btn {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:7px 4px 5px;border:1.5px solid transparent;border-radius:8px;
  background:#f8fafc;cursor:pointer;font-size:.6rem;color:#64748b;
  transition:all .12s;min-width:0;
}
.fa-picker-btn:hover { border-color:#16517b;background:#eff6ff;color:#16517b; }
.fa-picker-btn.active { border-color:#033152;background:#e0ecf8;color:#033152; }
.fa-picker-btn i { font-size:1.1rem; }
.fa-picker-btn span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52px;font-size:.58rem;text-align:center; }
</style>
<script>
(function(){
const FA_ICONS = [
  // Interface & Navigation
  ['fa-solid fa-house','home'],['fa-solid fa-gear','gear'],['fa-solid fa-sliders','sliders'],
  ['fa-solid fa-bars','bars'],['fa-solid fa-ellipsis','more'],['fa-solid fa-xmark','close'],
  ['fa-solid fa-magnifying-glass','search'],['fa-solid fa-filter','filter'],['fa-solid fa-sort','sort'],
  ['fa-solid fa-arrow-left','arrow-left'],['fa-solid fa-arrow-right','arrow-right'],
  ['fa-solid fa-arrow-up','arrow-up'],['fa-solid fa-arrow-down','arrow-down'],
  ['fa-solid fa-chevron-left','chevron-l'],['fa-solid fa-chevron-right','chevron-r'],
  ['fa-solid fa-angle-up','angle-up'],['fa-solid fa-angle-down','angle-dn'],
  ['fa-solid fa-circle-chevron-right','circ-chev'],
  // Communication
  ['fa-solid fa-envelope','email'],['fa-solid fa-phone','phone'],
  ['fa-solid fa-comment','comment'],['fa-solid fa-comments','comments'],
  ['fa-solid fa-message','message'],['fa-solid fa-paper-plane','send'],
  ['fa-solid fa-bell','bell'],['fa-solid fa-bullhorn','megaphone'],
  ['fa-solid fa-headset','headset'],['fa-solid fa-microphone','mic'],
  ['fa-solid fa-video','video'],['fa-solid fa-inbox','inbox'],
  // Business & Commerce
  ['fa-solid fa-briefcase','briefcase'],['fa-solid fa-building','building'],
  ['fa-solid fa-shop','shop'],['fa-solid fa-store','store'],
  ['fa-solid fa-cart-shopping','cart'],['fa-solid fa-basket-shopping','basket'],
  ['fa-solid fa-tag','tag'],['fa-solid fa-tags','tags'],
  ['fa-solid fa-receipt','receipt'],['fa-solid fa-file-invoice','invoice'],
  ['fa-solid fa-file-invoice-dollar','invoice-$'],['fa-solid fa-credit-card','card'],
  ['fa-solid fa-money-bill','money'],['fa-solid fa-money-bill-wave','money-w'],
  ['fa-solid fa-coins','coins'],['fa-solid fa-pound-sign','pound'],
  ['fa-solid fa-dollar-sign','dollar'],['fa-solid fa-percent','percent'],
  ['fa-solid fa-chart-line','chart-ln'],['fa-solid fa-chart-bar','chart-bar'],
  ['fa-solid fa-chart-pie','chart-pie'],['fa-solid fa-trending-up','trending'],
  ['fa-solid fa-handshake','handshake'],['fa-solid fa-award','award'],
  ['fa-solid fa-trophy','trophy'],['fa-solid fa-gem','gem'],
  ['fa-solid fa-suitcase','suitcase'],['fa-solid fa-industry','industry'],
  // Technology
  ['fa-solid fa-laptop','laptop'],['fa-solid fa-desktop','desktop'],
  ['fa-solid fa-mobile-screen','mobile'],['fa-solid fa-tablet-screen-button','tablet'],
  ['fa-solid fa-server','server'],['fa-solid fa-database','database'],
  ['fa-solid fa-cloud','cloud'],['fa-solid fa-cloud-arrow-up','upload'],
  ['fa-solid fa-cloud-arrow-down','download'],['fa-solid fa-wifi','wifi'],
  ['fa-solid fa-network-wired','network'],['fa-solid fa-satellite-dish','satellite'],
  ['fa-solid fa-microchip','chip'],['fa-solid fa-hard-drive','hdd'],
  ['fa-solid fa-memory','memory'],['fa-solid fa-code','code'],
  ['fa-solid fa-terminal','terminal'],['fa-solid fa-bug','bug'],
  ['fa-solid fa-robot','robot'],['fa-solid fa-brain','brain'],
  ['fa-solid fa-keyboard','keyboard'],['fa-solid fa-print','print'],
  ['fa-solid fa-qrcode','qr'],['fa-solid fa-barcode','barcode'],
  ['fa-brands fa-github','github'],['fa-brands fa-python','python'],
  ['fa-brands fa-js','javascript'],['fa-brands fa-react','react'],
  ['fa-brands fa-stripe-s','stripe'],['fa-brands fa-google','google'],
  ['fa-brands fa-apple','apple'],['fa-brands fa-android','android'],
  ['fa-brands fa-wordpress','wordpress'],['fa-brands fa-shopify','shopify'],
  // Design & Media
  ['fa-solid fa-palette','palette'],['fa-solid fa-paintbrush','brush'],
  ['fa-solid fa-pen-nib','pen-nib'],['fa-solid fa-pen-ruler','ruler'],
  ['fa-solid fa-crop-simple','crop'],['fa-solid fa-layer-group','layers'],
  ['fa-solid fa-vector-square','vector'],['fa-solid fa-image','image'],
  ['fa-solid fa-images','images'],['fa-solid fa-film','film'],
  ['fa-solid fa-music','music'],['fa-solid fa-play','play'],
  ['fa-solid fa-wand-magic-sparkles','magic'],
  // People & Roles
  ['fa-solid fa-user','user'],['fa-solid fa-users','users'],
  ['fa-solid fa-user-tie','user-tie'],['fa-solid fa-user-gear','user-gear'],
  ['fa-solid fa-user-shield','user-shld'],['fa-solid fa-person','person'],
  ['fa-solid fa-id-card','id-card'],['fa-solid fa-id-badge','id-badge'],
  ['fa-solid fa-graduation-cap','grad'],['fa-solid fa-chalkboard-user','teach'],
  // Files & Documents
  ['fa-solid fa-file','file'],['fa-solid fa-file-pdf','pdf'],
  ['fa-solid fa-file-word','word'],['fa-solid fa-file-excel','excel'],
  ['fa-solid fa-file-code','code-f'],['fa-solid fa-folder','folder'],
  ['fa-solid fa-folder-open','folder-o'],['fa-solid fa-copy','copy'],
  ['fa-solid fa-clipboard','clipboard'],['fa-solid fa-book','book'],
  ['fa-solid fa-book-open','book-o'],['fa-solid fa-newspaper','news'],
  ['fa-solid fa-pen-to-square','edit'],['fa-solid fa-trash','trash'],
  // Security & Settings
  ['fa-solid fa-lock','lock'],['fa-solid fa-lock-open','unlock'],
  ['fa-solid fa-shield-halved','shield'],['fa-solid fa-shield-check','shield-ok'],
  ['fa-solid fa-key','key'],['fa-solid fa-fingerprint','fingerprint'],
  ['fa-solid fa-eye','eye'],['fa-solid fa-eye-slash','eye-off'],
  ['fa-solid fa-plug','plug'],['fa-solid fa-power-off','power'],
  ['fa-solid fa-wrench','wrench'],['fa-solid fa-screwdriver-wrench','tools'],
  // Status & Indicators
  ['fa-solid fa-circle-check','check'],['fa-solid fa-circle-xmark','x-circle'],
  ['fa-solid fa-circle-info','info'],['fa-solid fa-triangle-exclamation','warn'],
  ['fa-solid fa-check','checkmark'],['fa-solid fa-star','star'],
  ['fa-solid fa-heart','heart'],['fa-solid fa-thumbs-up','thumbs-up'],
  ['fa-solid fa-fire','fire'],['fa-solid fa-bolt','bolt'],
  ['fa-solid fa-crown','crown'],['fa-solid fa-flag','flag'],
  ['fa-solid fa-bookmark','bookmark'],['fa-solid fa-location-dot','location'],
  ['fa-solid fa-map','map'],['fa-solid fa-globe','globe'],
  ['fa-solid fa-earth-europe','earth'],['fa-solid fa-plane','plane'],
  ['fa-solid fa-rocket','rocket'],['fa-solid fa-satellite','satellite2'],
  // Health, Life & Misc
  ['fa-solid fa-house-medical','clinic'],['fa-solid fa-stethoscope','stethoscope'],
  ['fa-solid fa-pills','pills'],['fa-solid fa-syringe','syringe'],
  ['fa-solid fa-dumbbell','dumbbell'],['fa-solid fa-bicycle','bicycle'],
  ['fa-solid fa-car','car'],['fa-solid fa-truck','truck'],
  ['fa-solid fa-ship','ship'],['fa-solid fa-anchor','anchor'],
  ['fa-solid fa-sun','sun'],['fa-solid fa-moon','moon'],
  ['fa-solid fa-snowflake','snow'],['fa-solid fa-leaf','leaf'],
  ['fa-solid fa-seedling','seedling'],['fa-solid fa-tree','tree'],
  ['fa-solid fa-recycle','recycle'],['fa-solid fa-solar-panel','solar'],
  ['fa-solid fa-lightbulb','idea'],['fa-solid fa-puzzle-piece','puzzle'],
  ['fa-solid fa-cubes','cubes'],['fa-solid fa-sitemap','sitemap'],
  ['fa-solid fa-diagram-project','diagram'],['fa-solid fa-calendar','calendar'],
  ['fa-solid fa-clock','clock'],['fa-solid fa-hourglass-half','hourglass'],
  // Social
  ['fa-brands fa-facebook-f','facebook'],['fa-brands fa-instagram','instagram'],
  ['fa-brands fa-x-twitter','twitter'],['fa-brands fa-linkedin-in','linkedin'],
  ['fa-brands fa-youtube','youtube'],['fa-brands fa-tiktok','tiktok'],
  ['fa-brands fa-whatsapp','whatsapp'],['fa-brands fa-telegram','telegram'],
];

window._faPickerIcons = FA_ICONS;

window.faPickerSyncPreview = function(pid, val) {
  var el = document.getElementById('picker-preview-icon-' + pid);
  if (el) el.className = val || 'fa-solid fa-tag';
  // keep grid in sync
  var active = document.querySelector('#picker-grid-' + pid + ' .fa-picker-btn.active');
  if (active) active.classList.remove('active');
  if (val) {
    var match = document.querySelector('#picker-grid-' + pid + ' [data-cls="' + val + '"]');
    if (match) match.classList.add('active');
  }
};

window.faPickerToggle = function(pid) {
  var panel = document.getElementById('picker-panel-' + pid);
  var isOpen = panel.style.display !== 'none';
  panel.style.display = isOpen ? 'none' : '';
  if (!isOpen) {
    faPickerBuild(pid);
    var si = document.getElementById('picker-search-' + pid);
    si.value = ''; faPickerFilter(pid, '');
    si.focus();
  }
};

window.faPickerBuild = function(pid) {
  var grid = document.getElementById('picker-grid-' + pid);
  if (grid.children.length) return; // already built
  var curVal = (document.getElementById('picker-input-' + pid) || {}).value || '';
  FA_ICONS.forEach(function(item) {
    var cls = item[0], lbl = item[1];
    var btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'fa-picker-btn' + (cls === curVal ? ' active' : '');
    btn.setAttribute('data-cls', cls);
    btn.setAttribute('data-lbl', lbl + ' ' + cls);
    btn.innerHTML = '<i class="' + cls + '"></i><span>' + lbl + '</span>';
    btn.addEventListener('click', function() {
      var input = document.getElementById('picker-input-' + pid);
      input.value = cls;
      faPickerSyncPreview(pid, cls);
      document.querySelectorAll('#picker-grid-' + pid + ' .fa-picker-btn').forEach(function(b){ b.classList.remove('active'); });
      btn.classList.add('active');
      document.getElementById('picker-panel-' + pid).style.display = 'none';
    });
    grid.appendChild(btn);
  });
};

window.faPickerFilter = function(pid, q) {
  q = q.toLowerCase().trim();
  var grid = document.getElementById('picker-grid-' + pid);
  var empty = document.getElementById('picker-empty-' + pid);
  var visible = 0;
  grid.querySelectorAll('.fa-picker-btn').forEach(function(btn) {
    var match = !q || btn.getAttribute('data-lbl').toLowerCase().includes(q);
    btn.style.display = match ? '' : 'none';
    if (match) visible++;
  });
  empty.style.display = visible ? 'none' : '';
};
}());
</script>