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

{% if cards %}

<table class="table" style="overflow-x:scroll;display:block">
  <thead style="width:100%;max-width:100%">
    <tr class="w3-dark-blue">
      {% include "cards/_search_result_th.html" :url "/cards/search" :hx-target "#search-results" :name "Image" :sort "id" :form "search-form" %}
      {% include "cards/_search_result_th.html" :url "/cards/search" :hx-target "#search-results" :name "Passcode" :sort "passcode" :form "search-form" %}
      {% include "cards/_search_result_th.html" :url "/cards/search" :hx-target "#search-results" :name "Attribute" :sort "attribute" :form "search-form" %}
      {% include "cards/_search_result_th.html" :url "/cards/search" :hx-target "#search-results" :name "Name" :sort "name" :form "search-form" %}
      <!-- <th style="width:auto;min-width:256px;">Name</th> -->
      {% include "cards/_search_result_th.html" :url "/cards/search" :hx-target "#search-results" :name "Archetype" :sort "archetype" :form "search-form" %}
      {% include "cards/_search_result_th.html" :url "/cards/search" :hx-target "#search-results" :name "Race" :sort "race" :form "search-form" %}
      {% include "cards/_search_result_th.html" :url "/cards/search" :hx-target "#search-results" :name "Type" :sort "type" :form "search-form" %}
      <!-- <th style="width:auto;min-width:486px;">Card Text</th> -->
      {% include "cards/_search_result_th.html" :url "/cards/search" :hx-target "#search-results" :name "Card Text" :sort "card-text" :form "search-form" %}
      {% include "cards/_search_result_th.html" :url "/cards/search" :hx-target "#search-results" :name "ATK" :sort "atk" :form "search-form" %}
      {% include "cards/_search_result_th.html" :url "/cards/search" :hx-target "#search-results" :name "DEF" :sort "def" :form "search-form" %}
      {% include "cards/_search_result_th.html" :url "/cards/search" :hx-target "#search-results" :name "Level" :sort "level" :form "search-form" %}
      {% include "cards/_search_result_th.html" :url "/cards/search" :hx-target "#search-results" :name "Scale" :sort "scale" :form "search-form" %}
      {% include "cards/_search_result_th.html" :url "/cards/search" :hx-target "#search-results" :name "Frame" :sort "frame-type" :form "search-form" %}
    </tr>
  </thead>
  <tbody>
    {% for card in cards %}
    <tr class="{{ card.frame-type }}">
      <td>
        <!-- Image -->
        <a target="_blank" href="/cards/{{ card.id }}/view">
          <img class="w3-image" style="width:100px;max-width:100px;"
               src="/public/ygoprodeck/{{ card.passcode }}.jpg"
               alt="Card Image for Yu-Gi-Oh! #{{card.passcode}} - {{card.name}}">
        </a>
      </td>
      <td>{{ card.passcode }}</td>
      <td class="w3-center">{% if card.attribute %}
        <img
          class="w3-image w3-center"
          style="width:25px;max-width:25px;"
          src="/img/attribute/{{ card.attribute }}.svg" alt="{{ card.attribute }}">
        {% elif card.frame-type == "spell" %}
        <img
          class="w3-image w3-center"
          style="width:25px;max-width:25px;"
          src="/img/attribute/SPELL.svg" alt="Spell Card">
        {% elif card.frame-type == "trap" %}
        <img
          class="w3-image w3-center"
          style="width:25px;max-width:25px;"
          src="/img/attribute/TRAP.svg" alt="Spell Card">
        {% endif %}
      </td>
      <td style="width:auto;min-width:256px;">{{ card.name }}</td>
      <td>{{ card.archetype }}</td>
      <td>{{ card.race }}</td>
      <td>{{ card.type }}</td>
      <td style="width:auto;min-width:486px;white-space:pre-wrap;word-wrap:break-word">{{ card.desc }}</td>
      <td>{{ card.atk }}</td>
      <td>{{ card.def }}</td>
      <td>{{ card.level }}</td>
      <td>{{ card.scale }}</td>
      <td>{{ card.frame-type }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<div class="w3-container content">
  <p>{{ length }} result{% if length > 2 %}s{% endif %} found.</p>
  {% include "pages.html" :url "cards/search" :hx-target "#search-results" :hx-include "[name='search-form']" %}
</div>

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