{% layout 'layouts/html.liquid' %}

{% block head %}
<title>{{ game.title }}</title>
<script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
<style>
    .game { margin-bottom: 20px; }
    .game-box { display: flex; justify-content: center;}
    .game-info {
        display: flex;
        justify-content: space-between;
        align-items:center;
        padding: 20px;
        border: 1px solid gray;
        border-radius: 10px;
    }
    .game-icon { width:50px; }
    .icon-wrapper { padding: 40px; }

</style>
{% if game.styles %}
{% for style in game.styles %}
<link rel="stylesheet" href="{{ style }}"/>
{% endfor %}
{% endif %}
{% endblock %}

{% block content %}
    <div class="game">
        <div class="game-box">
            <div id="game-goes-here"></div>
        </div>
        <div class="game-info">
            <div>
                <h1 class="game-title">{{ game.title }}</h1>
                <p class="game-desc">{{ game.description }}</p>
                <p class="game-maker">by {{ game.maker }}</p>
            </div>
            <div class="icon-wrapper">
                <img src="{{ game.image }}" alt="{{ game.imageAlt }}" class="game-icon"/>
            </div>
        </div>
    </div>
    <a href="/games">More Games</a>
    {% for src in game.jsSrc %}
    <script src="{{ src }}"></script>
    {% endfor %}
{% endblock %}