{% extends "base.html" %}
{% block background %}{{ url_for('static', filename='images/3.jpg') }}{% endblock %}
{% block content %}
    <header>
        <p>Welcome to the</p>
        <h1>DV8 Game Expo <span>2023</span>!</h1>
        <i class="ph-bold ph-caret-double-down"></i>
    </header>

    <section id="What_is_this?">
        <h2>What is this?</h2>
        <p>The DV8 Game Expo, is a showcase of the works and efforts of students from the past year. This includes Level 3 year 1 and year 2.</p>
    </section>

    <section id="Student_Games">
        <h2>Student Games</h2>
        <p>Here are some games AAAA</p>

        <div class="games">
            {% for game in games %}
                <div class="game-box">
                    {% if game.thumbnail %}
                        <img src="{{ url_for('static', filename='thumbnails/' + game.thumbnail) }}" alt="game image">
                    {% else %}
                        <img src="{{ url_for('static', filename='thumbnails/default.jpg') }}" alt="game image">
                    {% endif %}

                    <h2>{{ game.name }}</h2>
                    <p>{{ game.description|truncate(100) }}</p>

                    <div class="options">
                        <a href="{{ url_for('website.g', game_id=game.id) }}" style="width: 100%">View</a>
                        {% if game.downloadLink %}<a href="{{ game.downloadLink }}" style="background-color: rgb(var(--secondary-button)); width: 2.5rem"><i class="ph ph-download"></i></a>{% endif %}
                        <a href="#" style="background-color: rgb(var(--secondary-button)); width: 2.5rem"><i class="ph ph-warning"></i></a>
                    </div>
                </div>
            {% endfor %}
        </div>
    </section>
{% endblock %}