{% extends "base.html" %}
{% block content %}
    {% for organization, org_data in orgs_data.items %}
        <div class="container mt-4">
            {% for game, game_data in org_data.games.items %}
                <div class="card mb-4">
                    <div class="row g-0">
                        <div class="col-md-2">
                            <img src="{{ game.image_url }}"
                                 alt="{{ game.display_name }}"
                                 class="img-fluid rounded-start"
                                 height="100"
                                 width="100"
                                 loading="lazy">
                        </div>
                        <div class="col-md-4">
                            <div class="card-body">
                                <h2 class="card-title h5">
                                    <a href="https://www.twitch.tv/directory/category/{{ game.slug }}"
                                       class="text-decoration-none">{{ game.display_name }}</a>
                                </h2>
                            </div>
                        </div>
                        <div class="col-md-6">
                            {% if discord_settings %}
                                <div class="card-body">
                                    <form action='{% url "core:subscription_create" %}'
                                          method="post"
                                          class="mb-2">
                                        {% csrf_token %}
                                        <input type="hidden" name="game_id" value="{{ game.id }}">
                                        <select name="discord_webhook" class="form-select">
                                            {% for discord_setting in discord_settings %}
                                                <option value="{{ discord_setting.id }}">{{ discord_setting.name }}</option>
                                            {% endfor %}
                                        </select>
                                        <div>
                                            <a href="#" class="card-link mt-2">Notify when new drop are found</a>
                                        </div>
                                        <div>
                                            <a href="#" class="card-link mt-2">Notify when the drop is live</a>
                                        </div>
                                    </form>
                                </div>
                            {% else %}
                                <div class="card-body text-end">
                                    <a href="{% url 'core:add_discord_webhook' %}" class="card-link">Add Discord settings</a>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    <ul class="list-group list-group-flush">
                        {% for drop_benefit in game_data.drop_benefits %}
                            <li class="list-group-item d-flex align-items-center">
                                <img src="{{ drop_benefit.image_asset_url }}"
                                     alt="{{ drop_benefit.name }}"
                                     class="img-fluid rounded me-3"
                                     height="50"
                                     width="50"
                                     loading="lazy">
                                <a href="{{ drop_benefit.details_url }}" class="text-decoration-none">{{ drop_benefit.name }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            {% endfor %}
        </div>
    {% endfor %}
{% endblock content %}