{% include "pages.html" :form "search-form" :hx-include "[name='search-form']" :hx-target "#search-results" :url "/inventory/search" %}

{% if cards %}
<div class="table-container" style="margin-bottom:0;border-collapse:collapse">
  <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth" id="card-top" style="margin-bottom:0;border-collapse:collapse">
    <thead>
      <tr>
        {% include "inventory/_search_result_th.html" :style "width:100px" :url "/inventory/search" :hx-target "#search-results" :name "Image" :sort "id" %}
        {% include "inventory/_search_result_th.html" :url "/inventory/search" :hx-target "#search-results" :name "Product Name" :sort "name" %}
        <th width="10px">&nbsp;</th>
        <!-- {% include "inventory/_search_result_th.html" :url "/inventory/search" :hx-target "#search-results" :name "Condition" :sort "condition" %} -->
        {% include "inventory/_search_result_th.html" :style "width:10%" url "/inventory/search" :hx-target "#search-results" :name "Total Qty" :sort "total-qty" %}
        {% include "inventory/_search_result_th.html" :style "width:10%" url "/inventory/search" :hx-target "#search-results" :name "Opt. Qty" :sort "opt-qty" %}
        {% include "inventory/_search_result_th.html" :style "width:10%" url "/inventory/search" :hx-target "#search-results" :name "Buy Price" :sort "buy-price" %}
        {% include "inventory/_search_result_th.html" :style "width:10%" url "/inventory/search" :hx-target "#search-results" :name "Sell Price" :sort "sell-price" %}
        {% include "inventory/_search_result_th.html" :style "width:10px" url "/inventory/search" :hx-target "#search-results" :name "URI" :sort "uri" %}
      </tr>
    </thead>
  </table>
</div>
{% for card in cards %}
<div class="table-container" style="margin-bottom:0;border-collapse:collapse">
  <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth" 
         id="card-top-{{ card.id }}" style="margin-bottom:0;border-collapse:collapse">
    <tbody>
      <tr>
        <!-- Image -->
        <td style="width:100px">
          <a target="_blank" href="/public/ygoprodeck/{{ card.passcode }}.jpg">
            <div class="image" style="flex:none;max-width:100px;max-height:100px;overflow:hidden">
              <img style="max-width:100px;max-height:100px" src="/public/ygoprodeck/{{ card.passcode }}.jpg"
                   alt="Card Image for Yu-Gi-Oh! #{{ card.passcode }} - {{ card.name }}">
            </div>
          </a>
        </td>
        <!-- Product Name -->
        {% include "inventory/_view_result.html" :id card.id :name "name" :type "text" :value card.name %}
        <!-- Manage/Edit/Delete -->
        <td width="10px">
          <a href="#" onclick="toggle_hidden('card-{{ card.id }}'); htmx.trigger('#card-{{ card.id }}', 'load-variants', {}); return false;">
            <i class="fas fa-gear"></i>
          </a><br>
          <a target="_blank" href="/inventory/{{ card.id }}/edit">
            <i class="fas fa-edit"></i>
          </a>
          <form>
            {{ token | safe }}
            <button
              style="background:none;border:none;padding:0;cursor:pointer;color:inherit"
              hx-delete="/inventory/{{ card.id }}/delete"
              hx-confirm="Delete {{ card.id }} - Are you sure?"
              hx-swap="outerHTML swap:1s"
              hx-target="closest tr">
              <i class="fas fa-trash"></i>
            </button>
          </form>
        </td>
        <!-- Condition -->
        <!-- {% include "inventory/_view_result.html" :id card.id :name "condition" :type "text" :value card.condition %} -->
        {% include "inventory/_edit_result.html" :style "width:10%" :id card.id :name "total-qty"    :type "number" :value card.total-qty %}
        {% include "inventory/_edit_result.html" :style "width:10%" :id card.id :name "opt-qty"      :type "number" :value card.opt-qty %}
        {% include "inventory/_edit_result.html" :style "width:10%" :id card.id :name "buy-price"    :type "number" :value card.buy-price %}
        {% include "inventory/_edit_result.html" :style "width:10%" :id card.id :name "sell-price"   :type "number" :value card.sell-price %}
        <td width="10px"><a href="{{ card.url }}" target="_blank"><i class="fa-solid fa-link"></i></a></td>
      </tr>
    </tbody>
  </table>
</div>
<div id="card-{{ card.id }}" class="is-hidden"
     hx-get="/inventory/variants/{{ card.id }}"
     hx-trigger="load-variants"
     hx-swap="innerHTML">
</div>
{% endfor %}

{% include "pages.html" :hx-target "#search-results" :url "/inventory/search" :hx-include "[name='search-form']" %}

<div class="content">
  <p>{{ length }} results. {{ total }} entries in db.</p>
</div>

{% else %}
<div class="content">
  <p>Nothing to see here!</p>
</div>
{% endif %}