{% extends "base.html" %}
{% block title %}
    Kick Drop Campaigns
{% endblock title %}
{% block extra_head %}
    <link rel="alternate"
          type="application/rss+xml"
          title="All Kick campaigns (RSS)"
          href="{% url 'kick:campaign_feed' %}" />
    <link rel="alternate"
          type="application/atom+xml"
          title="All Kick campaigns (Atom)"
          href="{% url 'kick:campaign_feed_atom' %}" />
    <link rel="alternate"
          type="application/atom+xml"
          title="All Kick campaigns (Discord)"
          href="{% url 'kick:campaign_feed_discord' %}" />
{% endblock extra_head %}
{% block content %}
    <main>
        <h1>List of Kick drops</h1>
        <div>
            <a href="{% url 'kick:dashboard' %}">Kick</a> > Campaigns
        </div>
        <div>
            Scraped from <a href="https://web.kick.com/api/v1/drops/campaigns">Kick API</a>.
        </div>
        <div>
            <a href="{% url 'kick:campaign_feed' %}"
               title="RSS feed for all campaigns">[rss]</a>
            <a href="{% url 'kick:campaign_feed_atom' %}"
               title="Atom feed for all campaigns">[atom]</a>
            <a href="{% url 'kick:campaign_feed_discord' %}"
               title="Discord feed for all campaigns">[discord]</a>
            <a href="{% url 'core:docs_rss' %}" title="RSS feed documentation">[explain]</a>
        </div>
        <form method="get" action="{% url 'kick:campaign_list' %}">
            <div style="display: flex;
                        gap: 1rem;
                        flex-wrap: wrap;
                        margin-bottom: 1rem">
                <select name="game">
                    <option value="">All Games</option>
                    {% for game in games %}
                        <option value="{{ game.kick_id }}"
                                {% if selected_game == game.kick_id|stringformat:"s" %}selected{% endif %}>{{ game.name }}</option>
                    {% endfor %}
                </select>
                <select name="status">
                    <option value="">All Statuses</option>
                    {% for s in status_options %}
                        <option value="{{ s }}" {% if selected_status == s %}selected{% endif %}>{{ s|capfirst }}</option>
                    {% endfor %}
                </select>
                <button type="submit">Filter</button>
                {% if selected_status or selected_game %}
                    <a href="{% url 'kick:campaign_list' %}">Clear</a>
                {% endif %}
            </div>
        </form>
        {% if campaigns %}
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Game</th>
                        <th>Organization</th>
                        <th>Status</th>
                        <th>Starts</th>
                        <th>Ends</th>
                    </tr>
                </thead>
                <tbody>
                    {% for campaign in campaigns %}
                        <tr>
                            <td>
                                <a href="{% url 'kick:campaign_detail' campaign.kick_id %}">{{ campaign.name }}</a>
                            </td>
                            <td>
                                <a href="{% url 'kick:game_detail' campaign.category.kick_id %}">{{ campaign.category.name }}</a>
                            </td>
                            <td>
                                <a href="{% url 'kick:organization_detail' campaign.organization.kick_id %}">{{ campaign.organization.name }}</a>
                            </td>
                            <td>{{ campaign.status }}</td>
                            <td>
                                {% if campaign.starts_at %}
                                    <time datetime="{{ campaign.starts_at|date:'c' }}"
                                          title="{{ campaign.starts_at|date:'DATETIME_FORMAT' }}">{{ campaign.starts_at|date:"M d, Y" }}</time>
                                    {% if campaign.starts_at < now %}
                                        ({{ campaign.starts_at|timesince }} ago)
                                    {% else %}
                                        (in {{ campaign.starts_at|timeuntil }})
                                    {% endif %}
                                {% endif %}
                            </td>
                            <td>
                                {% if campaign.ends_at %}
                                    <time datetime="{{ campaign.ends_at|date:'c' }}"
                                          title="{{ campaign.ends_at|date:'DATETIME_FORMAT' }}">{{ campaign.ends_at|date:"M d, Y" }}</time>
                                    {% if campaign.ends_at < now %}
                                        ({{ campaign.ends_at|timesince }} ago)
                                    {% else %}
                                        (in {{ campaign.ends_at|timeuntil }})
                                    {% endif %}
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% if is_paginated %}
                <nav aria-label="Pagination">
                    {% if page_obj.has_previous %}
                        <a href="?page={{ page_obj.previous_page_number }}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_game %}&game={{ selected_game }}{% endif %}">Previous</a>
                    {% endif %}
                    <span>Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
                    {% if page_obj.has_next %}
                        <a href="?page={{ page_obj.next_page_number }}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_game %}&game={{ selected_game }}{% endif %}">Next</a>
                    {% endif %}
                </nav>
            {% endif %}
        {% else %}
            <p>No campaigns found.</p>
        {% endif %}
    </main>
{% endblock content %}