{% 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-opponent-name="{{ opponent_name }}"
             data-is-authenticated="{{ app.user ? '1' : '0' }}"
             data-mercure-hub-url="{{ mercure_hub_url }}"
             data-mercure-subscriber-jwt="{{ mercure_subscriber_jwt }}"
             data-recaptcha-site-key="{{ recaptcha_site_key }}">
        </div>
    </div>
{% endblock %}

{% block metas %}
    <meta property="og:url" content="{{ url('MineSeekerBundle_gamePlay') | replace({'http://': 'https://'}) }}"/>
    <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="https://{{ app.request.host }}{{ asset('/images/mine-1600x627.png') }}"/>
{% endblock %}

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

{% block javascripts %}
    {{ parent() }}
    <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}" async defer></script>
    {{ vite_entry_script_tags('mineseeker', { dependency: 'react' }) }}
{% endblock %}
