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

{% block title %} - Play!{% endblock %}

{% block body %}
    <a class="back-from-game" href="{{ path('MineSeekerBundle_homepage') }}">
        <img src="{{ asset('/images/mine-logo-txt.png') }}" alt="Mineseeker Logo">
    </a>
    <div class="mine-container">
        <div id="mine-wrapper"
             data-env="{{ env }}"
             data-game-id="{{ app.request.get('gameAssoc') }}"
             data-mercure-hub-url="{{ mercure_hub_url }}"
             data-mercure-subscriber-jwt="{{ mercure_subscriber_jwt }}">
        </div>
    </div>
{% endblock %}

{% block metas %}
    <meta property="og:url" content="{{ url('MineSeekerBundle_gamePlay') }}"/>
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="Your friend challenges YOU!"/>
    <meta property="og:description" content="Do you accept the challenge?"/>
    <meta property="og:image"
          content="{{ app.request.getSchemeAndHttpHost() }}{{ asset('/images/mine-1600x627.png') }}"/>
{% endblock %}

{% block stylesheets %}
    {{ encore_entry_link_tags('mineseekerStyle') }}

    <style>
        .mine-container {
            background: url('/images/bg-mineseeker-{{ random(1) }}-outbg.jpg') no-repeat;
        }
    </style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('mineseeker') }}
{% endblock %}