{% extends 'base.html' %}

{% block title %}Add New Game ~ Game Twacker{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Seawch fow Games</h1>
    <p class="subtitle">Find and add games to youw twacking wist</p>
</div>

<div class="search-container">
    <form action="{{ url_for('main.search_games') }}" method="POST" class="search-form">
        <div class="search-input">
            <input type="text" name="query" placeholder="Entew game name..." value="{{ query }}" required>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-search"></i> Seawch
            </button>
        </div>
    </form>
</div>

{% if results %}
<div class="results-info">
    <h2>Seawch Wesuwts</h2>
    <p>Found {{ results|length }} games matching "{{ query }}"</p>
</div>

<div class="search-results">
    {% for game in results %}
    <div class="search-result-card">
        <div class="game-cover">
            {% if game.cover_url %}
            <img src="{{ game.cover_url }}" alt="{{ game.name }} cover">
            {% else %}
            <div class="no-cover">
                <i class="fas fa-gamepad"></i>
            </div>
            {% endif %}
        </div>
        <div class="game-info">
            <h3>{{ game.name }}</h3>
            
            <div class="game-meta">
                {% if game.release_date %}
                <span><i class="fas fa-calendar-alt"></i> {{ game.release_date }}</span>
                {% endif %}
                
                {% if game.platforms %}
                <span><i class="fas fa-desktop"></i> 
                    {% if game.platforms|length > 2 %}
                        {{ game.platforms[0] }} + {{ game.platforms|length - 1 }} more
                    {% else %}
                        {{ game.platforms|join(', ') }}
                    {% endif %}
                </span>
                {% endif %}
                
                {% if game.developer %}
                <span><i class="fas fa-code"></i> {{ game.developer }}</span>
                {% endif %}
            </div>
            
            {% if game.description %}
            <div class="game-description">
                <p>{{ game.description|truncate(150) }}</p>
            </div>
            {% endif %}
            
            <div class="search-actions">
                <form action="{{ url_for('main.add_game', igdb_id=game.id) }}" method="POST">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Add to My Games
                    </button>
                </form>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% elif query %}
<div class="empty-search">
    <div class="empty-icon">
        <i class="fas fa-search"></i>
    </div>
    <h2>No games found~ (◕︵◕)</h2>
    <p>We couldn't find any games matching "{{ query }}"</p>
    <p>Twy a diffewent seawch tewm!</p>
</div>
{% endif %}

{% endblock %}