<section class="banner home" style="height:{{ $height or 0 }}px">
{{--
    <img src="/images/structure/logo_header.svg" alt="IJzeren Man Vught" class="circle-logo preload"/>
--}}
    {{-- IJM logo --}}
    <img src="/images/structure/logo_header.svg" alt="IJzeren Man Vught" class="circle-logo preload"/>

    <div class="container">
        <span class="overlay left"></span>
        <span class="overlay right"></span>

        {{-- Overlays--}}
        <ul class="banner-overlays" id="banner-overlays">
            @foreach($globals as $key => $item)
                <li><span class="overlay"></span></li>
            @endforeach
        </ul>

        {{-- Columns--}}
        <ul class="banner-columns" id="banner-columns">
            @foreach($globals as $key => $item)
                <li>
                    <a href="/{{ $item->route }}" data-state="{{ Str::camel($item->name) }}"></a>
                </li>
            @endforeach
        </ul>

        {{-- Large titles --}}
        <ul class="banner-titles" id="banner-titles">
            @foreach($globals as $key => $item)
                <li><span class="logo {{ $item->codeName }}"></span></li>
            @endforeach
        </ul>
    </div>

    <div class="backgrounds">
        {{-- Default image --}}
        @if(isset($globals[0]->headerImage))
            <img src="{{ $globals[0]->headerImage }}" alt="{{ $globals[0]->name }}" class="fill preload"/>
        @endif

        {{-- Background images --}}
        <ul id="banner-backgrounds">
        @foreach($globals as $key => $item)
            <li>
                @if( ! empty($item->headerImage))
                    <img src="{{ $item->headerImage }}" alt="{{ $item->name }}" class="fill preload"/>
                @endif
            </li>
        @endforeach
        </ul>

    </div>

</section>