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

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

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

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

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

{% block content %}
    {#
        TODO

        ok- changer le sol : sol typique d'intérieur d'hotel avec fauteuils etc
        plus ou moins ok- écrire le texte du journal (henry)
        ok- élément animé flotant des les airs (quoi ? quel sens ?)
            - doit être lié au texte (écrire avant ?) sur Henry
            - idée rapide : un gif rond (balon), qui part dans une direction aléatoire et rebondi au clic
        ok- placer le journal quelque part
            - où ? le placement un peu comme ça "posé" n'importe où je suis pas trop fan en fait...
            -> le faire apparaitre seulement une fois qu'on a intéragit avec l'animation ?? (idée à reprendre ailleurs ?)
                -> pk pas faire éclater la bulle au bout de 5 interractions et là brève image d'elle qui éclate et le journal apparait à la place ???
        ok- ajouter dessin au journal !!

        - porte vers une autre pièce

        - responsive !
    #}
    <div class="hotel-courtyard">
        <div class="courtyard-content">
            <div class="sky-door">
                <a href="{{ path('hotel_pool') }}">
                    <img src="{{ asset('images/hotel/floor1/courtyard/skydoor.png') }}" alt="">
                </a>
            </div>

            <img src="{{ asset('images/hotel/floor1/courtyard/bubble.gif') }}" alt="" class="bubble">

            <img src="{{ asset('images/hotel/floor1/courtyard/010101.gif') }}" alt="" class="bubble-pop" style="display: none;">

            <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="floor">
                <img src="{{ asset('images/hotel/floor1/courtyard/courtyardgrass.png') }}" alt="">
            </div>#}
        </div>
    </div>
{% endblock %}

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