{% extends 'base.html' %}

{% block title %}What am I playing? ~ Game Tracker{% endblock %}

{% block content %}
<div class="page-header">
    <h1>What am I playing?</h1>
    <p class="subtitle">Tracking {{ games|length }}/5 games</p>
</div>

{% if games %}
<div class="game-list">
    {% for game in games %}
    <div class="game-card horizontal">
        <div class="game-cover-side">
            {% if game.cover_url %}
            <img src="{{ game.cover_url }}" alt="{{ game.name }} cover">
            {% else %}
            <div class="no-cover-medium">
                <i class="fas fa-gamepad"></i>
            </div>
            {% endif %}
        </div>
        <div class="game-info">
            <h2>{{ game.name }}</h2>
            
            <div class="game-meta">
                {% if game.developer %}
                <span><i class="fas fa-code"></i> {{ game.developer }}</span>
                {% endif %}
                {% if game.platform %}
                <span><i class="fas fa-desktop"></i> {{ game.platform }}</span>
                {% endif %}
            </div>
            
            <div class="progress-container">
                <div class="progress-label">
                    <span class="status-badge status-{{ game.status|lower|replace(' ', '-') }}">{{ game.status }}</span>
                    <span class="progress-value">{{ game.progress }}%</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: {{ game.progress }}%;"></div>
                </div>
            </div>
            
            {% if game.notes %}
            <div class="game-notes">
                <p><strong>Notes:</strong> {{ game.notes }}</p>
            </div>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>

{% else %}
<div class="empty-state">
    <div class="empty-icon">
        <i class="fas fa-gamepad"></i>
    </div>
    <h2>No games being tracked yet</h2>
    <p>Ask an administrator to add games to your tracking list</p>
</div>
{% endif %}



<!-- No scripts needed for read-only view -->
{% endblock %}