{% extends "base.html" %}
{% block title %}
    {{ game.display_name }}
{% endblock title %}
{% block content %}
    <!-- Game Title -->
    <h1 id="game-name">
        {{ game.display_name }}
        {% if game.display_name != game.name and game.name %}<small>({{ game.name }})</small>{% endif %}
    </h1>
    <!-- Game image -->
    {% if game.box_art_url %}
        <img id="game-image"
             height="160"
             width="160"
             src="{{ game.box_art_url }}"
             alt="{{ game.name }}">
    {% endif %}
    <!-- Game owner -->
    {% if owner %}
        <small><a id="owner-link"
   href="{% url 'twitch:organization_detail' owner.id %}">{{ owner.name }}</a></small>
    {% endif %}
    {% if user.is_authenticated %}
        <form id="notification-form"
              method="post"
              action="{% url 'twitch:subscribe_notifications' game_id=game.id %}">
            {% csrf_token %}
            <div>
                <input type="checkbox"
                       id="found"
                       name="notify_found"
                       {% if subscription and subscription.notify_found %}checked{% endif %} />
                <label for="found">🔔 Get notified as soon as a drop for {{ game.display_name }} appears on Twitch.</label>
            </div>
            <div>
                <input type="checkbox"
                       id="live"
                       name="notify_live"
                       {% if subscription and subscription.notify_live %}checked{% endif %} />
                <label for="live">🎮 Get notified when the drop is live and ready to be farmed.</label>
            </div>
            <button id="save-notifications-button" type="submit">Save notification preferences</button>
        </form>
    {% else %}
        <p id="login-prompt">Login to subscribe!</p>
    {% endif %}
    {% 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.id }}">
                        <td>
                            <a href="{% url 'twitch:campaign_detail' campaign.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_asset_url %}
                                                <img src="{{ 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.id }}">
                        <td>
                            <a href="{% url 'twitch:campaign_detail' campaign.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_asset_url %}
                                                <img src="{{ 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.id }}">
                        <td>
                            <a href="{% url 'twitch:campaign_detail' campaign.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_asset_url %}
                                                <img src="{{ 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 %}