{% extends "base.html" %}
{% block title %}Emotes{% endblock %}
{% block content %}
<h1>Emotes</h1>
<div class="emote-gallery" style="display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: flex-start;">
  {% for emote in emotes %}
    <a href="{% url 'twitch:campaign_detail' emote.campaign.twitch_id %}" title="{{ emote.campaign.name }}" style="display: inline-block;">
      <img src="{{ emote.image_url }}" alt="Emote" style="max-width: 96px; max-height: 96px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); padding: 4px;" loading="lazy" />
    </a>
  {% empty %}
    <p>No drop campaigns with emotes found.</p>
  {% endfor %}
</div>
{% endblock %}