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

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

{% block javascripts %}
    {{ parent() }}
    {{ importmap('pool') }}
{% endblock %}

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

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

{% block content %}
    {#
        TODO

        ok- layout
        ok- piscine
        ok- animation
        ok- bouton caché + modale
        ok- js pour vider l'eau

        ok- revoir le sol

        ok- scroll et porte

        - responsive
    #}
    <div class="hotel-pool">
        <div class="pool-content">
                <div class="pool-control" style="display: none;">
                    <div>{{ 'hotel.pool.water_level'|trans }}</div>
                    <div><input type="range" id="water-level-range" name="water-level-range" min="0" max="100" value="100"></div>
                </div>
            {#<div class="roof">
            </div>#}
            <div class="wall">
                <div class="anim">
                    <img src="{{ asset('images/hotel/floor1/pool/pool-anim-3.gif') }}" alt="{{ 'hotel.pool.anim'|trans }}">
                </div>
                <div class="door">
                    {#<a href="{{ path('hotel_escape_room') }}">
                        <img src="{{ asset('images/hotel/floor1/pool/pool-door.jpg') }}" alt="">
                    </a>#}
                    <a href="{{ path('hotel_office') }}">
                        <img src="{{ asset('images/hotel/floor1/pool/officedoor2.jpg') }}" alt="">
                    </a>
                </div>
            </div>
            <div class="floor">
                <div class="swimming-pool">
                    <img src="{{ asset('images/hotel/floor1/pool/pool-tile.png') }}" class="pool-tile" alt="">
                    <img src="{{ asset('images/hotel/floor1/pool/pool-button.png') }}" class="pool-button" alt="">
                    <img src="{{ asset('images/hotel/floor1/pool/pool-water.png') }}" class="pool-water" alt="">
                    <a href="{{ path('hotel_cave') }}" class="pool-ladder">
                        <img src="{{ asset('images/hotel/floor1/pool/pool-ladder.png') }}" alt="">
                    </a>
                    <img src="{{ asset('images/hotel/floor1/pool/pool2.png') }}" class="main-pool" alt="">
                </div>
            </div>
        </div>
    </div>
{% endblock %}