<section>
  <div class="two-col two-col-left-rail">
  <aside class="card-preview" data-card-name="{{ commander|urlencode }}">
    {% set commander_base = (commander.split(' - Synergy (')[0] if ' - Synergy (' in commander else commander) %}
    <a href="https://scryfall.com/search?q={{ commander_base|urlencode }}" target="_blank" rel="noopener">
  <img src="{{ commander_base|card_image('normal') }}" alt="{{ commander }} card image" data-card-name="{{ commander_base }}" />
      </a>
    </aside>
    <div class="grow" data-skeleton>
  <div hx-get="/build/banner" hx-trigger="load"></div>

      <div style="text-align:center; padding:3rem 1rem;">
        <div class="spinner" style="margin:0 auto 1rem; width:48px; height:48px; border:4px solid rgba(0,0,0,0.1); border-top-color:#007bff; border-radius:50%; animation:spin 0.8s linear infinite;"></div>
        <h3 style="margin:0 0 0.5rem;">Automating choices...</h3>
        <p class="muted" style="margin:0;">{{ automation_message }}</p>
      </div>
      
      {# Hidden form that auto-submits with defaults #}
      <form id="auto-step3-form" hx-post="/build/step3" hx-target="#wizard" hx-swap="innerHTML" hx-trigger="load delay:100ms" style="display:none;">
        {% for key, value in defaults.items() %}
          <input type="hidden" name="{{ key }}" value="{{ value }}" />
        {% endfor %}
      </form>
    </div>
  </div>
</section>

<style>
@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>
