{% extends "base.html" %}
{% block title %}
    Games
{% endblock title %}
{% block content %}
    <main>
        <header>
            <h1>Games</h1>
            <p>Browse all available games</p>
        </header>
        {% if games_by_org %}
            {% for organization, games in games_by_org.items %}
                <section style="margin-bottom: 3rem;">
                    <h2 style="margin-bottom: 1rem;">{{ organization.name }}</h2>
                    <div style="display: flex; flex-direction: column; gap: 1rem;">
                        {% for item in games %}
                            <article style="display: flex; gap: 1rem; align-items: center;">
                                <div style="flex-shrink: 0;">
                                    {% if item.game.box_art_base_url %}
                                        <img src="{{ item.game.box_art_base_url }}"
                                             alt="Box art for {{ item.game.display_name }}"
                                             width="120"
                                             height="160"
                                             style="border-radius: 8px">
                                    {% else %}
                                        <div style="width: 120px;
                                                    height: 160px;
                                                    border: 1px solid;
                                                    border-radius: 8px;
                                                    display: flex;
                                                    align-items: center;
                                                    justify-content: center;
                                                    font-size: 1rem">
                                            🎮
                                            <br>
                                            No Image
                                        </div>
                                    {% endif %}
                                </div>
                                <div style="flex: 1;">
                                    <h3 style="margin: 0;">
                                        <a href="{% url 'twitch:game_detail' item.game.id %}"
                                           style="text-decoration: none;
                                                  color: inherit">{{ item.game.display_name }}</a>
                                    </h3>
                                </div>
                            </article>
                        {% endfor %}
                    </div>
                </section>
            {% endfor %}
        {% else %}
            <section style="text-align: center; padding: 3rem 1rem;">
                <div style="font-size: 4rem; margin-bottom: 1rem;">🎮</div>
                <h2 style="margin: 0 0 1rem 0;">No Games Found</h2>
                <p style="margin: 0; font-size: 1.1rem;">No games are currently available.</p>
            </section>
        {% endif %}
    </main>
{% endblock content %}