{% extends "base.html" %}
{% load static %}
{% block title %}
    Drop Campaigns - Twitch Drops Tracker
{% endblock title %}
{% block content %}
    <h1>Drop Campaigns</h1>
    <form method="get" action="{% url 'twitch:campaign_list' %}">
        <!-- Game Filter -->
        <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 }}</option>
            {% endfor %}
        </select>
        <!-- Status Filter -->
        <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>
        <button type="submit">Apply Filters</button>
    </form>
    <h5>Campaign List</h5>
    {% if campaigns %}
        {% for campaign in campaigns %}
            {% if campaign.image_url %}
                <img src="{{ campaign.image_url }}"
                     width="70"
                     height="70"
                     alt="{{ campaign.name }}">
            {% else %}
                <img src="{% static 'images/placeholder.png' %}"
                     width="70"
                     height="70"
                     alt="No Image Available">
            {% endif %}
            <h6 title="{{ campaign.name }}">{{ campaign.clean_name }}</h6>
            <p>
                <a href="{% url 'twitch:game_detail' campaign.game.id %}"
                   title="{{ campaign.game.display_name }}">{{ campaign.game.display_name }}</a>
            </p>
            <p>
                {{ campaign.start_at|date:"M d, Y" }}
                - {{ campaign.end_at|date:"M d, Y" }}
            </p>
            {% if campaign.start_at <= now and campaign.end_at >= now %}
                {% if campaign.status == 'ACTIVE' %}Active{% endif %}
            {% elif campaign.start_at > now %}
                Upcoming
            {% else %}
                Expired
            {% endif %}
            <a href="{% url 'twitch:campaign_detail' campaign.id %}">Details</a>
        {% endfor %}
    {% else %}
        No campaigns found with the current filters.
    {% endif %}
    <!-- Pagination -->
    {% if is_paginated %}
        <nav>
            <ul>
                {% if page_obj.has_previous %}
                    <li>
                        <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">
                            ««
                        </a>
                    </li>
                    <li>
                        <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 }}"
                           aria-label="Previous">«</a>
                    </li>
                {% else %}
                    <li>««</li>
                    <li>«</li>
                {% endif %}
                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                        <li>{{ num }}</li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li>
                            <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 }}">{{ num }}</a>
                        </li>
                    {% elif num == 1 or num == page_obj.paginator.num_pages %}
                        <li>
                            <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 }}">{{ num }}</a>
                        </li>
                    {% elif num == page_obj.number|add:'-4' or num == page_obj.number|add:'4' %}
                        <li>...</li>
                    {% endif %}
                {% endfor %}
                {% if page_obj.has_next %}
                    <li>
                        <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 }}">»</a>
                    </li>
                    <li>
                        <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 }}">»»</a>
                    </li>
                {% else %}
                    <li>»</li>
                    <li>»»</li>
                {% endif %}
            </ul>
        </nav>
        <small>
            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>
    {% endif %}
{% endblock content %}