{{ attach_library('budvue/products-script') }}  
{{ attach_library('ajax_link/ajaxLink') }}
<div class="storeTitle">{{ storeTitle }}</div>
{{ drupal_block('product_override_search_block') }}
{# Your existing Twig template code #}

{# Loader element #}
<div id="loader" class="loader"><div class="loader-text">Retrieving Data<p></p><div class="loader"><img src="/modules/custom/cstv_main/images/loader.gif"></div></div></div>
{# <input type="text" id="productNameSearch" onkeyup="productSearch()" placeholder="Search for Products">#}
<div class="product-table__wrap">
  <table id="product-table" data-pos="{{ pos }}" data-companyid="{{ companyId }}" data-locationid="{{ locationId }}">
    <thead>
      <tr>
        <th>Photo</th>
        <th colspan="2" class="th-productName">Product Name</th>
        <th>SKU</th>
        <th>UPC/GTIN</th>
        {# <th class="th-productName">Product Name<span class="switchicon"><img src="/modules/custom/cstv_main/images/switch.png" width="15px" height="15px"></span></th> #}
        <th>Category</th>
        {# <th>Producer</th> #}
        <th>Format</th>
        <th>Strain</th>
        <th>Size</th>
        <th>Units</th>
        <th>Price</th>
        <th>THC</th>
        <th>CBD</th>
      </tr>
    </thead>
    <tbody>
      {% for product in products %}
        <tr data-productid="{{ product.id }}">
          {% if product.image is not empty %}
            <td class="product-with-image"><a href="{{ product.image }}">✔</a></td>
          {% else %}
            <td class="product-without-image">X</td>
          {% endif %}
          <td colspan="2" class="product-name"><a href="/product/edit/{{ storeId }}?productID={{ product.id }}&destination=/product-override/{{ storeId }}">{{ product.product_name }}</a></td>
          <td>{{ product.sku }}</td>
          <td>{{ product.upc }}</td>
          <td>{{ product.category }}</td>
          {# <td>{{ product.source }}</td> #}
          <td>{{ product.format }}</td>
          <td>{{ product.strainType }}</td>
          <td>{{ product.netSize }}</td>
          <td>{{ product.netSizeUom }}</td>
          <td>${{ product.sale_price }}</td>
          {# {% if product.sale_price != product.list_price %}
            <td class="{{ product.saleDifference }}">${{ product.sale_price }}</td>
            {% else %}
            <td class="{{ product.saleDifference }}"></td>
          {% endif %} #}
          <td>{{ product.thcMax }}{{ product.thcUom }}</td>
          <td>{{ product.cbdMax }}</td>
          {# <td>
            <input type="checkbox" name="Clearance" value="{{ product.id }}" id="{{ product.id }}">
          </td> #}
          {# <td>
            <input type="checkbox" name="StaffPicks" value="{{ product.id }}" id="{{ product.id }}">
          </td>
          <td>
            <input type="checkbox" name="New" value="{{ product.id }}" id="{{ product.id }}">
          </td> #}
        </tr>
      {% endfor %}
    </tbody>
    {# <tfoot>
      <tr>
        <td colspan="15">
          {% set itemsPerPage = pager.items_per_page %}
          {% set currentPage = pager.current_page %}
          {% set totalItems = pager.total_items %}
          {% set totalPages = pager.total_pages %}

          <nav aria-label="Product pagination">
            <ul class="pagination">
              {% for page in 1..totalPages %}
                <li class="page-item {% if page == currentPage %}active{% endif %}">
                  <a class="page-link" href="?page={{ page }}">{{ page }}</a>
                </li>
              {% endfor %}
            </ul>
          </nav>
        </td>
      </tr>
    </tfoot> #}
  <tfoot>
    <tr>
      <td colspan="15">
        {% set itemsPerPage = pager.items_per_page %}
        {% set currentPage = pager.current_page %}
        {% set totalItems = pager.total_items %}
        {% set totalPages = pager.total_pages %}

        {# Get the current URL with existing query parameters #}
        {% set currentUrlStringWithParams = currentUrlString ~ ('?' in currentUrlString ? '&' : '?') ~ query_string | raw %}

        <nav aria-label="Product pagination">
          <ul class="pagination">
            {% for page in 1..totalPages %}
              <li class="page-item {% if page == currentPage %}active{% endif %}">
                {# Add the existing query parameters to pagination links #}
                <a class="page-link" href="{{ currentUrlStringWithParams }}page={{ page }}">{{ page }}</a>
              </li>
            {% endfor %}
          </ul>
        </nav>
      </td>
    </tr>
  </tfoot>


  </table>
</div>