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

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

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

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

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

{% block content %}
    {#
        TODO

        - brainst pièce secrete :
            ok- un sous-sol serait cool pour cohérence
            - y mettre un texte de personnage (paul jarring ? mais il irait bien en niveau 2 non ? Helene ça passe même si pas trop de raison qu'elle soit dans un sous sol...)
            - intéraction, anim, élément web ??
            - thème tuyauterie ?
                - mais thème de fond ? Si Paul jarring, le voyageur, parlant de ses déambulations, errances...
                - qqn qui se cherche en marchant, bougeant, explorant.
                    Pourquoi ? quel sens en vrai ?
                - idée mettres des tuyaux et plein d(input genre range et checkbox, radio
                    - les bouger change des caractéristiques des tuyaux genre taille, position (mouvement ?)
                    - le journal apparait au bout d'un certain nb d'interractions ??
                - défilement parallax !! horiz et vertical; symbolise l'errance, la recherche
                    - à un endroit y'a le journal, à un autre une porte
                    - utiliser des éléments comme des bouts de grottes (photos espagne), des tuyaux, de l'eau... (du texte ? des inputs ??)

                - brainst parallax :
                    - éléments qui s'ouvrent en deux, comme une porte (écartement)
                    - partie space escape de ce site : https://www.moooi.com/eu/a-life-extraordinary#space-escape
                        -> au scroll un truc qui arrive et repart puis élément animé au centre avec des bouts de grotte qui bougent autour ?
                    - un png coloré transparent passe devant tout pour colorer ? (changer son opacité)
                    -
                    - stucture :
                        - BASE :  un fond galaxie (elden ring vibe) avec devant des tuyaux et autre ?
                        - scroll : plus de tuyaux, mènent vers des rochers/bouts de grotte, entrecoupés d'eau animée si possible
                        - sous une grotte : une porte géante qui s"ouvre en deux au scrool
                        - derrière : une truc animé (méchanique, éléectricité, espace...)
                            -> doit ressembler à une porte ou autre, ménera dans une autre pièce
                        - si on continu à scroller : fade to un autre bg avec journal devant ?

            - mettre à l'arrivé une zone html étrange, centrée
                - avec forms, selects, radios, ou divs avec borders qui bougent, ou "dessin" d'une échelle en html ?

        => TODO :
            ok- placer les éléments en positions absolute
            ok- continuer le tuto parallax en appliquant aux éléments
            ok- placer le journal (où ??)
            - html en haut
            - animation en bas (ou deux; en vue d'une ou deux portes futures)

    #}

    <div class="hotel-cave">
        <div class="bg-container">
            <img src="{{ asset('images/hotel/floor1/cave/cave_bg.jpg') }}">
        </div>

        <div class="ladder">
            <pre>
:-+*++++++=-=*
::-        -=*
:--        -=*
::-        -=*
::=++++++++-=*
::-        -+*
::-        -+*
::-        -=+
::=*++++++=-=+
::-        -=+
---        -=+
::-        -=+
::-++++++++-=+
--:        -=+
-::        -++
-::        -++
-::        -=+
-:-+=======-++
-::        -=+
=::        -=+
=::        -=+
-::+=====+=-=+
=::        -=+
=::        -==
=::        -==
=::        -=+
+::+===++==-=+
=::        -=+
=::        -=+
=::        -=+
+::+=======-=+
#::        -=+
*::        -=+
#::        -=+
#::++======-=+
#::        -=+
            </pre>
        </div>

        <div class="target"></div>

        <img src="{{ asset('images/hotel/floor1/cave/grotte1.png') }}" class="grt1" data-parallax='{"y": -0.15, "x": -0.08}'>
        <img src="{{ asset('images/hotel/floor1/cave/grotte2.png') }}" class="grt2" data-parallax='{"y": -0.19, "x": 0.07}'>

        <img src="{{ asset('images/hotel/floor1/cave/grotte3.png') }}" class="grt3" data-parallax='{"y": 0.2, "x": -0.06}'>
        <img src="{{ asset('images/hotel/floor1/cave/grotte4.png') }}" class="grt4" data-parallax='{"y": 0.12, "x": 0.06}'>

        <img src="{{ asset('images/hotel/floor1/cave/crystal1.png') }}" class="cryst1" data-parallax='{"y": 0.1, "r": 0.005}'>

        <img src="{{ asset('images/hotel/floor1/cave/crystal2.png') }}" class="cryst2" data-parallax='{"y": 0.25, "r": 0.003}'>
        <img src="{{ asset('images/hotel/floor1/cave/crystal3.png') }}" class="cryst3" data-parallax='{"y": -0.17}'>
        <img src="{{ asset('images/hotel/floor1/cave/crystal4.png') }}" class="cryst4" data-parallax='{"y": -0.12, "r": -0.0065}'>

        <img src="{{ asset('images/hotel/floor1/cave/nuage3.png') }}" class="nuage3" data-parallax='{"y": -0.26}'>
        <img src="{{ asset('images/hotel/floor1/cave/nuage4.png') }}" class="nuage4" data-parallax='{"y": -0.15}'>


        <div class="journal-block" data-parallax='{"y": 0.6, "x": -0.14, "r": -0.011}'>
            <img src="{{ asset('images/hotel/JOURNAL.png') }}" alt="" data-modal="journal-modal"
                 data-modal-content-id="journal-modal-content">
        </div>

        <div class="tmpground">
            Under construction, please come back later. <br> <br>
            <a class="main-btn" href="{{ path('hotel_reception') }}">Back to reception</a>
        </div>

    </div>

{% endblock %}

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