{% macro card_icon(card_name) %}
<span class="card-icon-wrapper hover_img">
  <a href="https://scryfall.com/search?q=!%22{{ card_name|url_encode }}%22" target="_blank" class="card-icon-link" title="View on Scryfall">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mtg-card-icon">
      <rect x="3" y="2" width="18" height="20" rx="2" ry="2"></rect>
      <line x1="7" y1="7" x2="17" y2="7"></line>
      <line x1="7" y1="12" x2="17" y2="12"></line>
      <circle cx="9" cy="17" r="1"></circle>
      <circle cx="15" cy="17" r="1"></circle>
    </svg>
    <span class="card-preview">
      <img src="https://api.scryfall.com/cards/named?exact={{ card_name|url_encode }}&format=image&version=normal" alt="{{ card_name }}" loading="lazy" />
    </span>
  </a>
</span>
{% endmacro %}