mtg_python_deckbuilder/code/web/templates/build/_step3.html

<section>
  {% set step_index = 3 %}{% set step_total = 5 %}
  <h3>Step 3: Ideal Counts</h3>
  <div class="two-col two-col-left-rail">
  <aside class="card-preview" data-card-name="{{ commander|urlencode }}">
      <a href="https://scryfall.com/search?q={{ commander|urlencode }}" target="_blank" rel="noopener">
  <img src="https://api.scryfall.com/cards/named?fuzzy={{ commander|urlencode }}&format=image&version=normal" alt="{{ commander }} card image" data-card-name="{{ commander }}" />
      </a>
    </aside>
    <div class="grow" data-skeleton>
      <div hx-get="/build/banner?step=Ideal%20Counts&i=3&n=5" hx-trigger="load"></div>
      {% include "build/_stage_navigator.html" %}

      

      {% if error %}
        <div style="color:#a00; margin:.5rem 0;">{{ error }}</div>
      {% endif %}

      <form hx-post="/build/step3" hx-target="#wizard" hx-swap="innerHTML">
        <fieldset>
          <legend>Card Type Targets</legend>
          <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:.75rem;">
            {% for key, label in labels.items() %}
              <label>
                {{ label }}
                <input type="number" name="{{ key }}" min="0" value="{{ (values or defaults)[key] }}" />
                <small class="muted">Default: {{ defaults[key] }}</small>
              </label>
            {% endfor %}
          </div>
        </fieldset>

        <div style="margin-top:1rem; display:flex; gap:.5rem;">
          <button type="submit" class="btn-continue" data-action="continue">Continue to Review</button>
          <button type="button" class="btn-back" data-action="back" hx-get="/build/step2" hx-target="#wizard" hx-swap="innerHTML">Back</button>
        </div>
      </form>
      <div style="margin-top:.5rem;">
        <form action="/build" method="get" style="display:inline; margin:0;">
          <button type="submit">Start over</button>
        </form>
      </div>
    </div>
  </div>
</section>