{% extends "base.html" %}
{% load static %}
{% block title %}
    {{ campaign.clean_name }}
{% endblock title %}
{% block content %}
    <h1>
        <a href="{% url 'twitch:game_detail' campaign.game.id %}">{{ campaign.game.display_name }}</a> - {{ campaign.clean_name }}
    </h1>
    <p>
        {# TODO: Link to organization #}
        <a href="#">{{ campaign.owner.name }}</a>
    </p>
    {% if campaign.image_url %}
        <img height="70"
             width="70"
             src="{{ campaign.image_url }}"
             alt="{{ campaign.name }}">
    {% endif %}
    <p>{{ campaign.description }}</p>
    <p>
        Start:
        {{ campaign.start_at }}
    </p>
    <p>
        End:
        {{ campaign.end_at }}
    </p>
    {% if campaign.details_url %}
        {# TODO: Archive this URL automatically #}
        <p>
            <a href="{{ campaign.details_url }}" target="_blank">Official Details</a>
        </p>
    {% endif %}
    {% if campaign.account_link_url %}
        {# TODO: Archive this URL automatically #}
        <p>
            <a href="{{ campaign.account_link_url }}" target="_blank">Connect Account</a>
        </p>
    {% endif %}
    <h5>Campaign Info</h5>
    {% if user.is_staff %}
        <p>
            {% if campaign.is_account_connected %}
                Connected
            {% else %}
                Not Connected
            {% endif %}
        </p>
    {% endif %}
    {% if drops %}
        <table>
            <tr>
                <th>Image</th>
                <th>Name</th>
                <th>Requirements</th>
                <th>Availability</th>
            </tr>
            {% for drop in drops %}
                <tr>
                    <td>
                        {% for benefit in drop.benefits.all %}
                            {% if benefit.image_asset_url %}
                                <img height="120"
                                     width="120"
                                     style="object-fit: cover"
                                     src="{{ benefit.image_asset_url }}"
                                     alt="{{ benefit.name }}">
                            {% else %}
                                <img height="120"
                                     width="120"
                                     style="object-fit: cover"
                                     src="{% static 'images/placeholder.png' %}"
                                     alt="No Image Available">
                            {% endif %}
                        {% endfor %}
                    </td>
                    <td>{{ drop.name }}</td>
                    <td>
                        {{ drop.required_minutes_watched }} minutes watched
                        {% if drop.required_subs > 0 %}and {{ drop.required_subs }} subscriptions required{% endif %}
                    </td>
                    <td>{{ drop.start_at }} - {{ drop.end_at }}</td>
                </tr>
            {% endfor %}
            {% if not drops %}
                <tr>
                    <td colspan="6">No drops found for this campaign.</td>
                </tr>
            {% endif %}
        </table>
    {% else %}
        <p>No drops available for this campaign.</p>
    {% endif %}
{% endblock content %}