{% extends "base.html" %}
{% load static %}
{% block title %}
    Twitch drops
{% endblock title %}
{% block content %}
    <main>
        <h1 id="page-title">Twitch Drops</h1>
        <pre>
Drops are sorted alphabetically by organization and 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>
        {% if campaigns_by_org_game %}
            {% for org_id, org_data in campaigns_by_org_game.items %}
                <section id="org-section-{{ org_id }}">
                    <h2>
                        {% if org_data.name %}
                            {{ org_data.name }}
                        {% else %}
                            Organization {{ org_id }}
                        {% endif %}
                    </h2>
                    {% for game_id, game_data in org_data.games.items %}
                        <article id="game-article-{{ game_id }}">
                            <header style="margin-bottom: 1rem;">
                                <h3 style="margin: 0 0 0.5rem 0;">
                                    <a href="{% url 'twitch:game_detail' game_id %}">{{ game_data.name }}</a>
                                </h3>
                            </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.id }}"
                                                     style="display: flex;
                                                            flex-direction: column;
                                                            align-items: center;
                                                            padding: 0.5rem;
                                                            flex-shrink: 0">
                                                <div>
                                                    <a href="{% url 'twitch:campaign_detail' campaign.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 %}
                                                                {% 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 %}
                </section>
            {% endfor %}
        {% else %}
            <p>No active campaigns at the moment.</p>
        {% endif %}
    </main>
{% endblock content %}