{% extends "base.html" %}
{% load static %}
{% block title %}
    Twitch drops
{% endblock title %}
{% block content %}
    <main>
        <h1>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>
                    <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>
                            <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 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;
                                                                 color: #666;
                                                                 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;
                                                                 color: #666;
                                                                 display: block;
                                                                 text-align: left">
                                                        Started {{ campaign.start_at|timesince }} ago
                                                    </time>
                                                    <time datetime="{{ campaign.created_at|date:'c' }}"
                                                          title="{{ campaign.created_at|date:'DATETIME_FORMAT' }}"
                                                          style="font-size: 0.9rem;
                                                                 color: #666;
                                                                 display: block;
                                                                 text-align: left">
                                                        Scraped {{ campaign.created_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;
                                                                 color: #666;
                                                                 display: block;
                                                                 text-align: left">
                                                        Duration: {{ campaign.start_at|timesince:campaign.end_at }}
                                                    </time>
                                                </div>
                                            </article>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </article>
                    {% endfor %}
                </section>
            {% endfor %}
        {% else %}
            <p>No active campaigns at the moment.</p>
        {% endif %}
    </main>
{% endblock content %}