{% extends 'base.html' %}

{% block main %}
        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">Tabler Icons</h1>
              <p class="ax-page-head__subtitle">The system icon set — 5,000+ pixel-perfect glyphs on a 24×24 grid. Click any tile to copy its name.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--secondary ax-btn--pill" href="/icons/line/">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l11 0"/><path d="M9 12l11 0"/><path d="M9 18l11 0"/><path d="M5 6l0 .01"/><path d="M5 12l0 .01"/><path d="M5 18l0 .01"/></svg>
                <span class="ax-btn__label">Line set</span>
              </a>
              <a class="ax-btn ax-btn--primary" href="https://tabler.io/icons" target="_blank" rel="noopener">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9h-6a3 3 0 0 0 0 6h6"/><path d="M12 15h6a3 3 0 0 0 0 -6h-6"/><path d="M9 12h6"/></svg>
                <span class="ax-btn__label">Browse all 5,000+</span>
              </a>
            </div>
          </div>
        </div>

        <!-- ════════════════ CONTENT ════════════════ -->
        <div class="ax-dash-grid"
          x-data="iconGallery({
            mode:'tabler',
            icons:[
              {n:'home',c:'System',k:'house main start',o:'<path d=\'M5 12l-2 0l9 -9l9 9l-2 0\'/><path d=\'M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7\'/><path d=\'M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6\'/>'},
              {n:'settings',c:'System',k:'gear cog config preferences',o:'<path d=\'M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065\'/><path d=\'M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\'/>'},
              {n:'bell',c:'System',k:'notification alert ring',o:'<path d=\'M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6\'/><path d=\'M9 17v1a3 3 0 0 0 6 0v-1\'/>',f:'<path d=\'M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z\'/><path d=\'M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004z\'/>'},
              {n:'heart',c:'Health',k:'love like favorite',o:'<path d=\'M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572\'/>',f:'<path d=\'M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z\'/>'},
              {n:'star',c:'System',k:'rate favorite bookmark',o:'<path d=\'M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245\'/>',f:'<path d=\'M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z\'/>'},
              {n:'user',c:'People',k:'person account profile avatar',o:'<path d=\'M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\'/><path d=\'M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\'/>',f:'<path d=\'M12 2a5 5 0 1 1 -5 5l.005 -.217a5 5 0 0 1 4.995 -4.783z\'/><path d=\'M14 14a5 5 0 0 1 5 5v1a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-1a5 5 0 0 1 5 -5h4z\'/>'},
              {n:'search',c:'System',k:'find magnifier lookup',o:'<path d=\'M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0\'/><path d=\'M21 21l-6 -6\'/>'},
              {n:'mail',c:'Communication',k:'email envelope message inbox',o:'<path d=\'M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10\'/><path d=\'M3 7l9 6l9 -6\'/>'},
              {n:'calendar',c:'System',k:'date schedule event month',o:'<path d=\'M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12\'/><path d=\'M16 3v4\'/><path d=\'M8 3v4\'/><path d=\'M4 11h16\'/><path d=\'M11 15h1\'/><path d=\'M12 15v3\'/>'},
              {n:'camera',c:'Media',k:'photo capture snap lens',o:'<path d=\'M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2\'/><path d=\'M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\'/>',f:'<path d=\'M15 3a2 2 0 0 1 1.995 1.85l.005 .15a1 1 0 0 0 .883 .993l.117 .007h1a3 3 0 0 1 2.995 2.824l.005 .176v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-14a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-9a3 3 0 0 1 2.824 -2.995l.176 -.005h1a1 1 0 0 0 1 -1a2 2 0 0 1 1.85 -1.995l.15 -.005h6zm-3 7a3 3 0 0 0 -2.985 2.698l-.011 .152l-.004 .15l.004 .15a3 3 0 1 0 2.996 -3.15z\'/>'},
              {n:'download',c:'System',k:'save arrow down export',o:'<path d=\'M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\'/><path d=\'M7 11l5 5l5 -5\'/><path d=\'M12 4l0 12\'/>'},
              {n:'upload',c:'System',k:'arrow up import share',o:'<path d=\'M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\'/><path d=\'M7 9l5 -5l5 5\'/><path d=\'M12 4l0 12\'/>'},
              {n:'trash',c:'System',k:'delete remove bin garbage',o:'<path d=\'M4 7l16 0\'/><path d=\'M10 11l0 6\'/><path d=\'M14 11l0 6\'/><path d=\'M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12\'/><path d=\'M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3\'/>'},
              {n:'edit',c:'System',k:'pencil write modify pen',o:'<path d=\'M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1\'/><path d=\'M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415\'/><path d=\'M16 5l3 3\'/>'},
              {n:'plus',c:'System',k:'add new create increment',o:'<path d=\'M12 5l0 14\'/><path d=\'M5 12l14 0\'/>'},
              {n:'check',c:'System',k:'tick done confirm success',o:'<path d=\'M5 12l5 5l10 -10\'/>'},
              {n:'x',c:'System',k:'close cancel cross dismiss',o:'<path d=\'M18 6l-12 12\'/><path d=\'M6 6l12 12\'/>'},
              {n:'bookmark',c:'System',k:'save ribbon flag favorite',o:'<path d=\'M18 7v14l-6 -4l-6 4v-14a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4\'/>',f:'<path d=\'M14 2a5 5 0 0 1 5 5v14a1 1 0 0 1 -1.555 .832l-5.445 -3.63l-5.444 3.63a1 1 0 0 1 -1.55 -.72l-.006 -.112v-14a5 5 0 0 1 5 -5h4z\'/>'},
              {n:'folder',c:'Files',k:'directory storage archive',o:'<path d=\'M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2\'/>',f:'<path d=\'M9 3a1 1 0 0 1 .608 .206l.1 .087l2.706 2.707h6.586a3 3 0 0 1 2.995 2.824l.005 .176v8a3 3 0 0 1 -2.824 2.995l-.176 .005h-14a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-11a3 3 0 0 1 2.824 -2.995l.176 -.005h4z\'/>'},
              {n:'file',c:'Files',k:'document page sheet',o:'<path d=\'M14 3v4a1 1 0 0 0 1 1h4\'/><path d=\'M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2\'/>'},
              {n:'cloud',c:'Weather',k:'storage upload sky sync',o:'<path d=\'M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 1.927 -1.551 3.487 -3.465 3.487h-11.878\'/>'},
              {n:'lock',c:'System',k:'secure private password locked',o:'<path d=\'M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6\'/><path d=\'M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0\'/><path d=\'M8 11v-4a4 4 0 1 1 8 0v4\'/>'},
              {n:'eye',c:'System',k:'view show preview visible',o:'<path d=\'M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\'/><path d=\'M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\'/>'},
              {n:'message-circle',c:'Communication',k:'chat talk comment bubble',o:'<path d=\'M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1\'/>',f:'<path d=\'M5.821 4.91c3.899 -2.765 9.468 -2.539 13.073 .535c3.667 3.129 4.168 8.238 1.152 11.898c-2.841 3.447 -7.965 4.583 -12.231 2.805l-.233 -.101l-4.374 .931l-.04 .006l-.035 .007h-.018l-.022 .005h-.038l-.033 .004l-.021 -.001l-.023 .001l-.033 -.003h-.035l-.022 -.004l-.022 -.002l-.035 -.007l-.034 -.005l-.016 -.004l-.024 -.005l-.049 -.016l-.024 -.005l-.011 -.005l-.022 -.007l-.045 -.02l-.03 -.012l-.011 -.006l-.014 -.006l-.031 -.018l-.045 -.024l-.016 -.011l-.037 -.026l-.04 -.027l-.002 -.004l-.013 -.009l-.043 -.04l-.025 -.02l-.006 -.007l-.056 -.062l-.013 -.014l-.011 -.014l-.039 -.056l-.014 -.019l-.005 -.01l-.042 -.073l-.007 -.012l-.004 -.008l-.007 -.012l-.014 -.038l-.02 -.042l-.004 -.016l-.004 -.01l-.017 -.061l-.007 -.018l-.002 -.015l-.005 -.019l-.005 -.033l-.008 -.042l-.002 -.031l-.003 -.01v-.016l-.004 -.054l.001 -.036l.001 -.023l.002 -.053l.004 -.025v-.019l.008 -.035l.005 -.034l.005 -.02l.004 -.02l.018 -.06l.003 -.013l1.15 -3.45l-.022 -.037c-2.21 -3.747 -1.209 -8.391 2.413 -11.119z\'/>'},
              {n:'phone',c:'Communication',k:'call dial telephone contact',o:'<path d=\'M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2\'/>'},
              {n:'map-pin',c:'Map',k:'location place marker geo',o:'<path d=\'M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\'/><path d=\'M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0\'/>',f:'<path d=\'M18.364 4.636a9 9 0 0 1 .203 12.519l-.203 .21l-4.243 4.242a3 3 0 0 1 -4.097 .135l-.144 -.135l-4.244 -4.243a9 9 0 0 1 12.728 -12.728zm-6.364 3.364a3 3 0 1 0 0 6a3 3 0 0 0 0 -6\'/>'},
              {n:'shopping-cart',c:'E-commerce',k:'buy store basket checkout',o:'<path d=\'M4 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0\'/><path d=\'M15 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0\'/><path d=\'M17 17h-11v-14h-2\'/><path d=\'M6 5l14 1l-1 7h-13\'/>'},
              {n:'credit-card',c:'E-commerce',k:'payment money pay bank',o:'<path d=\'M3 8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -8\'/><path d=\'M3 10l18 0\'/><path d=\'M7 15l.01 0\'/><path d=\'M11 15l2 0\'/>'},
              {n:'chart-bar',c:'Data',k:'graph analytics stats bars',o:'<path d=\'M3 13a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -6\'/><path d=\'M15 9a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -10\'/><path d=\'M9 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -14\'/><path d=\'M4 20h14\'/>'},
              {n:'briefcase',c:'Business',k:'work job portfolio bag',o:'<path d=\'M3 9a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2l0 -9\'/><path d=\'M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2\'/><path d=\'M12 12l0 .01\'/><path d=\'M3 13a20 20 0 0 0 18 0\'/>'},
              {n:'world',c:'Map',k:'globe earth international planet',o:'<path d=\'M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\'/><path d=\'M3.6 9h16.8\'/><path d=\'M3.6 15h16.8\'/><path d=\'M11.5 3a17 17 0 0 0 0 18\'/><path d=\'M12.5 3a17 17 0 0 1 0 18\'/>'},
              {n:'flag',c:'System',k:'banner mark country report',o:'<path d=\'M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0v9a5 5 0 0 1 -7 0a5 5 0 0 0 -7 0v-9\'/><path d=\'M5 21v-7\'/>',f:'<path d=\'M13 2l.018 .001l.016 .001l.083 .005l.011 .002h.011l.038 .009l.052 .008l.016 .006l.011 .001l.029 .011l.052 .014l.019 .009l.015 .004l.028 .014l.04 .017l.021 .012l.022 .01l.023 .015l.031 .017l.034 .024l.018 .011l.013 .012l.024 .017l.038 .034l.022 .017l.008 .01l.014 .012l.036 .041l.026 .027l.006 .009c.12 .147 .196 .322 .218 .513l.001 .012l.002 .041l.004 .064v6h5a1 1 0 0 1 .868 1.497l-.06 .091l-8 11c-.568 .783 -1.808 .38 -1.808 -.588v-6h-5a1 1 0 0 1 -.868 -1.497l.06 -.091l8 -11l.01 -.013l.018 -.024l.033 -.038l.018 -.022l.009 -.008l.013 -.014l.04 -.036l.028 -.026l.008 -.006a1 1 0 0 1 .402 -.199l.011 -.001l.027 -.005l.074 -.013l.011 -.001l.041 -.002z\'/>'},
              {n:'gift',c:'System',k:'present reward box surprise',o:'<path d=\'M3 9a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1l0 -2\'/><path d=\'M12 8l0 13\'/><path d=\'M19 12v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-7\'/><path d=\'M7.5 8a2.5 2.5 0 0 1 0 -5a4.8 8 0 0 1 4.5 5a4.8 8 0 0 1 4.5 -5a2.5 2.5 0 0 1 0 5\'/>'},
              {n:'moon',c:'Weather',k:'night dark theme sleep',o:'<path d=\'M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454l0 .008\'/>',f:'<path d=\'M12 1.992a10 10 0 1 0 9.236 13.838c.341 -.82 -.476 -1.644 -1.298 -1.31a6.5 6.5 0 0 1 -6.864 -10.787l.077 -.08c.551 -.63 .113 -1.653 -.758 -1.653h-.266l-.068 -.006l-.06 -.002z\'/>'},
              {n:'sun',c:'Weather',k:'day light theme bright',o:'<path d=\'M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0\'/><path d=\'M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7\'/>',f:'<path d=\'M12 19a1 1 0 0 1 .993 .883l.007 .117v1a1 1 0 0 1 -1.993 .117l-.007 -.117v-1a1 1 0 0 1 1 -1z\'/><path d=\'M18.313 16.91l.094 .083l.7 .7a1 1 0 0 1 -1.32 1.497l-.094 -.083l-.7 -.7a1 1 0 0 1 1.218 -1.567l.102 .07z\'/><path d=\'M7.007 16.993a1 1 0 0 1 .083 1.32l-.083 .094l-.7 .7a1 1 0 0 1 -1.497 -1.32l.083 -.094l.7 -.7a1 1 0 0 1 1.414 0z\'/><path d=\'M4 11a1 1 0 0 1 .117 1.993l-.117 .007h-1a1 1 0 0 1 -.117 -1.993l.117 -.007h1z\'/><path d=\'M21 11a1 1 0 0 1 .117 1.993l-.117 .007h-1a1 1 0 0 1 -.117 -1.993l.117 -.007h1z\'/><path d=\'M6.213 4.81l.094 .083l.7 .7a1 1 0 0 1 -1.32 1.497l-.094 -.083l-.7 -.7a1 1 0 0 1 1.217 -1.567l.102 .07z\'/><path d=\'M19.107 4.893a1 1 0 0 1 .083 1.32l-.083 .094l-.7 .7a1 1 0 0 1 -1.497 -1.32l.083 -.094l.7 -.7a1 1 0 0 1 1.414 0z\'/><path d=\'M12 2a1 1 0 0 1 .993 .883l.007 .117v1a1 1 0 0 1 -1.993 .117l-.007 -.117v-1a1 1 0 0 1 1 -1z\'/><path d=\'M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z\'/>'},
              {n:'bolt',c:'System',k:'flash lightning fast power energy',o:'<path d=\'M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11\'/>',f:'<path d=\'M13 2l.018 .001l.016 .001l.083 .005l.011 .002h.011l.038 .009l.052 .008l.016 .006l.011 .001l.029 .011l.052 .014l.019 .009l.015 .004l.028 .014l.04 .017l.021 .012l.022 .01l.023 .015l.031 .017l.034 .024l.018 .011l.013 .012l.024 .017l.038 .034l.022 .017l.008 .01l.014 .012l.036 .041l.026 .027l.006 .009c.12 .147 .196 .322 .218 .513l.001 .012l.002 .041l.004 .064v6h5a1 1 0 0 1 .868 1.497l-.06 .091l-8 11c-.568 .783 -1.808 .38 -1.808 -.588v-6h-5a1 1 0 0 1 -.868 -1.497l.06 -.091l8 -11l.01 -.013l.018 -.024l.033 -.038l.018 -.022l.009 -.008l.013 -.014l.04 -.036l.028 -.026l.008 -.006a1 1 0 0 1 .402 -.199l.011 -.001l.027 -.005l.074 -.013l.011 -.001l.041 -.002z\'/>'},
              {n:'paperclip',c:'System',k:'attach clip file link',o:'<path d=\'M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9l6.5 -6.5\'/>'},
              {n:'link',c:'System',k:'url chain hyperlink connect',o:'<path d=\'M9 15l6 -6\'/><path d=\'M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464\'/><path d=\'M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463\'/>'},
              {n:'printer',c:'Devices',k:'print paper office document',o:'<path d=\'M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2\'/><path d=\'M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4\'/><path d=\'M7 15a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2l0 -4\'/>'},
              {n:'music',c:'Media',k:'note song audio sound play',o:'<path d=\'M3 17a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\'/><path d=\'M13 17a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\'/><path d=\'M9 17v-13h10v13\'/><path d=\'M9 8h10\'/>'},
              {n:'photo',c:'Media',k:'image picture gallery landscape',o:'<path d=\'M15 8h.01\'/><path d=\'M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12\'/><path d=\'M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5\'/><path d=\'M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3\'/>',f:'<path d=\'M8.813 11.612c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.986 4.986l.094 .083a1 1 0 0 0 1.403 -1.403l-.083 -.094l-1.292 -1.293l.292 -.293l.106 -.095c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.674 4.675a4 4 0 0 1 -3.775 3.599l-.206 .005h-12a4 4 0 0 1 -3.98 -3.603l6.687 -6.69l.106 -.095zm9.187 -9.612a4 4 0 0 1 3.995 3.8l.005 .2v9.585l-3.293 -3.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-.307 .306l-2.293 -2.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-5.307 5.306v-9.585a4 4 0 0 1 3.8 -3.995l.2 -.005h12zm-2.99 5l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z\'/>'},
              {n:'video',c:'Media',k:'film movie record play camera',o:'<path d=\'M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4\'/><path d=\'M3 8a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2l0 -8\'/>'},
              {n:'microphone',c:'Media',k:'mic record voice audio speak',o:'<path d=\'M9 5a3 3 0 0 1 3 -3a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3a3 3 0 0 1 -3 -3l0 -5\'/><path d=\'M5 10a7 7 0 0 0 14 0\'/><path d=\'M8 21l8 0\'/><path d=\'M12 17l0 4\'/>'},
              {n:'headphones',c:'Devices',k:'audio sound music listen',o:'<path d=\'M4 15a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2l0 -3\'/><path d=\'M15 15a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2l0 -3\'/><path d=\'M4 15v-3a8 8 0 0 1 16 0v3\'/>'},
              {n:'rocket',c:'System',k:'launch startup ship boost',o:'<path d=\'M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3\'/><path d=\'M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3\'/><path d=\'M14 9a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\'/>'},
              {n:'flame',c:'Weather',k:'fire hot trending burn',o:'<path d=\'M12 10.941c2.333 -3.308 .167 -7.823 -1 -8.941c0 3.395 -2.235 5.299 -3.667 6.706c-1.43 1.408 -2.333 3.294 -2.333 5.588c0 3.704 3.134 6.706 7 6.706c3.866 0 7 -3.002 7 -6.706c0 -1.712 -1.232 -4.403 -2.333 -5.588c-2.084 3.353 -3.257 3.353 -4.667 2.235\'/>'}
            ]
          })">

          <!-- ───── GALLERY CARD ───── -->
          <section class="ax-card ax-col--12" role="region" aria-label="Tabler icon gallery">
            <div class="ax-card__header" style="flex-wrap:wrap;gap:var(--ax-space-3);">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">System set</span>
                <h2 class="ax-card__title">Browse the set</h2>
                <p class="ax-card__subtitle"><span class="ax-num" x-text="filtered.length"></span> of <span class="ax-num" x-text="icons.length"></span> shown · toggle outline ↔ filled</p>
              </div>
              <div class="ax-card__actions" style="flex-wrap:wrap;gap:var(--ax-space-2);">
                <!-- outline / filled toggle (Tabler only) -->
                <div class="ax-segment" role="group" aria-label="Icon style">
                  <button type="button" class="ax-segment__option" :aria-pressed="variant==='outline'" @click="variant='outline'">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14"/></svg>Outline
                  </button>
                  <button type="button" class="ax-segment__option" :aria-pressed="variant==='filled'" @click="variant='filled'">
                    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 2a3 3 0 0 1 3 3v14a3 3 0 0 1 -3 3h-14a3 3 0 0 1 -3 -3v-14a3 3 0 0 1 3 -3h14z"/></svg>Filled
                  </button>
                </div>
                <!-- size preview -->
                <div class="ax-segment" role="group" aria-label="Preview size">
                  <button type="button" class="ax-segment__option" :aria-pressed="size==='sm'" @click="size='sm'">SM</button>
                  <button type="button" class="ax-segment__option" :aria-pressed="size==='md'" @click="size='md'">MD</button>
                  <button type="button" class="ax-segment__option" :aria-pressed="size==='lg'" @click="size='lg'">LG</button>
                </div>
                <!-- color preview -->
                <div class="ax-segment" role="group" aria-label="Preview color">
                  <button type="button" class="ax-segment__option" :aria-pressed="color==='text'" @click="color='text'" aria-label="Text color"><span style="font-weight:600;">A</span></button>
                  <button type="button" class="ax-segment__option" :aria-pressed="color==='accent'" @click="color='accent'" aria-label="Accent color"><span style="font-weight:600;color:var(--ax-accent);">A</span></button>
                  <button type="button" class="ax-segment__option" :aria-pressed="color==='success'" @click="color='success'" aria-label="Success color"><span style="font-weight:600;color:var(--ax-success-500);">A</span></button>
                  <button type="button" class="ax-segment__option" :aria-pressed="color==='danger'" @click="color='danger'" aria-label="Danger color"><span style="font-weight:600;color:var(--ax-danger-500);">A</span></button>
                </div>
                <!-- search -->
                <div style="position:relative;min-width:220px;">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);width:var(--ax-icon-sm);height:var(--ax-icon-sm);color:var(--ax-text-subtle);pointer-events:none;"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/></svg>
                  <input type="search" class="ax-input ax-input--sm" placeholder="Search icons…" x-model.debounce.150ms="q" aria-label="Search Tabler icons" style="padding-inline-start:36px;width:100%;">
                </div>
              </div>
            </div>

            <div class="ax-card__body">
              <!-- grid -->
              <div class="ax-icongrid" x-show="filtered.length">
                <template x-for="ic in filtered" :key="ic.n">
                  <button type="button" class="ax-icontile" :title="ic.n" @click="copy(ic.n)" :aria-label="'Copy icon name '+ic.n">
                    <span class="ax-icontile__glyph" :class="['is-'+size,'is-'+color]">
                      <svg viewBox="0 0 24 24" :fill="(variant==='filled' && ic.f) ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" x-html="(variant==='filled' && ic.f) ? ic.f : ic.o"></svg>
                    </span>
                    <span class="ax-icontile__name ax-truncate" x-text="ic.n"></span>
                  </button>
                </template>
              </div>

              <!-- empty state -->
              <div x-show="!filtered.length" x-cloak style="text-align:center;padding:var(--ax-space-9) var(--ax-space-4);">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:48px;height:48px;color:var(--ax-text-subtle);margin-bottom:var(--ax-space-3);"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/><path d="M7 10l6 0"/></svg>
                <p style="font-size:var(--ax-text-md);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);margin:0;">No icons match "<span x-text="q"></span>"</p>
                <p style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);margin:4px 0 var(--ax-space-4);">Try a different name, tag or keyword.</p>
                <button type="button" class="ax-btn ax-btn--secondary ax-btn--sm" @click="q=''">Clear search</button>
              </div>
            </div>
          </section>

          <!-- ───── USAGE NOTE ───── -->
          <section class="ax-card ax-col--12" role="region" aria-label="Usage">
            <div class="ax-card__body" style="display:flex;align-items:flex-start;gap:var(--ax-space-4);flex-wrap:wrap;">
              <span class="ax-avatar ax-avatar--squircle" style="background:var(--ax-accent-wash);color:var(--ax-accent);flex:0 0 auto;">
                <svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9h-6a3 3 0 0 0 0 6h6"/><path d="M12 15h6a3 3 0 0 0 0 -6h-6"/><path d="M9 12h6"/></svg>
              </span>
              <div style="flex:1 1 320px;min-width:0;">
                <h3 style="margin:0 0 4px;font-size:var(--ax-text-md);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Drop-in usage</h3>
                <p style="margin:0 0 var(--ax-space-3);font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Every glyph is inline SVG using <code class="ax-code">currentColor</code> on a 24×24 grid — size with the <code class="ax-code">--ax-icon-*</code> tokens, recolor with the surrounding text color. They retheme with light, dark and all 12 accents for free.</p>
                <pre class="ax-code" style="display:block;padding:var(--ax-space-3) var(--ax-space-4);border-radius:var(--ax-radius-md);background:var(--ax-surface-subtle);overflow-x:auto;font-size:var(--ax-text-xs);margin:0;color:var(--ax-text);">&lt;svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"&gt;…&lt;/svg&gt;</pre>
              </div>
            </div>
          </section>

          <!-- copy confirmation pill -->
          <div class="ax-copytoast" role="status" aria-live="polite" x-show="copied" x-cloak
            x-transition.opacity>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg>
            <span>Copied <code class="ax-code" style="background:transparent;padding:0;color:var(--ax-accent);" x-text="copied"></code></span>
          </div>

        </div>

        <!-- gallery component + page-local styles (role-tokens only) -->
        <style>
          .ax-icongrid{
            display:grid;
            grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
            gap:var(--ax-space-2);
          }
          .ax-icontile{
            display:flex;flex-direction:column;align-items:center;justify-content:center;
            gap:var(--ax-space-2);
            padding:var(--ax-space-4) var(--ax-space-2);
            min-width:0;
            color:var(--ax-text-muted);
            background:var(--ax-surface-subtle);
            border:1px solid var(--ax-border);
            border-radius:var(--ax-radius-md);
            cursor:pointer;
            transition:color var(--ax-motion-fast) var(--ax-ease-standard),
              background var(--ax-motion-fast) var(--ax-ease-standard),
              border-color var(--ax-motion-fast) var(--ax-ease-standard),
              transform var(--ax-motion-fast) var(--ax-ease-standard);
          }
          .ax-icontile:hover{
            color:var(--ax-accent);
            background:var(--ax-accent-wash);
            border-color:var(--ax-border-strong);
            transform:translateY(-2px);
          }
          .ax-icontile:focus-visible{
            outline:2px solid var(--ax-accent);
            outline-offset:2px;
          }
          .ax-icontile__glyph{display:grid;place-items:center;height:32px;}
          .ax-icontile__glyph svg{width:24px;height:24px;}
          .ax-icontile__glyph.is-sm svg{width:18px;height:18px;}
          .ax-icontile__glyph.is-md svg{width:24px;height:24px;}
          .ax-icontile__glyph.is-lg svg{width:32px;height:32px;}
          .ax-icontile__glyph.is-accent{color:var(--ax-accent);}
          .ax-icontile__glyph.is-success{color:var(--ax-success-500);}
          .ax-icontile__glyph.is-danger{color:var(--ax-danger-500);}
          .ax-icontile:hover .ax-icontile__glyph.is-text{color:var(--ax-accent);}
          .ax-icontile__name{
            font-size:var(--ax-text-2xs);
            color:var(--ax-text-subtle);
            text-align:center;
            max-width:100%;
          }
          .ax-copytoast{
            position:fixed;inset-block-end:var(--ax-space-6);inset-inline:0;margin-inline:auto;
            width:max-content;max-width:90vw;z-index:var(--ax-z-toast,80);
            display:flex;align-items:center;gap:var(--ax-space-2);
            padding:var(--ax-space-3) var(--ax-space-5);
            color:var(--ax-text-strong);
            background:var(--ax-surface-overlay);
            border:1px solid var(--ax-border);
            border-radius:var(--ax-radius-pill);
            box-shadow:var(--ax-shadow-lg);
            -webkit-backdrop-filter:blur(18px) saturate(1.1);
            backdrop-filter:blur(18px) saturate(1.1);
            font-size:var(--ax-text-sm);font-weight:var(--ax-weight-medium);
          }
          .ax-copytoast svg{width:var(--ax-icon-sm);height:var(--ax-icon-sm);color:var(--ax-success-500);}
        </style>

        <script>
          function iconGallery(cfg){
            return {
              icons: cfg.icons,
              mode: cfg.mode || 'gallery',
              variant: cfg.variant || 'outline',
              size: 'md',
              color: 'text',
              q: '',
              copied: false,
              _t: null,
              get filtered(){
                const q = this.q.trim().toLowerCase();
                if(!q) return this.icons;
                return this.icons.filter(i =>
                  i.n.toLowerCase().includes(q) ||
                  (i.k && i.k.toLowerCase().includes(q)) ||
                  (i.c && i.c.toLowerCase().includes(q))
                );
              },
              copy(name){
                try { navigator.clipboard?.writeText(name); } catch(e){ /* noop */ }
                this.copied = name;
                clearTimeout(this._t);
                this._t = setTimeout(() => { this.copied = false; }, 1500);
              }
            };
          }
        </script>
      
{% endblock %}