{% extends "layouts/default.html" %}
{% block title %}{_ "Select Card Sets" _}{% endblock %}
{% block content %}

<!-- I seem to have found a bug with HTMX + Caveman2 array parsing: if
     hx-post is used to send a field like cards[][set-id] and
     cards[][variant-id], the arrays are being destructured by HTMX
     during the POST construction. Specifying the ACTION in the FORM
     with METHOD seems to solve the issue. The form must be submitted
     via caveman2 and not HTMX. -->
<form id="card-select-form" name="card-select-form" action="/construct/{{ deck-id }}/select-sets" method="post">
  {{ token | safe }}
</form>

<div class="content">
  <div class="columns is-multiline">
    {% for card-sets in sets %}
    <div class="column is-full">
      <div class="box">
        <div class="media">
          <div class="media-left">
            <p class="image is-3x4">
              <a href="/cards/by-passcode/{{ card-sets.0.passcode.id }}" target="_blank">
                <img src="/public/ygoprodeck/{{ card-sets.0.passcode.id }}.jpg" style="max-height:150px">
              </a>
            </p>
          </div>
          <div class="media-content">
            <div class="content">
              <div class="field is-grouped">
                <div class="field-body">
                  <div class="field is-narrow">
                    <label class="label" for="set-select-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}">
                      {{ card-sets.0.passcode.name }}
                    </label>
                    <div class="control">
                      <div class="select is-fullwidth">
                        <select id="set-select-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}"
                                form="card-select-form"
                                name="cards[][set-id]"
                                hx-get="/construct/ygo-set-item"
                                hx-include="[id='set-select-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}'],[id='condition-select-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}']"
                                hx-target="#results-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}"
                                hx-trigger="change, load">
                          {% for set in card-sets %}
                          <option value="{{ set.id }}">{{ set.name.name }} - {{ set.code.name }} - {{ set.rarity.name }} - {{ set.edition.name }} - {{ set.price }}</option>
                          {% endfor %}
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="field is-narrow">
                    <label class="label" for="condition-select-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}">
                      Condition
                    </label>
                    <div class="control">
                      <div class="select is-fullwidth">
                        <select id="condition-select-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}"
                                form="card-select-form"
                                name="cards[][variant-id]"
                                hx-get="/construct/ygo-set-item"
                                hx-include="[id='set-select-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}'],[id='condition-select-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}']"
                                hx-target="#results-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}"
                                hx-trigger="change, load">
                          {% for variant in variants %}
                          <option value="{{ variant.id }}">{{ variant.name }}</option>
                          {% endfor %}
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id="results-{{ card-sets.0.passcode.id }}-{{ forloop.counter0 }}">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
    <div class="column is-full">
      <div class="box">
        <button class="button"
                type="submit"
                form="card-select-form"
                hx-target="#select-results">
          <!-- hx-include="[name='card-select-form']"-->
          Submit
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}