{% extends "base.html" %}
{% load static %}
{% load image_tags %}
{% block title %}
    {{ campaign.title }}
{% endblock title %}
{% block extra_head %}
    <link rel="alternate"
          type="application/rss+xml"
          title="All chzzk campaigns (RSS)"
          href="{% url 'chzzk:campaign_feed' %}" />
    <link rel="alternate"
          type="application/atom+xml"
          title="All chzzk campaigns (Atom)"
          href="{% url 'chzzk:campaign_feed_atom' %}" />
    <link rel="alternate"
          type="application/atom+xml"
          title="All chzzk campaigns (Discord)"
          href="{% url 'chzzk:campaign_feed_discord' %}" />
{% endblock extra_head %}
{% block content %}
    <div style="display: flex; align-items: flex-start;">
        <!-- Campaign image -->
        <div style="margin-right: 16px;">
            {% if campaign.image_url %}
                <img src="{{ campaign.image_url }}"
                     alt="{{ campaign.title }}"
                     width="160"
                     height="auto" />
            {% endif %}
        </div>
        <!-- Campaign Title -->
        <div style="display: flex; flex-direction: column;">
            <h1 style="margin-top: 0; margin-bottom: 0px;">{{ campaign.title }}</h1>
            <!-- Add breadcrumbs -->
            <div>
                <a href="{% url 'chzzk:dashboard' %}">chzzk</a> > <a href="{% url 'chzzk:campaign_list' %}">Campaigns</a> > {{ campaign.title }}
            </div>
            <!-- Campaign description -->
            <p>{{ campaign.description|linebreaksbr }}</p>
            <div>
                Published
                {% if campaign.scraped_at %}
                    <time datetime="{{ campaign.scraped_at|date:'c' }}"
                          title="{{ campaign.scraped_at|date:'DATETIME_FORMAT' }}">{{ campaign.scraped_at|date:"M d, Y H:i" }}</time> ({{ campaign.scraped_at|timesince }} ago)
                {% elif campaign.start_date %}
                    <time datetime="{{ campaign.start_date|date:'c' }}"
                          title="{{ campaign.start_date|date:'DATETIME_FORMAT' }}">{{ campaign.start_date|date:"M d, Y H:i" }}</time> ({{ campaign.start_date|timesince }} ago)
                {% else %}
                    unknown
                {% endif %}
            </div>
            <div>
                Last updated
                {% if campaign.scraped_at %}
                    <time datetime="{{ campaign.scraped_at|date:'c' }}"
                          title="{{ campaign.scraped_at|date:'DATETIME_FORMAT' }}">{{ campaign.scraped_at|date:"M d, Y H:i" }}</time> ({{ campaign.scraped_at|timesince }} ago)
                {% elif campaign.updated_at %}
                    <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)
                {% else %}
                    unknown
                {% endif %}
            </div>
            <!-- Campaign end times -->
            <div>
                {% if campaign.end_date %}
                    {% if campaign.end_date < now %}
                        Ended
                        <time datetime="{{ campaign.end_date|date:'c' }}"
                              title="{{ campaign.end_date|date:'DATETIME_FORMAT' }}">{{ campaign.end_date|date:"M d, Y H:i" }}</time> ({{ campaign.end_date|timesince }} ago)
                    {% else %}
                        Ends in
                        <time datetime="{{ campaign.end_date|date:'c' }}"
                              title="{{ campaign.end_date|date:'DATETIME_FORMAT' }}">{{ campaign.end_date|date:"M d, Y H:i" }}</time> (in {{ campaign.end_date|timeuntil }})
                    {% endif %}
                {% else %}
                    Ends unknown
                {% endif %}
            </div>
            <!-- Campaign start times -->
            <div>
                {% if campaign.start_date %}
                    {% if campaign.start_date > now %}
                        Starts in
                        <time datetime="{{ campaign.start_date|date:'c' }}"
                              title="{{ campaign.start_date|date:'DATETIME_FORMAT' }}">{{ campaign.start_date|date:"M d, Y H:i" }}</time> (in {{ campaign.start_date|timeuntil }})
                    {% else %}
                        Started
                        <time datetime="{{ campaign.start_date|date:'c' }}"
                              title="{{ campaign.start_date|date:'DATETIME_FORMAT' }}">{{ campaign.start_date|date:"M d, Y H:i" }}</time> ({{ campaign.start_date|timesince }} ago)
                    {% endif %}
                {% else %}
                    Starts unknown
                {% endif %}
            </div>
            <!-- Campaign duration -->
            <div>
                Duration is
                {% if campaign.start_date and campaign.end_date %}
                    <time datetime="P{{ campaign.end_date|date:'Y' }}-{{ campaign.end_date|date:'m' }}-{{ campaign.end_date|date:'d' }}T{{ campaign.end_date|date:'H' }}:00:00"
                          title="{{ campaign.start_date|date:'DATETIME_FORMAT' }} to {{ campaign.end_date|date:'DATETIME_FORMAT' }}">{{ campaign.end_date|timeuntil:campaign.start_date }}</time>
                {% else %}
                    unknown
                {% endif %}
            </div>
            <!-- Buttons -->
            <div>
                {% if campaign.pc_link_url %}<a href="{{ campaign.pc_link_url }}" target="_blank">[details]</a>{% endif %}
                {% if campaign.account_link_url %}<a href="{{ campaign.account_link_url }}" target="_blank">[connect]</a>{% endif %}
            </div>
        </div>
    </div>
    <h5>Campaign Info</h5>
    {% if rewards %}
        <table style="border-collapse: collapse; width: 100%;">
            <thead>
                <tr>
                    <th style="text-align: left; padding: 4px;">Image</th>
                    <th style="text-align: left; padding: 4px;">Reward</th>
                    <th style="text-align: left; padding: 4px;">Type</th>
                    <th style="text-align: left; padding: 4px;">Condition</th>
                    <th style="text-align: left; padding: 4px;">iOS Reward</th>
                    <th style="text-align: left; padding: 4px;">Codes Left</th>
                </tr>
            </thead>
            <tbody>
                {% for reward in rewards %}
                    <tr>
                        <td style="vertical-align: top; padding: 4px;">
                            {% if reward.image_url %}
                                <img src="{{ reward.image_url }}"
                                     alt="{{ reward.title }}"
                                     width="160"
                                     height="auto"
                                     style="object-fit: cover;
                                            margin-right: 3px" />
                            {% endif %}
                        </td>
                        <td style="vertical-align: top; padding: 4px;">
                            {{ reward.title }}
                            {% if reward.condition_for_minutes %}
                                <div style="font-size: 0.9em; color: #a9a9a9;">{{ reward.condition_for_minutes }} minutes watched</div>
                            {% endif %}
                        </td>
                        <td style="vertical-align: top; padding: 4px;">{{ reward.reward_type }}</td>
                        <td style="vertical-align: top; padding: 4px;">{{ reward.condition_type }}</td>
                        <td style="vertical-align: top; padding: 4px;">{{ reward.ios_based_reward|yesno:"Yes,No" }}</td>
                        {% if reward.reward_type == "CODE_FIRST_COME" %}
                            <td style="vertical-align: top; padding: 4px;">{{ reward.code_remaining_count }}</td>
                        {% else %}
                            <td style="vertical-align: top; padding: 4px;">Unlimited</td>
                        {% endif %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p>No rewards available for this campaign.</p>
    {% endif %}
{% endblock content %}