<table class="table" style="display:block;overflow-x:scroll">
  <thead>
    <tr class="w3-dark-blue">
      {% include "inventory/_search_result_th.html" :url "/inventory/search" :target "search-results" :name "Product Name" :sort "product-name"
      :class "w3-col m5" %}
      {% include "inventory/_search_result_th.html" :url "/inventory/search" :target "search-results" :name "Condition" :sort "condition"
      :class "w3-col m1" %}
      <th class="w3-col m1">Save</th>
      {% include "inventory/_search_result_th.html" :url "/inventory/search" :target "search-results" :name "Qty" :sort "qty"
      :class "w3-col m1" %}
      {% include "inventory/_search_result_th.html" :url "/inventory/search" :target "search-results" :name "Opt. Qty" :sort "opt-qty"
      :class "w3-col m1" %}
      {% include "inventory/_search_result_th.html" :url "/inventory/search" :target "search-results" :name "Buy Price" :sort "buy-price"
      :class "w3-col m1" %}
      {% include "inventory/_search_result_th.html" :url "/inventory/search" :target "search-results" :name "Sell Price" :sort "sell-price"
      :class "w3-col m1" %}
      {% include "inventory/_search_result_th.html" :url "/inventory/search" :target "search-results" :name "Category" :sort "category"
      :class "w3-col m1" %}
    </tr>
  </thead>
  {% for condition in variants %}
  <tbody>
    <tr class="w3-hover-green">
      <!-- Product Name -->
      {% include "inventory/_view_result.html" :id card.id :name "product-name" :type "text" :value card.product-name
      :class "w3-col m5" %}
      <!-- Condition -->
      {% include "inventory/_view_result.html" :id card.id :name "condition" :type "text" :value condition.name
      :class "w3-col m1" %}
      <!-- Save/Edit/Delete -->
      <td class="w3-center w3-col m1">
        <form>
          <input type="hidden" name="condition-id-{{ condition.id }}" value="{{ condition.id }}">
          {{ token | safe }}
          <button
            style="background:none;border:none;padding:0;cursor:pointer;color:inherit"
            hx-include="[name='condition-id-{{ condition.id }}'], [name='buy-price-{{ forloop.counter0 }}'], [name='sell-price-{{ forloop.counter0 }}'], [name='total-qty-{{ forloop.counter0 }}']"
            hx-patch="/inventory/{{ card.id }}/patch"
            hx-swap="outerHTML swap:1s"
            hx-target="closest tr">
            <i aria-hidden="true" class="fa-solid fa-save"></i>
          </button>
        </form>
      </td>
      {% include "inventory/_edit_result.html" :id card.id :name "total-qty"    :type "number" :value card.total-qty
      :class "w3-col m1" %}
      {% include "inventory/_edit_result.html" :id card.id :name "opt-qty"      :type "number" :value card.opt-qty
      :class "w3-col m1" %}
      {% include "inventory/_edit_result.html" :id card.id :name "buy-price"    :type "number" :value card.buy-price
      :class "w3-col m1" %}
      {% include "inventory/_edit_result.html" :id card.id :name "sell-price"   :type "number" :value card.sell-price
      :class "w3-col m1" %}
      {% include "inventory/_view_result.html" :id card.id :name "category"     :type "text" :value card.category
      :class "w3-col m1" %}
    </tr>
  </tbody>
  {% endfor %}
</table>
