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

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

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

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

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

{% block content %}
    {#
        TODO

        ok- faire une série de cartes ou autre représentant une vie de travail bien ordonnée
        ok- js : les cartes disparaissent au clic et augmentent l'opacité du bg

        - faire apparaire photo + texte tobiasz

        - go revoir l'architecture
    #}

    <div class="hotel-office">
        <img class="overbackground" src="{{ asset('images/hotel/floor2/office/officewall4.jpg') }}" alt="">
        <div class="office-content">
            <div class="item-list">
                <div class="item">
                    <img src="{{ asset('images/hotel/floor2/office/item1.jpg') }}" alt="">
                    <div class="item-stuff"><div class="item-stuff-title"></div><div class="item-stuff-content"></div></div>
                </div>
                <div class="item">
                    <img src="{{ asset('images/hotel/floor2/office/item2.jpg') }}" alt="">
                    <div class="item-stuff"><div class="item-stuff-title"></div><div class="item-stuff-content"></div></div>
                </div>
                <div class="item">
                    <img src="{{ asset('images/hotel/floor2/office/item3.jpg') }}" alt="">
                    <div class="item-stuff"><div class="item-stuff-title"></div><div class="item-stuff-content"></div></div>
                </div>
                <div class="item">
                    <img src="{{ asset('images/hotel/floor2/office/item4.jpg') }}" alt="">
                    <div class="item-stuff"><div class="item-stuff-title"></div><div class="item-stuff-content"></div></div>
                </div>
                <div class="item">
                    <img src="{{ asset('images/hotel/floor2/office/item5.jpg') }}" alt="">
                    <div class="item-stuff"><div class="item-stuff-title"></div><div class="item-stuff-content"></div></div>
                </div>
                <div class="item">
                    <img src="{{ asset('images/hotel/floor2/office/item6.jpg') }}" alt="">
                    <div class="item-stuff"><div class="item-stuff-title"></div><div class="item-stuff-content"></div></div>
                </div>
                <div class="item">
                    <img src="{{ asset('images/hotel/floor2/office/item7.jpg') }}" alt="">
                    <div class="item-stuff"><div class="item-stuff-title"></div><div class="item-stuff-content"></div></div>
                </div>
            </div>

            <div id="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>
        <img class="desk" src="{{ asset('images/hotel/floor2/office/desk2.png') }}" alt="">
    </div>
{% endblock %}

{% block modal %}
    <div id="journal-modal-content" style="display: none;">
        <div class="modal-title">{{ 'hotel.reception.action'|trans }}</div>
        <div>
            TODO
        </div>
    </div>
{% endblock %}