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

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

{% block javascripts %}
    {{ parent() }}
    {{ importmap('office') }}
    {{ 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- add bouton modal
        ok- ouvrir juornal
        - anim texte
        ok- anim blocks

        - plus de changement quand les objets change : la machine et le journal font trop posés là...
            - rajout décors, changement global sur la page, etc
            - utiliser le web,

        - utiliser la fonction print pour faire quelque chose

        - responsive !
    #}
    <div class="hotel-office">
        <div class="office-content">
            <img src="{{ asset('images/hotel/floor1/office/office-frame.png') }}" class="frame">

            <div id="writing-block">
                <div class="text">
                    <span class="writing-text"></span>
                </div>
            </div>

            <div class="office-blocks">
                <div class="desk-block">
                    <img src="{{ asset('images/hotel/floor1/office/desk1.png') }}" class="main-desk">
                </div>

                <div class="typewriter-block" style="display: none;">
                    <img src="{{ asset('images/hotel/floor1/office/typewritter2.png') }}" alt="" data-modal="writer-modal"
                         data-modal-content-id="writer-modal-content">
                </div>

                <div class="junk-block" style="display: none;">
                    <img src="{{ asset('images/hotel/floor1/office/officejunk2.png') }}">
                </div>

                <div class="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 class="door-block" style="display: none;">
                    <a href="{{ path('hotel_escape_room') }}">
                        <img src="{{ asset('images/hotel/floor1/office/escdoor.png') }}" alt="" >
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block modal %}
    <div id="journal-modal-content" style="display: none;">
        <div class="modal-title">{{ 'hotel.office.journal_title'|trans }}</div>
        <div>
            {{ 'hotel.office.journal_text'|trans|raw }}
        </div>
    </div>
    <div id="writer-modal-content" style="display: none;">
        <div class="modal-title">{{ 'hotel.office.typewriter'|trans }}</div>
        <div>
            <textarea class="writer-text" cols="30" rows="10"></textarea>
        </div>
        <div class="modal-actions">
            <button type="button" class="btn main-btn" onclick="window.modalManager.closeModal()">{{ 'hotel.office.validate'|trans }}</button>
        </div>
    </div>
{% endblock %}