{% extends "base.html" %}
{% load static %}
{% load image_tags %}
{% block title %}
    {{ campaign.clean_name }}
{% endblock title %}
{% block extra_head %}
    {% if campaign and campaign.game %}
        <link rel="alternate"
              type="application/rss+xml"
              title="{{ campaign.game.display_name }} campaigns (RSS)"
              href="{% url 'core:game_campaign_feed' campaign.game.twitch_id %}" />
        <link rel="alternate"
              type="application/atom+xml"
              title="{{ campaign.game.display_name }} campaigns (Atom)"
              href="{% url 'core:game_campaign_feed_atom' campaign.game.twitch_id %}" />
        <link rel="alternate"
              type="application/atom+xml"
              title="{{ campaign.game.display_name }} campaigns (Discord)"
              href="{% url 'core:game_campaign_feed_discord' campaign.game.twitch_id %}" />
    {% endif %}
{% endblock extra_head %}
{% block content %}
    <div style="display: flex; align-items: flex-start;">
        <!-- Campaign image -->
        <div style="margin-right: 16px;">
            {% if campaign.image_best_url %}
                {% picture campaign.image_best_url alt=campaign.name width=160 %}
            {% endif %}
        </div>
        <!-- Campaign Title -->
        <div style="display: flex; flex-direction: column;">
            <h1 style="margin-top: 0; margin-bottom: 0px;">{{ campaign.clean_name }}</h1>
            <!-- Add breadcrumbs -->
            <div>
                <a href="{% url 'twitch:dashboard' %}">Twitch</a> > <a href="{% url 'twitch:campaign_list' %}">Campaigns</a> > <a href="{% url 'twitch:game_detail' campaign.game.twitch_id %}">{{ campaign.game.display_name }}</a> > {{ campaign.clean_name }}
            </div>
            <!-- Game owner -->
            {% if owners %}
                <div style="font-size: 0.9em;">
                    Owned by
                    {% for owner in owners %}
                        <a href="{% url 'twitch:organization_detail' owner.twitch_id %}">{{ owner.name }}</a>
                        {% if not forloop.last %}-{% endif %}
                    {% endfor %}
                </div>
            {% endif %}
            <!-- Campaign description -->
            <p>{{ campaign.description|linebreaksbr }}</p>
            <div>
                Published
                <time datetime="{{ campaign.added_at|date:'c' }}"
                      title="{{ campaign.added_at|date:'DATETIME_FORMAT' }}">{{ campaign.added_at|date:"M d, Y H:i" }}</time> ({{ campaign.added_at|timesince }} ago)
            </div>
            <div>
                Last updated
                <time datetime="{{ campaign.updated_at|date:'c' }}"
                      title="{{ campaign.updated_at|date:'DATETIME_FORMAT' }}">{{ campaign.updated_at|date:"M d, Y H:i" }}</time> ({{ campaign.updated_at|timesince }} ago)
            </div>
            <!-- Campaign end times -->
            <div>
                {% if campaign.end_at < now %}
                    Ended
                    <time datetime="{{ campaign.end_at|date:'c' }}"
                          title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}">{{ campaign.end_at|date:"M d, Y H:i" }}</time> ({{ campaign.end_at|timesince }} ago)
                {% else %}
                    Ends in
                    <time datetime="{{ campaign.end_at|date:'c' }}"
                          title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}">{{ campaign.end_at|date:"M d, Y H:i" }}</time> (in {{ campaign.end_at|timeuntil }})
                {% endif %}
            </div>
            <!-- Campaign start times -->
            <div>
                {% if campaign.start_at > now %}
                    Starts in
                    <time datetime="{{ campaign.start_at|date:'c' }}"
                          title="{{ campaign.start_at|date:'DATETIME_FORMAT' }}">{{ campaign.start_at|date:"M d, Y H:i" }}</time> (in {{ campaign.start_at|timeuntil }})
                {% else %}
                    Started
                    <time datetime="{{ campaign.start_at|date:'c' }}"
                          title="{{ campaign.start_at|date:'DATETIME_FORMAT' }}">{{ campaign.start_at|date:"M d, Y H:i" }}</time> ({{ campaign.start_at|timesince }} ago)
                {% endif %}
            </div>
            <!-- Campaign duration -->
            <div>
                Duration is
                <time datetime="{{ campaign.duration_iso }}"
                      title="{{ campaign.start_at|date:'DATETIME_FORMAT' }} to {{ campaign.end_at|date:'DATETIME_FORMAT' }}">
                    {{ campaign.end_at|timeuntil:campaign.start_at }}
                </time>
            </div>
            <!-- Buttons -->
            <div>
                <!-- Campaign Detail URL -->
                {% if campaign.details_url %}<a href="{{ campaign.details_url }}">[details]</a>{% endif %}
                <!-- Campaign Account Link URL -->
                {% if campaign.account_link_url %}<a href="{{ campaign.account_link_url }}">[connect]</a>{% endif %}
                <!-- RSS Feeds -->
                {% if campaign.game %}
                    <a href="{% url 'core:game_campaign_feed' campaign.game.twitch_id %}"
                       title="RSS feed for {{ campaign.game.display_name }} campaigns">[rss]</a>
                    <a href="{% url 'core:game_campaign_feed_atom' campaign.game.twitch_id %}"
                       title="Atom feed for {{ campaign.game.display_name }} campaigns">[atom]</a>
                    <a href="{% url 'core:game_campaign_feed_discord' campaign.game.twitch_id %}"
                       title="Discord feed for {{ campaign.game.display_name }} campaigns">[discord]</a>
                    <a href="{% url 'core:docs_rss' %}" title="RSS feed documentation">[explain]</a>
                {% endif %}
            </div>
        </div>
    </div>
    <h5>Campaign Info</h5>
    {% if drops %}
        <!-- Drops table -->
        <table style="border-collapse: collapse; width: 100%;">
            <tbody>
                {% for drop in drops %}
                    <tr>
                        <td>
                            {% for benefit in drop.drop.benefits.all %}
                                {% if benefit.image_asset_url %}
                                    <!-- Show the benefit image if available -->
                                    {% picture benefit.image_best_url|default:benefit.image_asset_url alt=benefit.name width=160 height=160 style="object-fit: cover; margin-right: 3px" %}
                                {% endif %}
                                {% if benefit.distribution_type == "BADGE" and drop.awarded_badge %}
                                    <!-- If the drop awards a badge, show the badge prominently with its description -->
                                    <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 %}">
                                            {% picture drop.awarded_badge.image_url_2x alt=drop.awarded_badge.title|add:" badge" width=24 height=24 style="vertical-align: middle; margin-right: 4px" %}
                                            {{ drop.awarded_badge.title }}
                                        </a>
                                        {% if drop.awarded_badge.description %}
                                            <!-- Show the badge description if available -->
                                            <div style="margin-top: 4px; color: #a9a9a9; font-size: 0.9em;">{{ drop.awarded_badge.description|linebreaksbr }}</div>
                                        {% endif %}
                                    </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 %}
                                    <!-- Show additional benefits if they have a different name than the drop itself -->
                                    <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 %}
        <!-- If there are no drops, show a message indicating that there are no drops available for this campaign -->
        <p>No drops available for this campaign.</p>
    {% endif %}
    <!-- Allowed channels -->
    {% if allowed_channels %}
        <!-- If specific allowed channels are specified, list them -->
        <h5>Allowed Channels</h5>
        <div>
            {% for channel in allowed_channels %}
                <a href="{% url 'twitch:channel_detail' channel.twitch_id %}">{{ channel.display_name }}</a>
            {% endfor %}
        </div>
    {% else %}
        <!-- If no allowed channels are specified, link to the game's Twitch directory for channels with drops enabled -->
        <a href="{{ campaign.game.twitch_directory_url }}"
           title="Find streamers playing {{ campaign.game.display_name }} with drops enabled">
            Go to a participating live channel
        </a>
    {% endif %}
{% endblock content %}