{% for card in cards %}
<form id="card-form-{{ card.id }}" name="card-form-{{ card.id }}">
  {{ token | safe }}
</form>
{% endfor %}
<div class="table-container">
  <table class="table">
    <thead>
      <tr>
        <th>Condition</th>
        <th>Qty</th>
        <th>Opt. Qty</th>
        <th>Buy Price</th>
        <th>Sell Price</th>
        <th>Save</th>
      </tr>
    </thead>
    {% for card in cards %}
    <!-- Variant form value -->
    <input type="hidden" name="variant-id" value="{{ card.variant.id }}" form="card-form-{{ card.id }}">
    <input type="hidden" name="set-id" value="{{ card.item-id }}" form="card-form-{{ card.id }}">
    <tbody>
      <tr>
        <!-- Condition -->
        <td>{{ card.variant.name }}</td>
        <td>
          <div class="field">
            <div class="control">
              <input class="input"
                     id="qty-{{ card.id }}"
                     name="qty" type="number"
                     step="1"
                     form="card-form-{{ card.id }}"
                     value="{{ card.qty }}">
            </div>
          </div>
        </td>
        <td>
          <div class="field">
            <div class="control">
              <input class="input"
                     id="opt-qty-{{ card.id }}"
                     name="opt-qty" type="number"
                     step="1"
                     form="card-form-{{ card.id }}"
                     value="{{ card.opt-qty }}">
            </div>
          </div>
        </td>
        <td>
          <div class="field">
            <div class="control">
              <input class="input"
                     id="buy-price-{{ card.id }}"
                     name="buy-price" type="number"
                     step="any"
                     form="card-form-{{ card.id }}"
                     value="{{ card.buy-price }}">
            </div>
          </div>
        </td>
        <td>
          <div class="field">
            <div class="control">
              <input class="input"
                     id="sell-price-{{ card.id }}"
                     name="sell-price" type="number"
                     step="any"
                     form="card-form-{{ card.id }}"
                     value="{{ card.sell-price }}">
            </div>
          </div>
        </td>
        <!-- Save/Edit/Delete -->
        <td>
          <button class="button"
                  hx-include="[name='card-form-{{ card.id }}']"
                  hx-patch="/inventory/patch"
                  hx-swap="outerHTML swap:1s"
                  hx-target="closest tr"
                  type="submit">
            <i aria-hidden="true" class="fa-solid fa-save"></i>
          </button>
        </td>
      </tr>
    </tbody>
    {% endfor %}
  </table>
</div>