{% extends "base.html" %}
{% load image_tags %}
{% block title %}
    Games - Grid View
{% endblock title %}
{% block extra_head %}
    <link rel="alternate"
          type="application/rss+xml"
          title="Newly added games (RSS)"
          href="{% url 'core:game_feed' %}" />
    <link rel="alternate"
          type="application/atom+xml"
          title="Newly added games (Atom)"
          href="{% url 'core:game_feed_atom' %}" />
    <link rel="alternate"
          type="application/atom+xml"
          title="Newly added games (Discord)"
          href="{% url 'core:game_feed_discord' %}" />
{% endblock extra_head %}
{% block content %}
    <main>
        <header>
            <h1>All Games</h1>
            <!-- Add breadcrumbs -->
            <div>
                <a href="{% url 'twitch:dashboard' %}">Twitch</a> > Games
            </div>
            <div>
                <a href="{% url 'twitch:games_list' %}" title="View games as list">[list]</a>
                <a href="{% url 'core:game_feed' %}" title="RSS feed for all games">[rss]</a>
                <a href="{% url 'core:game_feed_atom' %}"
                   title="Atom feed for all games">[atom]</a>
                <a href="{% url 'core:game_feed_discord' %}"
                   title="Discord feed for all games">[discord]</a>
                <a href="{% url 'core:docs_rss' %}" title="RSS feed documentation">[explain]</a>
                <a href="{% url 'twitch:export_games_csv' %}"
                   title="Export all games as CSV">[csv]</a>
                <a href="{% url 'twitch:export_games_json' %}"
                   title="Export all games as JSON">[json]</a>
            </div>
        </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_best_url %}
                                        {% picture item.game.box_art_best_url alt="Box art for "|add: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.twitch_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 %}