{# Design 4: Sidebar stats and portrait orientation #}
<div class="modal is-active" id="card-preview-modal">
  <div class="modal-background" onclick="closeCardPreview()"></div>
  <div class="modal-content">
    <div style="max-width:920px; margin:0 auto;">
      <div style="display:flex; justify-content:center;">
        {% include 'cards/_card_inner_design4.html' %}
      </div>
    </div>
  </div>
  <div style="position:absolute; top:12px; right:12px; display:flex; gap:8px;">
    {% if prev_pk %}
      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' prev_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Previous">← Prev</a>
    {% else %}
      <button class="button is-medium is-static" disabled aria-hidden="true">← Prev</button>
    {% endif %}
    {% if next_pk %}
      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' next_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Next">Next →</a>
    {% else %}
      <button class="button is-medium is-static" disabled aria-hidden="true">Next →</button>
    {% endif %}
    <a class="button is-medium {% if design == 1 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=1" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 1">1</a>
    <a class="button is-medium {% if design == 2 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=2" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 2">2</a>
    <a class="button is-medium {% if design == 3 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=3" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 3">3</a>
    <a class="button is-medium {% if design == 4 %}is-primary is-link{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=4" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 4">4</a>
    <a class="button is-medium {% if design == 5 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=5" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 5">5</a>
  </div>
  <button class="modal-close is-large" aria-label="close" onclick="closeCardPreview()" style="right:8px;"></button>
</div>