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

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('styles/hotel/first_level/escape_room.scss') }}">
    <link rel="stylesheet" href="{{ asset('styles/hotel/modal.scss') }}">
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ importmap('escape_room') }}
    {{ importmap('modal') }}
{% endblock %}

{% block navbar_title %}{{ 'hotel.escape_room.title'|trans }}{% endblock %}

{% block navbar_backdoor %}
    <a href="{{ path('hotel_office') }}" class="nav-back">{{ 'hotel.escape_room.goback'|trans }}</a>
{% endblock %}

{% block content %}
    {#
        TODO

        ok- layout
        ok- anim terre
        ok- js avec mini modale pour taille de la terre
            - et journal
        - texte et dessin journal
        - placer porte vers piscine

        - responsive
    #}
    <div class="hotel-escape_room">
        <div class="floor-room-grid">
            <div class="room-content">
                <img src="{{ asset('images/hotel/floor1/escape_room/earth.gif') }}" class="earth" alt="">
                <div class="earth-control" style="display: none;">
                    <div class="control-arrow"></div>
                    <div>{{ 'hotel.escape_room.earth_size'|trans }}</div>
                    <div><input type="range" id="earth-size-range" name="earth-size-range" min="0" max="100" value="0"></div>
                </div>
                <div class="journal-block" style="display: none;">
                    <img src="{{ asset('images/hotel/JOURNAL.png') }}" alt="" data-modal="journal-modal"
                         data-modal-content-id="journal-modal-content">
                </div>
                <div class="door-block" style="display: none;">
                    <a href="{{ path('hotel_courtyard') }}">
                        <img src="{{ asset('images/hotel/floor1/escape_room/extdoor.png') }}" alt="" >
                    </a>
                </div>
            </div>
            <div class="floor">
                <img src="{{ asset('images/hotel/floor1/escape_room/beach-chair.png') }}" class="beach-chair" alt="">
            </div>
        </div>
    </div>
{% endblock %}

{% block modal %}
    <div id="journal-modal-content" style="display: none;">
        <div class="modal-title">{{ 'hotel.escape_room.journal_title'|trans }}</div>
        <div>
            <img src="{{ asset('images/hotel/floor1/escape_room/sam.jpg') }}" class="journal-character" alt="Sam">
            {{ 'hotel.escape_room.journal_text'|trans|raw }}
        </div>
    </div>
{% endblock %}