<section class="rooms-row" id="{{Str::slug(trans('translations.rooms2'))}}">
    <div class="content-container rooms">
        <div class="selection">
            <div class="overlay"></div>
            <div class="header-holder"> <h3>@lang('translations.rooms')</h3> </div>
            <div class="main-building">
                <h5>{{$data->translations['all']['main_building']->title}}</h5>
                <ul>
                    <?php $first = true; ?>
                    @foreach($data->translations['main_building'] as $key => $object)
                        <li class="{{$key}} @if($first) active @endif" data-click-key="{{ $key }}">{{$object->title}}</li>
                        <?php $first = false; ?>
                    @endforeach
                </ul>
            </div>
{{--            <div class="side-building">--}}
{{--                <h5>{{$data->translations['all']['side_building']->title}}</h5>--}}
{{--                <ul>--}}
{{--                    @foreach($data->translations['side_building'] as $key => $object)--}}
{{--                        <li class="{{$key}}" data-click-key="{{ $key }}">{{$object->title}}</li>--}}
{{--                    @endforeach--}}
{{--                </ul>--}}
{{--            </div>--}}
        </div>

        <div class="room-content">
            <?php $first = true; ?>
            @foreach($data->translations['main_building'] as $key => $object)
                <div class="room-text {{$key}} @if($first) active @endif">

                    <div class="header-holder"><h4>{{$object->title}}</h4></div>
                {{$object->text}}
                </div>
{{--                    <div data-click-key="{{ $object->next }}" class="next {{$key}} @if($first) active @endif">--}}
{{--                        {{$object->next_name}}--}}
{{--                    </div>--}}
                @if($object->next_name === 'Bijgebouw')
                    <div data-click-key="main_building" class="next {{$key}} @if($first) active @endif">
                        Grote ruimte
                    </div>
                @else
                    <div data-click-key="{{ $object->next }}" class="next {{$key}} @if($first) active @endif">
                        {{$object->next_name}}
                    </div>
                @endif
                    <?php $first = false; ?>
                @endforeach
{{--                <div class="room-text side_building">--}}
{{--                    <div class="header-holder"><h4>{{$data->translations['all']['side_building']->title}}</h4></div>--}}
{{--                    {{$data->translations['all']['side_building']->text}}--}}
{{--                </div>--}}
                <div data-click-key="main_building" class="next main-building">{{$data->translations['all']['main_building']->title}}</div>
        </div>
        <div class="room-photos">
            <?php $first = true; ?>
            @foreach($data->translations['main_building'] as $key => $object)
                <div class="{{$key}}-images image-slider @if($first) active @endif">
                    @foreach($object->images as $image)
                        <div class="image @if($first) active @endif" style="background-image: url('{{$image}}');"></div>
                        <?php $first = false; ?>
                    @endforeach
                </div>
            @endforeach
                <div class="side_building-images image-slider">

                        @foreach($data->translations['all']['side_building']->images as $image)
                            <div class="image global-images" style="background-image: url('{{$image}}');"></div>
                        @endforeach

            @foreach($data->translations['side_building'] as $key => $object)

                    @foreach($object->images as $image)
                        <div class="image {{$key}}-images" style="background-image: url('{{$image}}');"></div>
                    @endforeach
            @endforeach
            </div>
        </div>

        <div class="controllers">
            <div class="next"><span></span></div>
            <div class="prev"><span></span></div>
        </div>

        <div class="clear"></div>
    </div>
    <div class="background"></div>
</section>

<div class="forrest-rooms">
    <div class="image"></div>
    <div class="content-container">
        <div class="logo">
            <img alt="Art of Ein-stein Logo" src="/img/einsteinOutline.svg"/>
        </div>
    </div>
</div>