{% extends "base.html" %}

{% block content %}
    <div class="container">
        <h2>{{ game.name }}</h2>
        <img src="{{ game.box_art_url }}"
             alt="{{ game.name }} box art"
             height="283"
             width="212" />
        <h3>Game Details</h3>
        <table class="table table-hover table-sm table-striped" cellspacing="0">
            <tr>
                <td>
                    <strong>Twitch ID:</strong>
                </td>
                <td>{{ game.pk }}</td>
            </tr>
            <tr>
                <td>
                    <strong>Game URL:</strong>
                </td>
                <td>
                    <a href="{{ game.game_url }}" target="_blank">{{ game.game_url }}</a>
                </td>
            </tr>
            <tr>
                <td>
                    <strong>Game name:</strong>
                </td>
                <td>{{ game.name }}</td>
            </tr>
            <tr>
                <td>
                    <strong>Game box art URL:</strong>
                </td>
                <td>
                    <a href="{{ game.box_art_url }}" target="_blank">{{ game.box_art_url }}</a>
                </td>
            </tr>
        </table>
        <h3>Organization</h3>
        <table class="table table-hover table-sm table-striped" cellspacing="0">
            <tr>
                {% if game.org %}
                    <td>
                        <a href="#">{{ game.org.name }} -
                            <span class="text-muted">{{ game.org.pk }}</span></a>
                    </td>
                {% else %}
                    <td>No organization associated with this game.</td>
                {% endif %}
            </tr>
        </table>
        <h3>Drop Campaigns</h3>
        {% if game.drop_campaigns.all %}
            {% for drop_campaign in game.drop_campaigns.all %}
                <br />
                <h2>{{ drop_campaign.name }}</h2>
                <table class="table table-hover table-sm table-striped" cellspacing="0">
                    <tr>
                        <td>
                            <strong>Campaign Name:</strong>
                        </td>
                        <td>{{ drop_campaign.name }}</td>
                    </tr>
                    <tr>
                        <td>
                            <img src="{{ drop_campaign.image_url }}"
                                 alt="{{ drop_campaign.name }} image" />
                        </td>
                        <td>
                            <p>
                                <strong>Created at:</strong>
                                {{ drop_campaign.created_at }}
                            </p>
                            <p>
                                <strong>Modified at:</strong>
                                {{ drop_campaign.modified_at }}
                            </p>
                            <p>
                                <strong>Status:</strong>
                                {{ drop_campaign.status }}
                            </p>
                            <p>
                                <strong>Description:</strong>
                                {{ drop_campaign.description }}
                            </p>
                            <p>
                                <strong>Starts at:</strong>
                                {{ drop_campaign.starts_at }}
                            </p>
                            <p>
                                <strong>Ends at:</strong>
                                {{ drop_campaign.ends_at }}
                            </p>
                            <p>
                                <strong>More details:</strong>
                                <a href="{{ drop_campaign.details_url }}" target="_blank">{{ drop_campaign.details_url }}</a>
                            </p>
                            <p>
                                <strong>Account Link:</strong>
                                <a href="{{ drop_campaign.account_link_url }}" target="_blank">{{ drop_campaign.account_link_url }}</a>
                            </p>
                        </td>
                    </tr>
                </table>
                {% if drop_campaign.drops.all %}
                    <table class="table table-hover table-sm table-striped" cellspacing="0">
                        <tr>
                            <th>ID</th>
                            <th>Item Name</th>
                            <th>Minutes</th>
                            <th>Image</th>
                            <th>Benefit Name</th>
                        </tr>
                        {% for item in drop_campaign.drops.all %}
                            <tr>
                                <td>{{ item.pk }}</td>
                                <td>{{ item.name }}</td>
                                <td>{{ item.required_minutes_watched }}</td>
                                {% for benefit in item.benefits.all %}
                                    <td>
                                        <img src="{{ benefit.image_url }}"
                                             alt="{{ benefit.name }} reward image"
                                             height="50"
                                             width="50" />
                                    </td>
                                    <td>{{ benefit.name }}</td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                    </table>
                {% else %}
                    <p>No items associated with this drop campaign.</p>
                {% endif %}
            {% endfor %}
        {% else %}
            <p>No drop campaigns associated with this game.</p>
        {% endif %}
    </div>
{% endblock content %}