{% extends "base.html" %}
{% load static %}
{% block title %}
    {{ campaign.clean_name }}
{% endblock title %}
{% block content %}
    <!-- Campaign Title -->
    {% if campaign.game %}
        <h1 id="campaign-title">
            <a href="{% url 'twitch:game_detail' campaign.game.twitch_id %}">{{ campaign.game.get_game_name }}</a> - {{ campaign.clean_name }}
        </h1>
    {% else %}
        <h1 id="campaign-title">{{ campaign.clean_name }}</h1>
    {% endif %}
    {% if owner %}
        <p id="campaign-owner">
            <a href="{% url 'twitch:organization_detail' owner.twitch_id %}">{{ owner.name }}</a>
        </p>
    {% endif %}
    <!-- RSS Feeds -->
    <div style="margin-bottom: 1rem;">
        {% if campaign.game %}
            <a href="{% url 'twitch:game_campaign_feed' campaign.game.twitch_id %}"
               style="margin-right: 1rem"
               title="RSS feed for {{ campaign.game.display_name }} campaigns">RSS feed for {{ campaign.game.display_name }} campaigns</a>
        {% endif %}
        {% if owner %}
            <a href="{% url 'twitch:organization_campaign_feed' owner.twitch_id %}"
               style="margin-right: 1rem"
               title="RSS feed for {{ owner.name }} campaigns">RSS feed for {{ owner.name }} campaigns</a>
        {% endif %}
    </div>
    <!-- Campaign image -->
    {% if campaign.image_best_url or campaign.image_url %}
        <img id="campaign-image"
             height="160"
             width="160"
             src="{{ campaign.image_best_url|default:campaign.image_url }}"
             alt="{{ campaign.name }}" />
    {% endif %}
    <!-- Campaign description -->
    <p id="campaign-description">{{ campaign.description|linebreaksbr }}</p>
    <!-- Campaign end times -->
    <div>
        {% if campaign.end_at < now %}
            <time id="campaign-end-time"
                  datetime="{{ campaign.end_at|date:'c' }}"
                  title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}">
                <strong>Ended</strong> {{ campaign.end_at|timesince }} ago
            </time>
        {% else %}
            <time id="campaign-end-time"
                  datetime="{{ campaign.end_at|date:'c' }}"
                  title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}">
                <strong>Ends in</strong> {{ campaign.end_at|timeuntil }}
            </time>
        {% endif %}
    </div>
    <!-- Campaign start times -->
    <div>
        {% if campaign.start_at > now %}
            <time id="campaign-start-time"
                  datetime="{{ campaign.start_at|date:'c' }}"
                  title="{{ campaign.start_at|date:'DATETIME_FORMAT' }}">
                <strong>Starts in</strong> {{ campaign.start_at|timeuntil }}
            </time>
        {% else %}
            <time id="campaign-start-time"
                  datetime="{{ campaign.start_at|date:'c' }}"
                  title="{{ campaign.start_at|date:'DATETIME_FORMAT' }}">
                <strong>Started</strong> {{ campaign.start_at|timesince }} ago
            </time>
        {% endif %}
    </div>
    <!-- Campaign added times -->
    <div>
        <time id="campaign-added-time"
              datetime="{{ campaign.added_at|date:'c' }}"
              title="{{ campaign.added_at|date:'DATETIME_FORMAT' }}">
            <strong>Scraped</strong> {{ campaign.added_at|timesince }} ago
        </time>
    </div>
    <!-- Campaign duration -->
    <div>
        <time id="campaign-duration"
              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' }}">
            <strong>Duration</strong> {{ campaign.start_at|timesince:campaign.end_at }}
        </time>
    </div>
    <!-- Campaign Detail URL -->
    {% if campaign.details_url %}
        {# TODO: Archive this URL automatically #}
        <p>
            <a id="campaign-details-url"
               href="{{ campaign.details_url }}"
               target="_blank">Official Details</a>
        </p>
    {% endif %}
    <!-- Campaign Account Link URL -->
    {% if campaign.account_link_url %}
        {# TODO: Archive this URL automatically #}
        <p>
            <a id="campaign-account-link-url"
               href="{{ campaign.account_link_url }}"
               target="_blank">Connect Account</a>
        </p>
    {% endif %}
    <!-- Allowed Channels -->
    {% if allowed_channels %}
        <h5>Allowed Channels</h5>
        <div id="allowed-channels" style="margin-bottom: 20px;">
            {% for channel in allowed_channels %}
                <a href="{% url 'twitch:channel_detail' channel.twitch_id %}"
                   style="display: inline-block;
                          margin: 2px 5px 2px 0;
                          padding: 3px 8px;
                          background-color: #9146ff;
                          color: white;
                          text-decoration: none;
                          border-radius: 4px;
                          font-size: 0.9em">{{ channel.display_name }}</a>
            {% endfor %}
        </div>
    {% else %}
        <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>
    {% endif %}
    <h5>Campaign Info</h5>
    {% if drops %}
        <table id="drops-table" style="border-collapse: collapse; width: 100%;">
            <thead>
                <tr>
                    <th>Benefits</th>
                    <th>Drop Name</th>
                    <th>Requirements</th>
                    <th>Period</th>
                </tr>
            </thead>
            <tbody>
                {% for drop in drops %}
                    <tr id="drop-{{ drop.drop.twitch_id }}">
                        <td>
                            {% for benefit in drop.drop.benefits.all %}
                                {% if benefit.image_asset_url %}
                                    <img height="160"
                                         width="160"
                                         loading="lazy"
                                         style="object-fit: cover;
                                                margin-right: 3px"
                                         src="{{ benefit.image_best_url|default:benefit.image_asset_url }}"
                                         alt="{{ benefit.name }}" />
                                {% endif %}
                                {% if benefit.distribution_type == "BADGE" and drop.awarded_badge %}
                                    <div style="margin-top: 6px; font-size: 0.9em;">
                                        <strong>Awards Badge:</strong>
                                        <a href="{% url 'twitch:badge_set_detail' set_id=drop.awarded_badge.badge_set.set_id %}">
                                            <img src="{{ drop.awarded_badge.image_url_2x }}"
                                                 alt="{{ drop.awarded_badge.title }} badge"
                                                 height="24"
                                                 width="24"
                                                 style="vertical-align: middle;
                                                        margin-right: 4px" />
                                            {{ drop.awarded_badge.title }}
                                        </a>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </td>
                        <td>
                            <div style="margin-bottom: 5px;">{{ drop.drop.name }}</div>
                            {% for benefit in drop.drop.benefits.all %}
                                {% if benefit.name != drop.drop.name %}
                                    <div style="font-size: 0.9em; color: #a9a9a9; margin-bottom: 3px;">{{ benefit.name }}</div>
                                {% endif %}
                            {% endfor %}
                        </td>
                        <td>
                            {% if drop.drop.required_minutes_watched %}{{ drop.drop.required_minutes_watched }} minutes watched{% endif %}
                            {% if drop.drop.required_subs > 0 %}
                                {% if drop.drop.required_minutes_watched %}and{% endif %}
                                {{ drop.drop.required_subs }} subscriptions required
                            {% endif %}
                        </td>
                        <td>
                            <div>
                                {% if drop.local_start %}{{ drop.local_start|date:"M j, Y H:i" }}{% endif %}
                                {% if drop.local_start and drop.local_end %}-{% endif %}
                                {% if drop.local_end %}{{ drop.local_end|date:"M j, Y H:i" }}{% endif %}
                                <small style="color: #a9a9a9;">{{ drop.timezone_name }}</small>
                            </div>
                            <div style="font-size: 0.8em; color: #a9a9a9;">{{ drop.countdown_text }}</div>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p>No drops available for this campaign.</p>
    {% endif %}
    <!-- Campaign JSON -->
    {{ campaign_data|safe }}
{% endblock content %}