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

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

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

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

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

{% block hotel_music %}
    <audio id="bgmusic" loop>
        <source src="{{ asset('music/RECEPTION.mp3') }}" type="audio/mp3">
    </audio>
{% endblock %}

{% block content %}
    {#
        TODO

        ok?- background
        ok?- CSS portes
            osef??- ajustements mobiles
        a continuer plus tard- portes (items)
        ok- éléments de déco pour chaque porte/item

        ??- trads
        ok- backlink vers réception

        a revoir- élément au bout du couloir ?
        - élément caché ?

        - Rajouter une porte vers le restaurant

    #}

    <div class="hotel-corridor">
        <ul class="door-list">
            <li data-direction="right">
                <a href="{{ path('hotel_multiroom') }}">
                    <img class="corridor-door" src="{{ asset('images/hotel/floor1/corridor/roomsdoor2.jpg') }}" alt=""/>
                </a>
                <img class="item1 mobile-hide" src="{{ asset('images/hotel/floor1/corridor/chm2.gif') }}" alt=""/>
            </li>
            <li data-direction="left">
                <a href="{{ path('hotel_office') }}">
                    <img class="corridor-door" src="{{ asset('images/hotel/floor1/corridor/deskdoor2.jpg') }}" alt=""/>
                </a>
                <img class="item2 mobile-hide" src="{{ asset('images/hotel/floor1/corridor/bosch1.jpg') }}" alt=""/>
            </li>
            <li data-direction="right">
                <a href="{{ path('hotel_restaurant') }}">
                    <img class="corridor-door" src="{{ asset('images/hotel/floor1/corridor/door2.png') }}" alt=""/>
                </a>
            </li>
            <li data-direction="center">
                <img class="corridor-door" src="{{ asset('images/hotel/floor1/corridor/horizon.jpg') }}" alt=""/>
            </li>
            {#<li data-direction="right"><strong>Porte 3</strong>
                <div style="font-size:12px;opacity:.85">Bibliothèque</div>
            </li>
            <li data-direction="left"><strong>Porte 4</strong>
                <div style="font-size:12px;opacity:.85">Chambre</div>
            </li>#}
        </ul>

        <div class="scroll-container">
            <div class="stage" id="stage">
                <div class="stage-inner">
                    <div class="slot" id="slotA" aria-hidden="false">
                        <div class="content"></div>
                    </div>
                    <div class="slot" id="slotB" aria-hidden="true">
                        <div class="content"></div>
                    </div>
                </div>
            </div>
            <div class="spacer" id="spacer"></div>
        </div>
    </div>
{% endblock %}