{% extends "base.html" %}
{% load static %}
{% block title %}
    Twitch drops
{% endblock title %}
{% block content %}
    <main>
        <h1 id="page-title">Twitch Drops</h1>
        <pre>
Latest drops are shown first within each game. Click on a campaign or game title to see more details.
Hover over the end time to see the exact date and time.
</pre>
        <!-- RSS Feeds -->
        <div style="margin-bottom: 1rem;">
            <a href="{% url 'twitch:campaign_feed' %}"
               style="margin-right: 1rem"
               title="RSS feed for all campaigns">RSS feed for campaigns</a>
        </div>
        {% if campaigns_by_game %}
            {% for game_id, game_data in campaigns_by_game.items %}
                <article id="game-article-{{ game_id }}" style="margin-bottom: 2rem;">
                    <header style="margin-bottom: 1rem;">
                        <h2 style="margin: 0 0 0.5rem 0;">
                            <a href="{% url 'twitch:game_detail' game_id %}">{{ game_data.name }}</a>
                        </h2>
                        {% if game_data.owners %}
                            <div style="font-size: 0.9rem; color: #666;">
                                Organizations:
                                {% for org in game_data.owners %}
                                    <a href="{% url 'twitch:organization_detail' org.twitch_id %}">{{ org.name }}</a>
                                    {% if not forloop.last %},{% endif %}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </header>
                    <div style="display: flex; gap: 1rem;">
                        <div style="flex-shrink: 0;">
                            <img src="{{ game_data.box_art }}"
                                 alt="Box art for {{ game_data.name }}"
                                 width="200"
                                 height="267"
                                 style="border-radius: 8px" />
                        </div>
                        <div style="flex: 1; overflow-x: auto;">
                            <div style="display: flex; gap: 1rem; min-width: max-content;">
                                {% for campaign in game_data.campaigns %}
                                    <article id="campaign-article-{{ campaign.twitch_id }}"
                                             style="display: flex;
                                                    flex-direction: column;
                                                    align-items: center;
                                                    padding: 0.5rem;
                                                    flex-shrink: 0">
                                        <div>
                                            <a href="{% url 'twitch:campaign_detail' campaign.twitch_id %}">
                                                <img src="{{ campaign.image_url }}"
                                                     alt="Image for {{ campaign.name }}"
                                                     width="120"
                                                     height="120"
                                                     style="border-radius: 4px" />
                                                <h4 style="margin: 0.5rem 0; text-align: left;">{{ campaign.clean_name }}</h4>
                                            </a>
                                            <time datetime="{{ campaign.end_at|date:'c' }}"
                                                  title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}"
                                                  style="font-size: 0.9rem;
                                                         display: block;
                                                         text-align: left">
                                                Ends in {{ campaign.end_at|timeuntil }}
                                            </time>
                                            <time datetime="{{ campaign.start_at|date:'c' }}"
                                                  title="{{ campaign.start_at|date:'DATETIME_FORMAT' }}"
                                                  style="font-size: 0.9rem;
                                                         display: block;
                                                         text-align: left">
                                                Started {{ campaign.start_at|timesince }} ago
                                            </time>
                                            <time datetime="{{ campaign.added_at|date:'c' }}"
                                                  title="{{ campaign.added_at|date:'DATETIME_FORMAT' }}"
                                                  style="font-size: 0.9rem;
                                                         display: block;
                                                         text-align: left">
                                                Scraped {{ campaign.added_at|timesince }} ago
                                            </time>
                                            <time datetime="{{ campaign.start_at|date:'c' }} to {{ campaign.end_at|date:'c' }}"
                                                  title="{{ campaign.start_at|date:'DATETIME_FORMAT' }} to {{ campaign.end_at|date:'DATETIME_FORMAT' }}"
                                                  style="font-size: 0.9rem;
                                                         display: block;
                                                         text-align: left">
                                                Duration: {{ campaign.start_at|timesince:campaign.end_at }}
                                            </time>
                                            <div style="margin-top: 0.5rem; font-size: 0.8rem; ">
                                                <strong>Channels:</strong>
                                                <ul style="margin: 0.25rem 0 0 0;
                                                           padding-left: 1rem;
                                                           list-style-type: none">
                                                    {% if campaign.allow_is_enabled %}
                                                        {% if campaign.allow_channels.all %}
                                                            {% for channel in campaign.allow_channels.all %}
                                                                {% if forloop.counter <= 5 %}
                                                                    <li style="margin-bottom: 0.1rem;">
                                                                        <a href="https://twitch.tv/{{ channel.name }}"
                                                                           target="_blank"
                                                                           rel="noopener noreferrer"
                                                                           title="Watch {{ channel.display_name }} on Twitch">
                                                                            {{ channel.display_name }}
                                                                        </a>
                                                                    </li>
                                                                {% endif %}
                                                            {% endfor %}
                                                            {% if campaign.allow_channels.all|length > 5 %}
                                                                <li style="margin-bottom: 0.1rem; color: #666; font-style: italic;">
                                                                    ... and {{ campaign.allow_channels.all|length|add:"-5" }} more
                                                                </li>
                                                            {% endif %}
                                                        {% else %}
                                                            {% if campaign.game.twitch_directory_url %}
                                                                <li>
                                                                    <a href="{{ campaign.game.twitch_directory_url }}"
                                                                       target="_blank"
                                                                       rel="noopener noreferrer"
                                                                       title="Open Twitch category page for {{ campaign.game.display_name }} with Drops filter">
                                                                        Browse {{ campaign.game.display_name }} category
                                                                    </a>
                                                                </li>
                                                            {% else %}
                                                                <li>Failed to get Twitch category URL :(</li>
                                                            {% endif %}
                                                        {% endif %}
                                                    {% else %}
                                                        {% if campaign.game.twitch_directory_url %}
                                                            <li>
                                                                <a href="{{ campaign.game.twitch_directory_url }}"
                                                                   target="_blank"
                                                                   rel="noopener noreferrer"
                                                                   title="Find streamers playing {{ campaign.game.display_name }} with drops enabled">
                                                                    Go to a participating live channel
                                                                </a>
                                                            </li>
                                                        {% else %}
                                                            <li>Failed to get Twitch directory URL :(</li>
                                                        {% endif %}
                                                    {% endif %}
                                                </ul>
                                            </div>
                                        </div>
                                    </article>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </article>
            {% endfor %}
        {% else %}
            <p>No active campaigns at the moment.</p>
        {% endif %}
        <!-- Reward Campaigns Section -->
        {% if active_reward_campaigns %}
            <section id="reward-campaigns-section"
                     style="margin-top: 2rem;
                            border-top: 2px solid #ddd;
                            padding-top: 1rem">
                <header style="margin-bottom: 1rem;">
                    <h2 style="margin: 0 0 0.5rem 0;">
                        <a href="{% url 'twitch:reward_campaign_list' %}">Reward Campaigns (Quest Rewards)</a>
                    </h2>
                    <p style="font-size: 0.9rem; color: #666; margin: 0.5rem 0 0 0;">Complete quests to earn rewards</p>
                </header>
                <div style="display: grid;
                            gap: 1rem;
                            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))">
                    {% for campaign in active_reward_campaigns %}
                        <article id="reward-campaign-{{ campaign.twitch_id }}"
                                 style="border: 1px solid #ddd;
                                        border-radius: 8px;
                                        padding: 1rem">
                            <h3 style="margin: 0 0 0.5rem 0;">
                                <a href="{% url 'twitch:reward_campaign_detail' campaign.twitch_id %}">
                                    {% if campaign.brand %}
                                        {{ campaign.brand }}: {{ campaign.name }}
                                    {% else %}
                                        {{ campaign.name }}
                                    {% endif %}
                                </a>
                            </h3>
                            {% if campaign.summary %}
                                <p style="font-size: 0.9rem; color: #555; margin: 0.5rem 0;">{{ campaign.summary }}</p>
                            {% endif %}
                            <div style="font-size: 0.85rem; color: #666;">
                                <p style="margin: 0.25rem 0;">
                                    <strong>Status:</strong>
                                    {% if campaign.is_active %}
                                        <span style="color: green;">Active</span>
                                    {% elif campaign.starts_at > now %}
                                        <span style="color: orange;">Upcoming</span>
                                    {% else %}
                                        <span style="color: red;">Expired</span>
                                    {% endif %}
                                </p>
                                {% if campaign.starts_at %}
                                    <p style="margin: 0.25rem 0;">
                                        <strong>Starts:</strong>
                                        <time datetime="{{ campaign.starts_at|date:'c' }}"
                                              title="{{ campaign.starts_at|date:'DATETIME_FORMAT' }}">
                                            {{ campaign.starts_at|date:"M d, Y H:i" }}
                                        </time>
                                    </p>
                                {% endif %}
                                {% if campaign.ends_at %}
                                    <p style="margin: 0.25rem 0;">
                                        <strong>Ends:</strong>
                                        <time datetime="{{ campaign.ends_at|date:'c' }}"
                                              title="{{ campaign.ends_at|date:'DATETIME_FORMAT' }}">
                                            {{ campaign.ends_at|date:"M d, Y H:i" }}
                                        </time>
                                    </p>
                                {% endif %}
                                {% if campaign.game %}
                                    <p style="margin: 0.25rem 0;">
                                        <strong>Game:</strong>
                                        <a href="{% url 'twitch:game_detail' campaign.game.twitch_id %}">{{ campaign.game.display_name }}</a>
                                    </p>
                                {% elif campaign.is_sitewide %}
                                    <p style="margin: 0.25rem 0;">
                                        <strong>Type:</strong> Site-wide reward campaign
                                    </p>
                                {% endif %}
                            </div>
                            {% if campaign.external_url %}
                                <div style="margin-top: 0.75rem;">
                                    <a href="{{ campaign.external_url }}"
                                       target="_blank"
                                       rel="noopener noreferrer"
                                       style="display: inline-block;
                                              padding: 0.5rem 1rem;
                                              background-color: #9146ff;
                                              color: white;
                                              border-radius: 4px;
                                              text-decoration: none;
                                              font-size: 0.9rem">Claim Reward</a>
                                </div>
                            {% endif %}
                        </article>
                    {% endfor %}
                </div>
            </section>
        {% endif %}
    </main>
{% endblock content %}