ttvdrops/templates/twitch/game_detail.html

{% extends "base.html" %}
{% load image_tags %}
{% block title %}
    {{ game.display_name }}
{% endblock title %}
{% block extra_head %}
    {% if game %}
        <link rel="alternate"
              type="application/rss+xml"
              title="{{ game.display_name }} campaigns (RSS)"
              href="{% url 'core:game_campaign_feed' game.twitch_id %}" />
        <link rel="alternate"
              type="application/atom+xml"
              title="{{ game.display_name }} campaigns (Atom)"
              href="{% url 'core:game_campaign_feed_atom' game.twitch_id %}" />
        <link rel="alternate"
              type="application/atom+xml"
              title="{{ game.display_name }} campaigns (Discord)"
              href="{% url 'core:game_campaign_feed_discord' game.twitch_id %}" />
        <link rel="alternate"
              type="application/rss+xml"
              title="{{ game.display_name }} rewards (RSS)"
              href="{% url 'core:game_reward_feed' game.twitch_id %}" />
        <link rel="alternate"
              type="application/atom+xml"
              title="{{ game.display_name }} rewards (Atom)"
              href="{% url 'core:game_reward_feed_atom' game.twitch_id %}" />
        <link rel="alternate"
              type="application/atom+xml"
              title="{{ game.display_name }} rewards (Discord)"
              href="{% url 'core:game_reward_feed_discord' game.twitch_id %}" />
    {% endif %}
{% endblock extra_head %}
{% block content %}
    <div style="display: flex; align-items: flex-start;">
        <!-- Game image -->
        <div style="margin-right: 16px;">
            {% if game.box_art_best_url %}
                {% picture game.box_art_best_url alt="Box art for "|add:game.get_game_name width=160 %}
            {% endif %}
        </div>
        <!-- Game Title and Details -->
        <div style="display: flex; flex-direction: column;">
            <h1 style="margin-top: 0; margin-bottom: 0px;">
                {{ game.display_name }}
                {% if game.display_name != game.name and game.name %}<small>({{ game.name }})</small>{% endif %}
            </h1>
            <!-- Add breadcrumbs -->
            <div>
                <a href="{% url 'twitch:dashboard' %}">Twitch</a> > <a href="{% url 'twitch:games_grid' %}">Games</a> > {{ game.display_name }}
            </div>
            <!-- Game metadata -->
            <dl>
                {% if owners %}
                    <dt>Owned by</dt>
                    <dd>
                        {% for owner in owners %}
                            <a href="{% url 'twitch:organization_detail' owner.twitch_id %}">{{ owner.name }}</a>
                            {% if not forloop.last %}-{% endif %}
                        {% endfor %}
                    </dd>
                {% endif %}
                <dt>Published</dt>
                <dd>
                    <time datetime="{{ game.added_at|date:'c' }}"
                          title="{{ game.added_at|date:'DATETIME_FORMAT' }}">{{ game.added_at|date:"M d, Y H:i" }}</time> ({{ game.added_at|timesince }} ago)
                </dd>
                <dt>Last updated</dt>
                <dd>
                    <time datetime="{{ game.updated_at|date:'c' }}"
                          title="{{ game.updated_at|date:'DATETIME_FORMAT' }}">{{ game.updated_at|date:"M d, Y H:i" }}</time> ({{ game.updated_at|timesince }} ago)
                </dd>
            </dl>
            <!-- Campaign Feeds -->
            <div>
                Campaigns:
                <a href="{% url 'core:game_campaign_feed' game.twitch_id %}"
                   title="RSS feed for {{ game.display_name }} campaigns">[rss]</a>
                <a href="{% url 'core:game_campaign_feed_atom' game.twitch_id %}"
                   title="Atom feed for {{ game.display_name }} campaigns">[atom]</a>
                <a href="{% url 'core:game_campaign_feed_discord' game.twitch_id %}"
                   title="Discord feed for {{ game.display_name }} campaigns">[discord]</a>
            </div>
            <div>
                Rewards:
                <a href="{% url 'core:game_reward_feed' game.twitch_id %}"
                   title="RSS feed for {{ game.display_name }} rewards">[rss]</a>
                <a href="{% url 'core:game_reward_feed_atom' game.twitch_id %}"
                   title="Atom feed for {{ game.display_name }} rewards">[atom]</a>
                <a href="{% url 'core:game_reward_feed_discord' game.twitch_id %}"
                   title="Discord feed for {{ game.display_name }} rewards">[discord]</a>
            </div>
            <div>
                <a href="{% url 'twitch:twitch-api-v1:get_game' game.twitch_id %}"
                   title="Twitch game API">[api]</a>
                <a href="{% url 'core:docs_rss' %}" title="RSS feed documentation">[explain]</a>
            </div>
        </div>
    </div>
    {% if active_campaigns %}
        <h5 id="active-campaigns-header">Active Campaigns</h5>
        <table id="active-campaigns-table">
            <tbody>
                {% for campaign in active_campaigns %}
                    <tr id="campaign-row-{{ campaign.twitch_id }}">
                        <td>
                            <a href="{% url 'twitch:campaign_detail' campaign.twitch_id %}">{{ campaign.clean_name }}</a>
                            {% if campaign.time_based_drops.all %}
                                <div class="campaign-benefits">
                                    {% comment %}Show unique benefits sorted alphabetically{% endcomment %}
                                    {% for benefit in campaign.sorted_benefits %}
                                        <span class="benefit-item" title="{{ benefit.name }}">
                                            {% if benefit.image_best_url or benefit.image_asset_url %}
                                                {% picture benefit.image_best_url|default:benefit.image_asset_url alt=benefit.name width=24 height=24 style="display: inline-block; margin-right: 4px; vertical-align: middle" %}
                                            {% endif %}
                                            {{ benefit.name }}
                                        </span>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </td>
                        <td>
                            <span title="{{ campaign.end_at|date:'M d, Y H:i' }}">Ends in {{ campaign.end_at|timeuntil }}</span>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}
    {% if upcoming_campaigns %}
        <h5 id="upcoming-campaigns-header">Upcoming Campaigns</h5>
        <table id="upcoming-campaigns-table">
            <tbody>
                {% for campaign in upcoming_campaigns %}
                    <tr id="campaign-row-{{ campaign.twitch_id }}">
                        <td>
                            <a href="{% url 'twitch:campaign_detail' campaign.twitch_id %}">{{ campaign.clean_name }}</a>
                            {% if campaign.time_based_drops.all %}
                                <div class="campaign-benefits">
                                    {% for benefit in campaign.sorted_benefits %}
                                        <span class="benefit-item" title="{{ benefit.name }}">
                                            {% if benefit.image_best_url or benefit.image_asset_url %}
                                                {% picture benefit.image_best_url|default:benefit.image_asset_url alt=benefit.name width=24 height=24 style="display: inline-block; margin-right: 4px; vertical-align: middle" %}
                                            {% endif %}
                                            {{ benefit.name }}
                                        </span>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </td>
                        <td>
                            <span title="Starts on {{ campaign.start_at|date:'M d, Y H:i' }}">Starts in {{ campaign.start_at|timeuntil }}</span>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}
    {% if expired_campaigns %}
        <h5 id="expired-campaigns-header">Past Campaigns</h5>
        <table id="expired-campaigns-table">
            <tbody>
                {% for campaign in expired_campaigns %}
                    <tr id="campaign-row-{{ campaign.twitch_id }}">
                        <td>
                            <a href="{% url 'twitch:campaign_detail' campaign.twitch_id %}">{{ campaign.clean_name }}</a>
                            {% if campaign.time_based_drops.all %}
                                <div class="campaign-benefits">
                                    {% comment %}Show unique benefits sorted alphabetically{% endcomment %}
                                    {% for benefit in campaign.sorted_benefits %}
                                        <span class="benefit-item" title="{{ benefit.name }}">
                                            {% if benefit.image_best_url or benefit.image_asset_url %}
                                                {% picture benefit.image_best_url|default:benefit.image_asset_url alt=benefit.name width=24 height=24 style="display: inline-block; margin-right: 4px; vertical-align: middle" %}
                                            {% endif %}
                                            {{ benefit.name }}
                                        </span>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </td>
                        <td>
                            <span title="Ended on {{ campaign.end_at|date:'M d, Y H:i' }}">{{ campaign.end_at|timesince }} ago</span>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}
    {% if not active_campaigns and not upcoming_campaigns and not expired_campaigns %}
        <p id="no-campaigns-message">No campaigns found for this game.</p>
    {% endif %}
    {% if active_rewards %}
        <h5 id="active-rewards-header">Active Rewards</h5>
        <table id="active-rewards-table">
            <tbody>
                {% for reward in active_rewards %}
                    <tr id="reward-row-{{ reward.twitch_id }}">
                        <td style="width: 130px; vertical-align: top;">
                            <a href="{% url 'twitch:reward_campaign_detail' reward.twitch_id %}">
                                {% picture reward.image_best_url alt="Image for "|add:reward.name width=120 %}
                            </a>
                        </td>
                        <td style="vertical-align: top;">
                            <a href="{% url 'twitch:reward_campaign_detail' reward.twitch_id %}">
                                {% if reward.brand %}{{ reward.brand }}:{% endif %}
                                {{ reward.name }}
                            </a>
                            {% if reward.is_sitewide %}
                                <span title="Sitewide reward">[Sitewide]</span>
                            {% endif %}
                            {% if reward.summary %}
                                <br />
                                <small>{{ reward.summary|truncatewords:30|linebreaksbr }}</small>
                            {% endif %}
                        </td>
                        <td style="vertical-align: top;">
                            <span title="{{ reward.ends_at|date:'M d, Y H:i' }}">Ends in {{ reward.ends_at|timeuntil }}</span>
                        </td>
                        <td style="vertical-align: top; white-space: nowrap;">
                            {% if reward.about_url and reward.external_url and reward.about_url == reward.external_url %}
                                <a href="{{ reward.about_url }}">About / Redeem</a>
                            {% else %}
                                {% if reward.about_url %}<a href="{{ reward.about_url }}">About</a>{% endif %}
                                {% if reward.external_url %}· <a href="{{ reward.external_url }}">Redeem</a>{% endif %}
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}
    {% if upcoming_rewards %}
        <h5 id="upcoming-rewards-header">Upcoming Rewards</h5>
        <table id="upcoming-rewards-table">
            <tbody>
                {% for reward in upcoming_rewards %}
                    <tr id="reward-row-{{ reward.twitch_id }}">
                        <td style="width: 130px; vertical-align: top;">
                            <a href="{% url 'twitch:reward_campaign_detail' reward.twitch_id %}">
                                {% picture reward.image_best_url alt="Image for "|add:reward.name width=120 %}
                            </a>
                        </td>
                        <td style="vertical-align: top;">
                            <a href="{% url 'twitch:reward_campaign_detail' reward.twitch_id %}">
                                {% if reward.brand %}{{ reward.brand }}:{% endif %}
                                {{ reward.name }}
                            </a>
                            {% if reward.is_sitewide %}<span title="Sitewide reward">[Sitewide]</span>{% endif %}
                            {% if reward.summary %}
                                <br />
                                <small>{{ reward.summary|truncatewords:30|linebreaksbr }}</small>
                            {% endif %}
                        </td>
                        <td style="vertical-align: top;">
                            <span title="Starts on {{ reward.starts_at|date:'M d, Y H:i' }}">Starts in {{ reward.starts_at|timeuntil }}</span>
                        </td>
                        <td style="vertical-align: top; white-space: nowrap;">
                            {% if reward.about_url and reward.external_url and reward.about_url == reward.external_url %}
                                <a href="{{ reward.about_url }}">About / Redeem</a>
                            {% else %}
                                {% if reward.about_url %}<a href="{{ reward.about_url }}">About</a>{% endif %}
                                {% if reward.external_url %} · <a href="{{ reward.external_url }}">Redeem</a>{% endif %}
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}
    {% if expired_rewards %}
        <h5 id="expired-rewards-header">Past Rewards</h5>
        <table id="expired-rewards-table">
            <tbody>
                {% for reward in expired_rewards %}
                    <tr id="reward-row-{{ reward.twitch_id }}">
                        <td style="width: 130px; vertical-align: top;">
                            <a href="{% url 'twitch:reward_campaign_detail' reward.twitch_id %}">
                                {% picture reward.image_best_url alt="Image for "|add:reward.name width=120 %}
                            </a>
                        </td>
                        <td style="vertical-align: top;">
                            <a href="{% url 'twitch:reward_campaign_detail' reward.twitch_id %}">
                                {% if reward.brand %}{{ reward.brand }}:{% endif %}
                                {{ reward.name }}
                            </a>
                            {% if reward.is_sitewide %}<span title="Sitewide reward">[Sitewide]</span>{% endif %}
                            {% if reward.summary %}
                                <br />
                                <small>{{ reward.summary|truncatewords:30|linebreaksbr }}</small>
                            {% endif %}
                        </td>
                        <td style="vertical-align: top;">
                            <span title="Ended on {{ reward.ends_at|date:'M d, Y H:i' }}">{{ reward.ends_at|timesince }} ago</span>
                        </td>
                        <td style="vertical-align: top; white-space: nowrap;">
                            {% if reward.about_url and reward.external_url and reward.about_url == reward.external_url %}
                                <a href="{{ reward.about_url }}">About / Redeem</a>
                            {% else %}
                                {% if reward.about_url %}<a href="{{ reward.about_url }}">About</a>{% endif %}
                                {% if reward.external_url %} · <a href="{{ reward.external_url }}">Redeem</a>{% endif %}
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}
{% endblock content %}