{% extends "base.html" %}
{% block title %}
    Games - Grid View
{% endblock title %}
{% block content %}
    <main>
        <header>
            <h1>All Games</h1>
            <p>Browse all available games</p>
            <p>
                <a href="{% url 'twitch:game_list_simple' %}">List View</a>
            </p>
        </header>
        {% if games_by_org %}
            <section>
                <div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
                    {% for organization, games in games_by_org.items %}
                        {% for item in games %}
                            <article style="padding: 0.25rem;
                                            border-radius: 8px;
                                            flex: 1 1 160px;
                                            text-align: center">
                                <div style="margin-bottom: 0.25rem;">
                                    {% if item.game.box_art_base_url %}
                                        <img src="{{ item.game.box_art_base_url }}"
                                             alt="Box art for {{ item.game.display_name }}"
                                             width="180"
                                             height="240"
                                             style="border-radius: 8px">
                                    {% else %}
                                        <div style="width: 180px;
                                                    height: 240px;
                                                    border: 1px solid;
                                                    border-radius: 8px;
                                                    display: flex;
                                                    align-items: center;
                                                    justify-content: center;
                                                    font-size: 0.8rem;
                                                    margin: 0 auto">
                                            🎮
                                            <br>
                                            No Image
                                        </div>
                                    {% endif %}
                                </div>
                                <h4 style="margin: 0;">
                                    <a href="{% url 'twitch:game_detail' item.game.id %}"
                                       style="text-decoration: none;
                                              color: inherit">{{ item.game.display_name }}</a>
                                </h4>
                            </article>
                        {% endfor %}
                    {% endfor %}
                </div>
            </section>
        {% 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 %}