{% extends 'base.html' %}

{% block title %}My Games ~ Game Twacker{% endblock %}

{% block content %}
<div class="page-header">
    <h1>My Pwaying Games</h1>
    <p class="subtitle">Twacking {{ games|length }}/5 games</p>
</div>

{% if games %}
<div class="game-cards">
    {% for game in games %}
    <div class="game-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">
            <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 }}">{{ 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>
            
            <details class="game-details">
                <summary>Update Pwogwess</summary>
                <form action="{{ url_for('main.update_game', game_id=game.id) }}" method="POST" class="update-form">
                    <div class="form-group">
                        <label for="status-{{ game.id }}">Status:</label>
                        <select name="status" id="status-{{ game.id }}">
                            <option value="Playing" {% if game.status == 'Playing' %}selected{% endif %}>Playing</option>
                            <option value="Completed" {% if game.status == 'Completed' %}selected{% endif %}>Completed</option>
                            <option value="On Hold" {% if game.status == 'On Hold' %}selected{% endif %}>On Hold</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="progress-{{ game.id }}">Pwogwess:</label>
                        <input type="range" name="progress" id="progress-{{ game.id }}" min="0" max="100" value="{{ game.progress }}" class="progress-slider">
                        <span class="range-value">{{ game.progress }}%</span>
                    </div>
                    
                    <div class="form-group">
                        <label for="notes-{{ game.id }}">Notes:</label>
                        <textarea name="notes" id="notes-{{ game.id }}" rows="2">{{ game.notes or '' }}</textarea>
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">Update</button>
                        <button type="button" class="btn btn-danger remove-btn" data-toggle="modal" data-target="#remove-modal-{{ game.id }}">
                            Wemove Game
                        </button>
                    </div>
                </form>
            </details>
        </div>
        
        <!-- Remove confirmation modal -->
        <div class="modal" id="remove-modal-{{ game.id }}">
            <div class="modal-content">
                <h3>Wemove Game</h3>
                <p>Awe you suwe you want to wemove <strong>{{ game.name }}</strong> from youw twacking wist?</p>
                <div class="modal-actions">
                    <button class="btn btn-secondary close-modal">Cancew</button>
                    <form action="{{ url_for('main.remove_game', game_id=game.id) }}" method="POST">
                        <button type="submit" class="btn btn-danger">Wemove</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% else %}
<div class="empty-state">
    <div class="empty-icon">
        <i class="fas fa-gamepad"></i>
    </div>
    <h2>No games being twacked yet~ >w<</h2>
    <p>Click the button bewow to seawch and add games to twack!</p>
    <a href="{{ url_for('main.search_games') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> Add Youw Fiwst Game
    </a>
</div>
{% endif %}

{% if games|length < 5 %}
<div class="add-more">
    <a href="{{ url_for('main.search_games') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> Add Anothew Game
    </a>
</div>
{% endif %}

<script>
    // Handle range sliders
    document.addEventListener('DOMContentLoaded', function() {
        const sliders = document.querySelectorAll('.progress-slider');
        sliders.forEach(slider => {
            const valueDisplay = slider.nextElementSibling;
            
            slider.addEventListener('input', function() {
                valueDisplay.textContent = this.value + '%';
            });
        });
        
        // Modal handling
        const modals = document.querySelectorAll('.modal');
        const removeBtns = document.querySelectorAll('.remove-btn');
        const closeBtns = document.querySelectorAll('.close-modal');
        
        removeBtns.forEach((btn, index) => {
            btn.addEventListener('click', function() {
                modals[index].classList.add('active');
            });
        });
        
        closeBtns.forEach((btn, index) => {
            btn.addEventListener('click', function() {
                modals[index].classList.remove('active');
            });
        });
        
        window.addEventListener('click', function(e) {
            modals.forEach(modal => {
                if (e.target === modal) {
                    modal.classList.remove('active');
                }
            });
        });
    });
</script>
{% endblock %}