{% extends "layouts/default.html" %}
{% block title %}{_ "Card Set List" _}{% endblock %}
{% block content %}
<div class="content">
  {% if ygo-card-sets %}
  <form id="card-set-form"
        name="card-set-form">
    {{ token | safe }}
  </form>
  <div class="tile is-ancestor">
    <div class="tile is-parent is-vertical is-2">
      <div class="tile is-child">
        <div class="card">
          <div class="card-image">
            <p class="image is-3x4">
              <a target="_blank" href="/public/ygoprodeck/{{ ygo-card-sets.0.passcode.id }}.jpg"
                 data-lightbox="{{ ygo-card-sets.0.passcode.id }}">
                <img class="zoom" src="/public/ygoprodeck/{{ ygo-card-sets.0.passcode.id }}.jpg" style="max-width:100px;padding-top:1rem;margin:auto;">
              </a>
            </p>
          </div>
          <div class="card-content">
            <div class="container"
                 hx-get="/cards/by-passcode/{{ ygo-card-sets.0.passcode.id }}/price"
                 hx-trigger="load">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tile is-parent">
      <div class="tile is-child">
        <div class="content">
          <strong>{{ ygo-card-sets.0.passcode.id }} - {{ ygo-card-sets.0.passcode.name }}</strong>
          <br>

          {% for set in ygo-card-sets %}
          <a href="#" onclick="toggle_hidden('set-{{ set.id }}'); htmx.trigger('#set-{{ set.id }}', 'load-variants', {}); return false;">
            <i class="fas fa-gear"></i>
          </a>
          <span>{{ ygo-card-sets.0.passcode.name }} - {{ set.code.name }} - {{ set.rarity.name }} - {{ set.edition.name }} - {{ set.name.name }} - {{ set.price }}</span>

          <div id="set-{{ set.id }}" class="box is-hidden"
               hx-get="/inventory/variants/{{ set.id }}"
               hx-trigger="load-variants"
               hx-swap="innerHTML">
          </div>
          <br>
          {% endfor %}

        </div>
      </div>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}