{% load core_tags %}
<span class="snapshot-thumbnail" role="img" aria-label="Preview of {{ host }}" style="display:inline-flex;position:relative;vertical-align:middle;align-items:center;justify-content:center;overflow:hidden;border-radius:4px;box-shadow:4px 4px 4px rgba(0,0,0,0.02);width:{{ width }};height:{{ height }};background:hsl({{ hue }} 35% 92%);color:hsl({{ hue }} 35% 30%);">
  <span style="display:flex;flex-direction:column;align-items:center;gap:4px;max-width:90%;">
    <span aria-hidden="true" style="font:bold 28px sans-serif;">{{ initial }}</span>
    <span style="font:10px sans-serif;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ host }}</span>
    <span aria-hidden="true" style="font-size:12px;">▤</span>
  </span>
  {% if card_result %}
  <span aria-hidden="true" style="position:absolute;inset:0;display:block;pointer-events:none;background:#f8fafc;">
    {% plugin_card card_result %}
  </span>
  {% endif %}
</span>