{% extends "base.html" %}
{% load image_tags %}
{% block title %}
    {{ badge_set.set_id }} Badges - ttvdrops
{% endblock title %}
{% block content %}
    <h1>{{ badge_set.set_id }}</h1>
    {% if badges %}
        <table>
            <tbody>
                {% for badge in badges %}
                    <!-- {{ badge.title }} {% if badge.description != badge.title %}- {{ badge.description }}{% else %}{% endif %} -->
                    <tr>
                        <td>
                            <code>{{ badge.badge_id }}</code>
                        </td>
                        <td>
                            {% picture badge.image_url_4x alt=badge.title width=72 style="width: 72px !important; height: 72px !important; object-fit: contain" %}
                        </td>
                        <td>{{ badge.title }}</td>
                        <td>{{ badge.description }}</td>
                        <td>
                            <a href="{{ badge.image_url_1x }}" rel="nofollow ugc">[18px]</a>
                            <a href="{{ badge.image_url_2x }}" rel="nofollow ugc">[36px]</a>
                            <a href="{{ badge.image_url_4x }}" rel="nofollow ugc">[72px]</a>
                        </td>
                        <td>
                            {% if badge.click_url %}<a href="{{ badge.click_url }}" rel="nofollow ugc">{{ badge.click_action }}</a>{% endif %}
                        </td>
                    </tr>
                    {% if badge.award_campaigns %}
                        <!-- If there are campaigns awarding this badge, show them in a nested row -->
                        <div>
                            The following campaigns have the same name as this badge and may be awarding it:
                            <ul>
                                {% for campaign in badge.award_campaigns %}
                                    <!-- Note: We can't be sure if these campaigns are actually awarding this badge, but it's likely given the name match. -->
                                    <li>
                                        <a href="{% url 'twitch:campaign_detail' campaign.twitch_id %}">{{ campaign.clean_name }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p>No badges found in this set.</p>
    {% endif %}
    {{ set_data|safe }}
{% endblock content %}