{% if length > 1 %}
{% include "pages.html" :url "builder/search" :hx-target "#search-results" :hx-include "[name='search-form']" :class "is-small" %}
{% endif %}

{% if cards %}
<table class="table is-bordered is-fullwidth" style="margin-bottom:0;border-collapse:collapse">
  <thead>
    <tr>
      <th style="width:20%">
        {% include "builder/_search_results_th.html" :url "/builder/search" :target "search-results" :name "ID" :sort "id" %}
      </th>
      <th>
        {% include "builder/_search_results_th.html" :url "/builder/search" :target "search-results" :name "Name" :sort "name" %}
      </th>
    </tr>
  </thead>
</table>
{% for card in cards %}
<table class="table is-fullwidth" style="margin-bottom:0;border-collapse:collapse">
  <tbody>
    <tr class="{{ card.frame-type }} draggable"
        onclick="toggle_hidden('i-{{ forloop.counter0 }}-{{ card.passcode }}')" style="cursor:pointer;"
        oncontextmenu="htmx.trigger('#c-{{ card.passcode }}-{{ forloop.counter0 }}', 'add-card', {}); return false;">
      <td style="width:20%">
        <a target="_blank" href="/cards/by-passcode/{{ card.passcode }}"
           id="c-{{ card.passcode }}-{{ forloop.counter0 }}"
           hx-post="/builder/add/{{ card.passcode }}"
           hx-target="#current-deck-list"
           hx-trigger="add-card"
           hx-include="[name='search-form']">
          <img
            alt="Card Image for Yu-Gi-Oh! #{{ card.passcode }}"
            class="w3-image"
            style="max-height: 50px" src="/public/ygoprodeck/{{ card.passcode }}.jpg">
        </a>
      </td>
      <td>
        {{ card.name }}
      </td>
    </tr>
  </tbody>
</table>
<div class="table-container is-hidden" id="i-{{ forloop.counter0 }}-{{ card.passcode }}" style="margin-bottom:0;border-collapse:collapse">
  <table class="table is-narrow is-hoverable is-fullwidth {{ card.frame-type }}"
         style="margin-bottom:0;border-collapse:collapse">
    <tbody>
      {% if card.archetype %}
      <tr>
        <th>Archetype</th>
        <td>{{ card.archetype }}</td>
      </tr>
      {% endif %}
      {% if card.atk %}
      <tr>
        <th>ATK</th>
        <td>{{ card.atk }}</td>
      </tr>
      {% endif %}
      {% if card.def %}
      <tr>
        <th>DEF</th>
        <td>{{ card.def }}</td>
      </tr>
      {% endif %}
      {% if card.attribute %}
      <tr>
        <th>Attribute</th>
        <td>{{ card.attribute }}</td>
      </tr>
      {% endif %}
      {% if card.desc %}
      <tr>
        <th>Card Text</th>
        <!-- https://stackoverflow.com/a/10937254 -->
        <td style="white-space:pre-wrap;word-wrap:break-word">{{ card.desc }}</td>
      </tr>
      {% endif %}
      {% if card.level %}
      <tr>
        <th>Level</th>
        <td>{{ card.level }}</td>
      </tr>
      {% endif %}
      {% if card.race %}
      <tr>
        <th>Race</th>
        <td>{{ card.race }}</td>
      </tr>
      {% endif %}
      {% if card.scale %}
      <tr>
        <th>Scale</th>
        <td>{{ card.scale }}</td>
      </tr>
      {% endif %}
      {% if card.type %}
      <tr>
        <th>Type</th>
        <td>{{ card.type }}</td>
      </tr>
      {% endif %}
    </tbody>
  </table>
</div>
{% endfor %}

{% if length > 1 %}
<p>{{ length }} result{% if length > 2 %}s{% endif %} found.</p>
{% include "pages.html" :url "builder/search" :hx-target "#search-results" :hx-include "[name='search-form']" :class "is-small" %}
{% endif %}

<script>
  $(function() {
      $(".draggable").draggable({
          appendTo: "body",
          helper: "clone",
          stack: ".draggable"
      });
  });
</script>
{% endif %}