{% extends "base.html" %}
{% block title %}
    {{ badge_set.set_id }} Badges - ttvdrops
{% endblock title %}
{% block content %}
    <h1>{{ badge_set.set_id }}</h1>
    {% if badges %}
        <h2>
            {{ badges.count }}
            {% if badges.count == 1 %}
                version
            {% else %}
                versions
            {% endif %}
        </h2>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th></th>
                    <th>Title</th>
                    <th>Description</th>
                    <th>Images</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for badge in badges %}
                    <tr>
                        <td>
                            <code>{{ badge.badge_id }}</code>
                        </td>
                        <td>
                            <img src="{{ badge.image_url_4x }}"
                                 height="72"
                                 width="72"
                                 alt="{{ badge.title }}"
                                 title="{{ badge.description }}"
                                 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>
                            {% else %}
                                -
                            {% endif %}
                        </td>
                    </tr>
                    {% if badge.award_campaigns %}
                        <div>
                            The following campaigns have the same name as this badge and may be awarding it:
                            <ul>
                                {% for campaign in badge.award_campaigns %}
                                    <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 %}