{% extends "base.html" %}
{% block title %}
    {{ channel.display_name }} - Channel Details
{% endblock title %}
{% block content %}
    <!-- Channel Title -->
    <h1>{{ channel.display_name }}</h1>
    <!-- Add breadcrumbs -->
    <div>
        <a href="{% url 'twitch:dashboard' %}">Twitch</a> > <a href="{% url 'twitch:channel_list' %}">Channels</a> > {{ channel.display_name }}
    </div>
    {% if channel.display_name != channel.name %}
        <div>
            Username: <code>{{ channel.name }}</code>
        </div>
    {% endif %}
    <!-- Channel Info -->
    <div>Channel ID: {{ channel.twitch_id }}</div>
    <div>
        Published
        <time datetime="{{ channel.added_at|date:'c' }}"
              title="{{ channel.added_at|date:'DATETIME_FORMAT' }}">{{ channel.added_at|date:"M d, Y H:i" }}</time> ({{ channel.added_at|timesince }} ago)
    </div>
    <div>
        Last updated
        <time datetime="{{ channel.updated_at|date:'c' }}"
              title="{{ channel.updated_at|date:'DATETIME_FORMAT' }}">{{ channel.updated_at|date:"M d, Y H:i" }}</time> ({{ channel.updated_at|timesince }} ago)
    </div>
    <!-- Twitch Stream Embed -->
    <iframe src="https://player.twitch.tv/?channel={{ channel.name }}&parent={{ request.get_host }}&muted=false"
            height="480"
            width="100%"
            allowfullscreen
            style="max-width: 854px;
                   border: none;
                   margin-top: 16px;
                   margin-bottom: 16px">
    </iframe>
    {% if active_campaigns %}
        <h5>Active Campaigns</h5>
        <table>
            <tbody>
                {% for campaign in active_campaigns %}
                    <tr>
                        <td>
                            <a href="{% url 'twitch:campaign_detail' campaign.twitch_id %}">{{ campaign.clean_name }}</a>
                            {% if campaign.time_based_drops.all %}
                                <!-- If the campaign has time-based drops, show the benefits in a nested div -->
                                <div>
                                    {% for benefit in campaign.sorted_benefits %}
                                        <span title="{{ benefit.name }}">
                                            {% if benefit.image_best_url or benefit.image_asset_url %}
                                                <!-- Show the benefit image if available -->
                                                <img src="{{ benefit.image_best_url|default:benefit.image_asset_url }}"
                                                     alt="{{ benefit.name }}"
                                                     width="24"
                                                     height="24"
                                                     style="display: inline-block;
                                                            margin-right: 4px;
                                                            vertical-align: middle" />
                                            {% endif %}
                                            {{ benefit.name }}
                                        </span>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </td>
                        <td>
                            {% if campaign.game %}
                                <!-- If the campaign has an associated game, show the game name with a link to the game detail page -->
                                <a href="{% url 'twitch:game_detail' campaign.game.twitch_id %}">
                                    {{ campaign.game.display_name|default:campaign.game.name }}
                                </a>
                            {% else %}
                                Unknown Game
                            {% endif %}
                        </td>
                        <td>
                            <span title="Ends on {{ campaign.end_at|date:'M d, Y H:i' }}">Ends in {{ campaign.end_at|timeuntil }}</span>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}
    {% if upcoming_campaigns %}
        <!-- If there are upcoming campaigns, show them in a separate section -->
        <h5>Upcoming Campaigns</h5>
        <table>
            <tbody>
                {% for campaign in upcoming_campaigns %}
                    <tr>
                        <td>
                            <a href="{% url 'twitch:campaign_detail' campaign.twitch_id %}">{{ campaign.clean_name }}</a>
                            {% if campaign.time_based_drops.all %}
                                <!-- If the campaign has time-based drops, show the benefits in a nested div -->
                                <div>
                                    {% for benefit in campaign.sorted_benefits %}
                                        <span title="{{ benefit.name }}">
                                            {% if benefit.image_best_url or benefit.image_asset_url %}
                                                <!-- Show the benefit image if available -->
                                                <img src="{{ benefit.image_best_url|default:benefit.image_asset_url }}"
                                                     alt="{{ benefit.name }}"
                                                     width="24"
                                                     height="24"
                                                     style="display: inline-block;
                                                            margin-right: 4px;
                                                            vertical-align: middle" />
                                            {% endif %}
                                            {{ benefit.name }}
                                        </span>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </td>
                        <td>
                            {% if campaign.game %}
                                <!-- If the campaign has an associated game, show the game name with a link to the game detail page -->
                                <a href="{% url 'twitch:game_detail' campaign.game.twitch_id %}">
                                    {{ campaign.game.display_name|default:campaign.game.name }}
                                </a>
                            {% else %}
                                Unknown Game
                            {% endif %}
                        </td>
                        <td>
                            <span title="Starts on {{ campaign.start_at|date:'M d, Y H:i' }}">Starts in {{ campaign.start_at|timeuntil }}</span>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}
    {% if expired_campaigns %}
        <!-- If there are expired campaigns, show them in a separate section -->
        <h5>Past Campaigns</h5>
        <table>
            <tbody>
                {% for campaign in expired_campaigns %}
                    <tr>
                        <td>
                            <a href="{% url 'twitch:campaign_detail' campaign.twitch_id %}">{{ campaign.clean_name }}</a>
                            {% if campaign.time_based_drops.all %}
                                <!-- If the campaign has time-based drops, show the benefits in a nested div -->
                                <div>
                                    {% for benefit in campaign.sorted_benefits %}
                                        <span title="{{ benefit.name }}">
                                            {% if benefit.image_best_url or benefit.image_asset_url %}
                                                <img src="{{ benefit.image_best_url|default:benefit.image_asset_url }}"
                                                     alt="{{ benefit.name }}"
                                                     width="24"
                                                     height="24"
                                                     style="display: inline-block;
                                                            margin-right: 4px;
                                                            vertical-align: middle" />
                                            {% endif %}
                                            {{ benefit.name }}
                                        </span>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </td>
                        <td>
                            {% if campaign.game %}
                                <!-- If the campaign has an associated game, show the game name with a link to the game detail page -->
                                <a href="{% url 'twitch:game_detail' campaign.game.twitch_id %}">
                                    {{ campaign.game.display_name|default:campaign.game.name }}
                                </a>
                            {% else %}
                                Unknown Game
                            {% endif %}
                        </td>
                        <td>
                            <span title="Ended on {{ campaign.end_at|date:'M d, Y H:i' }}">{{ campaign.end_at|timesince }} ago</span>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}
    {% if not active_campaigns and not upcoming_campaigns and not expired_campaigns %}
        <p>No campaigns found for this channel.</p>
    {% endif %}
{% endblock content %}