{% extends "base.html" %}
{% block title %}
    {{ campaign.name }} — Kick Campaign
{% endblock title %}
{% block extra_head %}
    {% if campaign.category %}
        <link rel="alternate"
              type="application/rss+xml"
              title="{{ campaign.category.name }} campaigns (RSS)"
              href="{% url 'kick:game_campaign_feed' campaign.category.kick_id %}" />
        <link rel="alternate"
              type="application/atom+xml"
              title="{{ campaign.category.name }} campaigns (Atom)"
              href="{% url 'kick:game_campaign_feed_atom' campaign.category.kick_id %}" />
        <link rel="alternate"
              type="application/atom+xml"
              title="{{ campaign.category.name }} campaigns (Discord)"
              href="{% url 'kick:game_campaign_feed_discord' campaign.category.kick_id %}" />
    {% endif %}
{% endblock extra_head %}
{% block content %}
    <main>
        <div style="display: flex;
                    align-items: flex-start;
                    gap: 1.5rem;
                    margin-bottom: 1rem">
            <div style="flex-shrink: 0;">
                {% if campaign.image_url %}
                    <img src="{{ campaign.image_url }}"
                         alt="{{ campaign.name }} image"
                         width="200"
                         height="200"
                         loading="lazy"
                         style="max-width: 100%;
                                height: auto;
                                border-radius: 8px" />
                {% else %}
                    <div style="width: 200px;
                                height: 200px;
                                background-color: #eee;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border-radius: 8px">No Image</div>
                {% endif %}
            </div>
            <div>
                <h1 style="margin: 0 0 0.25rem 0;">{{ campaign.name }}</h1>
                <div>
                    <a href="{% url 'kick:dashboard' %}">Kick</a> >
                    <a href="{% url 'kick:campaign_list' %}">Campaigns</a> >
                    {{ campaign.name }}
                </div>
                <div>
                    {% if campaign.category %}
                        Category:
                        <a href="{% url 'kick:game_detail' campaign.category.kick_id %}">{{ campaign.category.name }}</a>
                    {% endif %}
                </div>
                <div>
                    {% if campaign.organization %}
                        Organization:
                        <a href="{% url 'kick:organization_detail' campaign.organization.kick_id %}">{{ campaign.organization.name }}</a>
                    {% endif %}
                </div>
                {% if campaign.ends_at %}
                    <div>
                        {% if campaign.ends_at > now %}
                            Ends
                        {% else %}
                            Ended at
                        {% endif %}
                        <time datetime="{{ campaign.ends_at|date:'c' }}"
                              title="{{ campaign.ends_at|date:'DATETIME_FORMAT' }}">{{ campaign.ends_at|date:"M d, Y H:i" }}</time>
                        {% if campaign.ends_at < now %}
                            (ended {{ campaign.ends_at|timesince }} ago)
                        {% else %}
                            (in {{ campaign.ends_at|timeuntil }})
                        {% endif %}
                    </div>
                {% endif %}
                {% if campaign.starts_at %}
                    <div>
                        {% if campaign.starts_at > now %}
                            Starts
                        {% else %}
                            Started at
                        {% endif %}
                        <time datetime="{{ campaign.starts_at|date:'c' }}"
                              title="{{ campaign.starts_at|date:'DATETIME_FORMAT' }}">{{ campaign.starts_at|date:"M d, Y H:i" }}</time>
                        {% if campaign.starts_at < now %}
                            (started {{ campaign.starts_at|timesince }} ago)
                        {% else %}
                            (in {{ campaign.starts_at|timeuntil }})
                        {% endif %}
                    </div>
                {% endif %}
                {% if campaign.duration %}<div>Duration: {{ campaign.duration }}</div>{% endif %}
                <div>
                    Added <time datetime="{{ campaign.added_at|date:'c' }}"
       title="{{ campaign.added_at|date:'DATETIME_FORMAT' }}">{{ campaign.added_at|date:"M d, Y" }}</time>
                    ({{ campaign.added_at|timesince }} ago)
                </div>
                <div>
                    Updated <time datetime="{{ campaign.updated_at|date:'c' }}"
       title="{{ campaign.updated_at|date:'DATETIME_FORMAT' }}">{{ campaign.updated_at|date:"M d, Y" }}</time>
                    ({{ campaign.updated_at|timesince }} ago)
                </div>
                <div>
                    {% if campaign.channels.all %}
                        Participating channels:
                        {% for channel in campaign.channels.all|slice:":5" %}
                            {% if channel.user %}
                                <a href="{{ channel.channel_url }}">{{ channel.user.username }}</a>
                            {% else %}
                                <a href="{{ channel.channel_url }}">{{ channel.name }}</a>
                            {% endif %}
                        {% endfor %}
                        {% if campaign.channels.count > 5 %}and {{ campaign.channels.count|add:"-5" }} more{% endif %}
                    {% endif %}
                </div>
                {% if campaign.created_at %}
                    <p style="margin: 0.25rem 0;">
                        <time datetime="{{ campaign.created_at|date:'c' }}"
                              title="{{ campaign.created_at|date:'DATETIME_FORMAT' }}">
                            Created {{ campaign.created_at|date:"M d, Y H:i" }} ({{ campaign.created_at|timesince }} ago)
                        </time>
                    </p>
                {% endif %}
                {% if campaign.api_updated_at %}
                    <p style="margin: 0.25rem 0;">
                        <time datetime="{{ campaign.api_updated_at|date:'c' }}"
                              title="{{ campaign.api_updated_at|date:'DATETIME_FORMAT' }}">
                            API Updated {{ campaign.api_updated_at|date:"M d, Y H:i" }} ({{ campaign.api_updated_at|timesince }} ago)
                        </time>
                    </p>
                {% endif %}
                <div>
                    <a href="{% url 'kick:game_campaign_feed' campaign.category.kick_id %}"
                       title="RSS feed for {{ campaign.category.name }} campaigns">[rss]</a>
                    <a href="{% url 'kick:game_campaign_feed_atom' campaign.category.kick_id %}"
                       title="Atom feed for {{ campaign.category.name }} campaigns">[atom]</a>
                    <a href="{% url 'kick:game_campaign_feed_discord' campaign.category.kick_id %}"
                       title="Discord feed for {{ campaign.category.name }} campaigns">[discord]</a>
                    <a href="{% url 'core:docs_rss' %}" title="RSS documentation">[explain]</a>
                    {% if campaign.connect_url %}
                        <a href="{{ campaign.connect_url }}"
                           title="Connect URL for {{ campaign.name }}">[connect]</a>
                    {% endif %}
                    {% if campaign.url %}<a href="{{ campaign.url }}" title="About URL for {{ campaign.name }}">[about]</a>{% endif %}
                    {% if campaign.channels.count == 0 %}
                        {% if campaign.rule_name == "Watch to redeem" %}<a href="{{ campaign.category.kick_url }}">[watch]</a>{% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
        <hr />
        <h2>Rewards</h2>
        {% if rewards %}
            {% for reward in rewards %}
                <article>
                    <div style="display: flex; gap: 1rem; align-items: flex-start;">
                        <div style="flex-shrink: 0;">
                            {% if reward.full_image_url %}
                                <img src="{{ reward.full_image_url }}"
                                     alt="{{ reward.name }}"
                                     width="96"
                                     height="96"
                                     loading="lazy"
                                     style="width: 96px;
                                            height: auto;
                                            border-radius: 6px" />
                            {% else %}
                                <div style="width: 96px;
                                            height: 96px;
                                            background-color: #eee;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            border-radius: 6px">No Image</div>
                            {% endif %}
                        </div>
                        <div>
                            <h3 style="margin: 0 0 0.25rem 0;">{{ reward.name }}</h3>
                            {% if reward.required_units %}
                                <p>Watch {{ reward.required_units }} minutes to earn</p>
                            {% else %}
                                <p>No watch-time requirement</p>
                            {% endif %}
                        </div>
                    </div>
                </article>
            {% endfor %}
        {% else %}
            <p>No drops available for this campaign.</p>
        {% endif %}
    </main>
{% endblock content %}