{% extends "base.html" %}
{% load static %}
{% block title %}
    Drop Campaigns - Twitch Drops Tracker
{% endblock title %}
{% block content %}
    <main>
        <header>
            <h1 id="page-title">Drop Campaigns</h1>
            <p>Browse all available drop campaigns</p>
        </header>
        <form id="filter-form"
              method="get"
              action="{% url 'twitch:campaign_list' %}"
              style="margin-bottom: 2rem;
                     padding: 1rem;
                     border-radius: 8px">
            <div style="display: flex;
                        gap: 1rem;
                        align-items: center;
                        flex-wrap: wrap">
                <!-- Game Filter -->
                <div>
                    <label for="game" style="margin-right: 0.5rem; font-weight: 600;">Game:</label>
                    <select id="game" name="game">
                        <option value="">All Games</option>
                        {% for game in games %}
                            <option value="{{ game.id }}"
                                    {% if selected_game == game.id %}selected{% endif %}>
                                {{ game.display_name|default:game.name|default:game.slug|default:game.id }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <!-- Status Filter -->
                <div>
                    <label for="status" style="margin-right: 0.5rem; font-weight: 600;">Status:</label>
                    <select id="status" name="status">
                        <option value="">All Statuses</option>
                        {% for status in status_options %}
                            <option value="{{ status }}"
                                    {% if selected_status == status %}selected{% endif %}>{{ status|title }}</option>
                        {% endfor %}
                    </select>
                </div>
                <button id="apply-filters-button" type="submit">Apply Filters</button>
            </div>
        </form>
        {% if campaigns %}
            {% regroup campaigns by game as campaigns_by_game %}
            {% for game_group in campaigns_by_game %}
                <section id="game-group-{{ game_group.grouper.id }}"
                         style="margin-bottom: 3rem">
                    <div style="display: flex; gap: 1rem;">
                        <div style="flex-shrink: 0;">
                            {% if game_group.grouper.box_art_best_url %}
                                <img src="{{ game_group.grouper.box_art_best_url }}"
                                     alt="Box art for {{ game_group.grouper.display_name }}"
                                     width="120"
                                     height="160"
                                     style="border-radius: 8px">
                            {% else %}
                                <div style="width: 120px;
                                            height: 160px;
                                            border: 1px solid;
                                            border-radius: 8px;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            font-size: 1rem">
                                    🎮
                                    <br>
                                    No Image
                                </div>
                            {% endif %}
                        </div>
                        <div style="flex: 1;">
                            {% comment %} Find this header section in your template {% endcomment %}
                            <header style="margin-bottom: 1rem;">
                                <h2 style="margin: 0 0 0.5rem 0;">
                                    <a id="game-link-{{ game_group.grouper.id }}"
                                       href="{% url 'twitch:game_detail' game_group.grouper.id %}"
                                       style="text-decoration: none">{{ game_group.grouper.display_name|default:game_group.grouper.name|default:game_group.grouper.slug|default:game_group.grouper.id }}</a>
                                </h2>
                                {% comment %} MODIFICATION: Check if the owner exists before creating the link {% endcomment %}
                                {% if game_group.grouper.owner %}
                                    <p style="margin: 0;">
                                        <a id="org-link-{{ game_group.grouper.owner.id }}"
                                           href="{% url 'twitch:organization_detail' game_group.grouper.owner.id %}"
                                           style="text-decoration: none">{{ game_group.grouper.owner.name }}</a>
                                    </p>
                                {% endif %}
                            </header>
                            <div style="overflow-x: auto;">
                                <div style="display: flex; gap: 1rem; min-width: max-content;">
                                    {% for campaign in game_group.list %}
                                        <article id="campaign-{{ campaign.id }}"
                                                 style="display: flex;
                                                        flex-direction: column;
                                                        align-items: flex-start;
                                                        padding: 0.5rem;
                                                        flex-shrink: 0">
                                            <div>
                                                <a id="campaign-link-{{ campaign.id }}"
                                                   href="{% url 'twitch:campaign_detail' campaign.id %}"
                                                   style="text-decoration: none">
                                                    {% if campaign.image_best_url or campaign.image_url %}
                                                        <img id="campaign-image-{{ campaign.id }}"
                                                             src="{{ campaign.image_best_url|default:campaign.image_url }}"
                                                             alt="Campaign artwork for {{ campaign.name }}"
                                                             width="120"
                                                             height="120"
                                                             style="border-radius: 4px">
                                                    {% else %}
                                                        <div style="width: 120px;
                                                                    height: 120px;
                                                                    border: 1px solid;
                                                                    border-radius: 4px;
                                                                    display: flex;
                                                                    align-items: center;
                                                                    justify-content: center;
                                                                    font-size: 0.9rem">
                                                            📦
                                                            <br>
                                                            No Image
                                                        </div>
                                                    {% endif %}
                                                    <h4 id="campaign-name-{{ campaign.id }}"
                                                        style="margin: 0.5rem 0;
                                                               text-align: left">{{ campaign.clean_name }}</h4>
                                                </a>
                                                <div style="font-size: 0.9rem;">
                                                    <time datetime="{{ campaign.start_at|date:'c' }}"
                                                          title="Start: {{ campaign.start_at|date:'DATETIME_FORMAT' }}">
                                                        {{ campaign.start_at|date:"M d, Y" }}
                                                    </time>
                                                    <span>-</span>
                                                    <time datetime="{{ campaign.end_at|date:'c' }}"
                                                          title="End: {{ campaign.end_at|date:'DATETIME_FORMAT' }}">
                                                        {{ campaign.end_at|date:"M d, Y" }}
                                                    </time>
                                                </div>
                                                <div style="margin-top: 0.5rem;">
                                                    {% if campaign.start_at <= now and campaign.end_at >= now %}
                                                        <span id="campaign-status-{{ campaign.id }}"
                                                              style="font-weight: 600;
                                                                     color: #28a745">Active</span>
                                                    {% elif campaign.start_at > now %}
                                                        <span id="campaign-status-{{ campaign.id }}" style="font-weight: 600;">Upcoming</span>
                                                    {% else %}
                                                        <span id="campaign-status-{{ campaign.id }}"
                                                              style="font-weight: 600;
                                                                     color: #dc3545">Expired</span>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </article>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            {% endfor %}
        {% else %}
            <section style="text-align: center; padding: 3rem 1rem;">
                <div style="font-size: 4rem; margin-bottom: 1rem;">📦</div>
                <h2 style="margin: 0 0 1rem 0;">No Campaigns Found</h2>
                <p style="margin: 0; font-size: 1.1rem;">
                    No campaigns match your current filters.
                    <br>
                    Try adjusting your search criteria.
                </p>
            </section>
        {% endif %}
        <!-- Pagination -->
        {% if is_paginated %}
            <nav id="pagination" style="margin-top: 3rem; text-align: center;">
                <div style="display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: 0.5rem;
                            flex-wrap: wrap">
                    {% if page_obj.has_previous %}
                        <a href="?{% if selected_status %}status={{ selected_status }}&{% endif %}{% if selected_game %}game={{ selected_game }}&{% endif %}{% if selected_per_page != 24 %}per_page={{ selected_per_page }}&{% endif %}page=1"
                           style="padding: 0.5rem 1rem;
                                  border: 1px solid;
                                  border-radius: 4px;
                                  text-decoration: none">««</a>
                        <a href="?{% if selected_status %}status={{ selected_status }}&{% endif %}{% if selected_game %}game={{ selected_game }}&{% endif %}{% if selected_per_page != 24 %}per_page={{ selected_per_page }}&{% endif %}page={{ page_obj.previous_page_number }}"
                           style="padding: 0.5rem 1rem;
                                  border: 1px solid;
                                  border-radius: 4px;
                                  text-decoration: none"
                           aria-label="Previous">«</a>
                    {% else %}
                        <span style="padding: 0.5rem 1rem;">««</span>
                        <span style="padding: 0.5rem 1rem;">«</span>
                    {% endif %}
                    {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                            <span style="padding: 0.5rem 1rem; border-radius: 4px; font-weight: 600">{{ num }}</span>
                        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                            <a href="?{% if selected_status %}status={{ selected_status }}&{% endif %}{% if selected_game %}game={{ selected_game }}&{% endif %}{% if selected_per_page != 24 %}per_page={{ selected_per_page }}&{% endif %}page={{ num }}"
                               style="padding: 0.5rem 1rem;
                                      border: 1px solid;
                                      border-radius: 4px;
                                      text-decoration: none">{{ num }}</a>
                        {% elif num == 1 or num == page_obj.paginator.num_pages %}
                            <a href="?{% if selected_status %}status={{ selected_status }}&{% endif %}{% if selected_game %}game={{ selected_game }}&{% endif %}{% if selected_per_page != 24 %}per_page={{ selected_per_page }}&{% endif %}page={{ num }}"
                               style="padding: 0.5rem 1rem;
                                      border: 1px solid;
                                      border-radius: 4px;
                                      text-decoration: none">{{ num }}</a>
                        {% elif num == page_obj.number|add:'-4' or num == page_obj.number|add:'4' %}
                            <span style="padding: 0.5rem 1rem;">...</span>
                        {% endif %}
                    {% endfor %}
                    {% if page_obj.has_next %}
                        <a href="?{% if selected_status %}status={{ selected_status }}&{% endif %}{% if selected_game %}game={{ selected_game }}&{% endif %}{% if selected_per_page != 24 %}per_page={{ selected_per_page }}&{% endif %}page={{ page_obj.next_page_number }}"
                           style="padding: 0.5rem 1rem;
                                  border: 1px solid;
                                  border-radius: 4px;
                                  text-decoration: none">»</a>
                        <a href="?{% if selected_status %}status={{ selected_status }}&{% endif %}{% if selected_game %}game={{ selected_game }}&{% endif %}{% if selected_per_page != 24 %}per_page={{ selected_per_page }}&{% endif %}page={{ page_obj.paginator.num_pages }}"
                           style="padding: 0.5rem 1rem;
                                  border: 1px solid;
                                  border-radius: 4px;
                                  text-decoration: none">»»</a>
                    {% else %}
                        <span style="padding: 0.5rem 1rem;">»</span>
                        <span style="padding: 0.5rem 1rem;">»»</span>
                    {% endif %}
                </div>
                <small style="display: block; margin-top: 1rem;">
                    Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }}
                    campaigns (Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }})
                </small>
            </nav>
        {% endif %}
    </main>
{% endblock content %}