{% extends 'base.html.twig' %}

{% block title %}{{ 'game.title'|trans({'%site%': ('site.name'|trans)}) }}{% endblock %}

{# Include Game1-specific CSS in addition to the base app assets #}
{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('game1') }}
{% endblock %}

{% block body %}
<h1>{{ 'game.h1'|trans }}</h1>
<p>{{ 'game.description'|trans }}</p>
<div class="game1-banner">Game 1 assets are active. Enjoy the challenge!</div>

{# Hidden config element read by assets/game1.js #}
<div id="mercure-config"
     data-mercure-public-url="{{ mercure_public_url|e('html_attr') }}"
     data-topic="{{ (mercure_topic_base ~ '/game/hub')|e('html_attr') }}"
     data-api-ping-url="{{ path('game_api_ping')|e('html_attr') }}"
     data-api-echo-url="{{ path('game_api_echo')|e('html_attr') }}"
     style="display:none">
</div>

<p><a href="{{ path('website_home') }}">{{ 'link.back_to_website'|trans }}</a></p>
{% endblock %}

{# Include Game1-specific JS in addition to the base app assets #}
{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('game1') }}
{% endblock %}
