<h2 class="subtitle"
    onclick="toggle_hidden('{{ class }}-deck-list')"
    style="cursor:pointer;">
  {{ title }}
</h2>
<div class="columns droppable is-mobile is-gapless is-multiline is-visible{% if class %} {{ class }}-deck-list{% endif %}" id="{{ class }}-deck-list"
     style="min-height:3rem">
  {% for card in deck-list %}
  <div class="column draggable"
       id="{{ class }}-{{ forloop.counter0 }}"
       hx-include="[name='search-form']"
       hx-post="/builder/remove?index={{ forloop.counter0 }}&deck={{ class }}"
       hx-target="#current-deck-list"
       hx-trigger="remove-card"
       oncontextmenu="htmx.trigger('#{{ class }}-{{ forloop.counter0 }}', 'remove-card', {}); return false;"
       style="flex:none;width:10%"
       data-class="{{ class }}"
       data-index="{{ forloop.counter0 }}"
       data-passcode="{{ card.passcode }}">
    <div class="card">
      <div class="card-image">
        <div class="image is-2by3">
          <a target="_blank" href="/cards/by-passcode/{{ card.passcode }}">
            <img class="zoom"
                 src="/public/ygoprodeck/{{ card.passcode }}.jpg"
                 alt="Card Image for Yu-Gi-Oh! #{{ card.passcode }} - {{ card.name }}">
          </a>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
