<section class="houses-row">
    <div class="grid-row">
        <div class="map-side">
            <h2>{{ KommaLang::get('mapTitle') }}</h2>
            <div id="house-map" class="loaded"  onmousemove="updateMapTooltip(event)">
                @include('svg.housesMap')
            </div>

            @foreach($houses as $house)
                <a id="{{$house->code_name}}-tooltip" class="tooltip" href="/{{$house->translation->route->route}}">
                    <h3>{{$house->translation->name}}</h3>
                    <img alt="house {{$house->translation->name}}" src="/img/houses/{{$house->code_name}}.jpg"/>
                    <span>@lang('translations.moreInfo')</span>
                </a>
            @endforeach

        </div>

        <div class="side-text">

            <p>@lang('translations.mapSideText')</p>

            <div class="filters">
                <p class="filter-on">@lang('translations.filterOn')</p>
                <p class="legend-title">@lang('translations.legend')</p>

                @foreach(['luxe-6','xluxe-6','luxe-8','xluxe-8','luxe-10','xluxe-10'] as $type)

                    @if(in_array($type, ['luxe-8', 'luxe-10']))
                        <hr/>
                    @endif

                    <div class="check" data-type="{{$type}}">
                        <span class="icon">
                            @include('svg.checkbox')
                        </span>
                        <span class="legenda-item {{$type}}">
                        </span>
                        <p>
                            @lang('translations.houses.'.$type)
                        </p>
                    </div>
                @endforeach
            </div>

            <div class="more-info-about">
                <p>@lang('translations.moreInfoHouses')</p>
                @foreach($houses as $house)
                    <a id="{{$house->code_name}}-link" class="button" href="/{{$house->translation->route->route}}">
                        {{$house->translation->name}}
                    </a>
                @endforeach
            </div>

        </div>
    </div>
</section>

<script defer src="/js/houseMap.js"></script>