<!DOCTYPE html>
<html lang="{{ app.request.locale|default(app.request.defaultLocale|default('en')) }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ 'game.title'|trans({'%site%': ('site.name'|trans)}) }}</title>

{# Include Game1-specific CSS in addition to the base app assets #}
    {% block stylesheets %}
        {{ encore_entry_link_tags('app') }}
        {{ encore_entry_link_tags('game1') }}
    {% endblock %}
</head>
<body>
    <div id="game-container">
        <div id="mercure-config"
             data-mercure-public-url="{{ mercure_public_url|e('html_attr') }}"
             data-topic="{{ (mercure_topic_base ~ '/game/hub-' ~ session.id)|e('html_attr') }}"
             data-api-ping-url="{{ path('game_api_ping')|e('html_attr') }}"
             data-api-echo-url="{{ path('game_api_message')|e('html_attr') }}"
             data-api-check-finished-url="{{ path('game_api_check_finished', {session: session.id})|e('html_attr') }}"
             data-lost-url="{{ path('game_lost', {session: session.id})|e('html_attr') }}"
             data-screen="{{ screen|e('html_attr') }}"
             style="display:none">
        </div>

        <div id="game-timer" data-end-time="{{ session.timer }}">
            --:--:--
        </div>
        <div id="message-container">

        </div>
        <audio id="message-sound" style="display:none">
            <source src="{{ asset('audio/message.mp3') }}" type="audio/mpeg">
        </audio>
        <div id="input">
            <input type="text" disabled id="input-message">
        </div>
    </div>
</body>

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