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

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

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

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

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

{% block content %}
    {#
        TODO

        ok- rajouter espace avec bouton (où ?)
        ok- layout defaut (images de base)
        ok- images variations
        ok- js + bouton pour randomiser
        ok- randomisation au chargement (twig ?)

        - plus tard : ajout d'un 5e item par élément

        -- go faire le bureau maintenant

        -> types d'éléments :
            - mur
            - sol
            - lit
            - tableau ? (test si ça passe avec le lit)
    #}

    <div class="hotel-rooms">
        <div class="floor-room-grid">
            <div class="room-content"
                 id="room-wall"
                 style="background-image: url('{{ asset('images/hotel/floor1/multiroom/wall'~random(1, 4) ~'.jpg') }}')"
                 data-backgrounds='[
                   "{{ asset('images/hotel/floor1/multiroom/wall1.jpg') }}",
                   "{{ asset('images/hotel/floor1/multiroom/wall2.jpg') }}",
                   "{{ asset('images/hotel/floor1/multiroom/wall3.jpg') }}",
                   "{{ asset('images/hotel/floor1/multiroom/wall4.jpg') }}"
                 ]'
            >
                <img
                    class="painting"
                    id="room-painting"
                    src="{{ asset('images/hotel/floor1/multiroom/tableau'~random(1, 4) ~'.png') }}"
                    data-images='[
                        "{{ asset('images/hotel/floor1/multiroom/tableau1.png') }}",
                        "{{ asset('images/hotel/floor1/multiroom/tableau2.png') }}",
                        "{{ asset('images/hotel/floor1/multiroom/tableau3.png') }}",
                        "{{ asset('images/hotel/floor1/multiroom/tableau4.png') }}"
                    ]'
                    alt="{{ 'hotel.multiroom.painting'|trans }}"
                    data-tooltip="{{ 'hotel.multiroom.painting'|trans }}"
                >
                <img
                    class="bed"
                    id="room-bed"
                    src="{{ asset('images/hotel/floor1/multiroom/bed'~random(1, 4) ~'.png') }}"
                    data-images='[
                        "{{ asset('images/hotel/floor1/multiroom/bed1.png') }}",
                        "{{ asset('images/hotel/floor1/multiroom/bed2.png') }}",
                        "{{ asset('images/hotel/floor1/multiroom/bed3.png') }}",
                        "{{ asset('images/hotel/floor1/multiroom/bed4.png') }}"
                    ]'
                    alt="{{ 'hotel.multiroom.rest'|trans }}"
                    data-tooltip="{{ 'hotel.multiroom.rest'|trans }}"
                >
            </div>
            <div class="floor"
                 id="room-floor"
                 style="background-image: url('{{ asset('images/hotel/floor1/multiroom/floor'~random(1, 4) ~'.jpg') }}')"
                 data-backgrounds='[
                   "{{ asset('images/hotel/floor1/multiroom/floor1.jpg') }}",
                   "{{ asset('images/hotel/floor1/multiroom/floor2.jpg') }}",
                   "{{ asset('images/hotel/floor1/multiroom/floor3.jpg') }}",
                   "{{ asset('images/hotel/floor1/multiroom/floor4.jpg') }}"
                 ]'
            >
                <div class="room-control">
                    {{ 'hotel.multiroom.action'|trans }} :
                    <button class="room-roll" id="room-roll">
                        <img src="{{ asset('images/hotel/floor1/multiroom/dice.gif') }}" alt="">
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}