{% 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 'twitch:game_campaign_feed' game.twitch_id %}" />
        <link rel="alternate"
              type="application/atom+xml"
              title="{{ game.display_name }} campaigns (Atom)"
              href="{% url 'twitch:game_campaign_feed_atom' game.twitch_id %}" />
        <link rel="alternate"
              type="application/atom+xml"
              title="{{ game.display_name }} campaigns (Discord)"
              href="{% url 'twitch:game_campaign_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=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>
            <!-- Game owner -->
            {% if owners %}
                <small>
                    Owned by
                    {% for owner in owners %}
                        <a href="{% url 'twitch:organization_detail' owner.twitch_id %}">{{ owner.name }}</a>
                        {% if not forloop.last %},{% endif %}
                    {% endfor %}
                </small>
            {% endif %}
            <div>
                Twitch ID: <a href="https://www.twitch.tv/directory/category/{{ game.slug|urlencode }}">{{ game.twitch_id }}</a>
            </div>
            <div>Twitch slug: {{ game.slug }}</div>
            <!-- RSS Feeds -->
            <div>
                <a href="{% url 'twitch:game_campaign_feed' game.twitch_id %}"
                   title="RSS feed for {{ game.display_name }} campaigns">[rss]</a>
                <a href="{% url 'twitch:game_campaign_feed_atom' game.twitch_id %}"
                   title="Atom feed for {{ game.display_name }} campaigns">[atom]</a>
                <a href="{% url 'twitch:game_campaign_feed_discord' game.twitch_id %}"
                   title="Discord feed for {{ game.display_name }} campaigns">[discord]</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 %}
    {{ game_data|safe }}
{% endblock content %}