@extends('templates._single')

@section('html.head.title', 'Hello World')

@section('main')
    @include('sections.banner', ['background' => '', 'space_class'=>'pt4 pb3'])
        @include('atoms.heading_group', $primaryIndex)
    @include('sections.banner_CLOSE')

    <article class="index">

         {{-- counter for later in the loop --}}
        @foreach($primaryIndex['index'] as $key => $sub)
            {{-- render a group section --}}
            @if(isset($sub['children']))
                <div class="index__item">
                    <div class="dynamic-container pt3 pb4 clearfix">
                        <div class="dynamic-col-1">
                            <h3>{{$sub['title']}}</h3>
                            <div class="md-mxn2 lg-mxn3">
                                @foreach($sub['children'] as $subKey => $child)
                                    <div class="col md-col-6 md-px2 lg-px3">
                                        <h4><a href="{{$sub['title_link']}}">{{$child['title']}}</a></h4>
                                        <p>{{$child['copy']}}</p>
                                        {{-- @include('atoms.resources', [
                                            'resources' => $primaryIndex['resources']['entities'],
                                            'resource_id' => rand(),
                                            'classes' => 'mr1 -sm'
                                        ]) --}}
                                    </div>

                                    @if(($subKey % 2) == 1)
                                        <div class="clearfix"><!-- --></div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- render singleton sections --}}
            @if(!isset($sub['children']))
                {{-- if is first item OR last item had a child then create a container --}}
                @if(isset($primaryIndex['index'][($key -1)]['children']) || $key == 0)
                    <div class="index__item">
                        <div class="dynamic-container pt3 pb4 clearfix">
                            <div class="dynamic-col-1">
                                <div class="md-mxn2 lg-mxn3">
                @endif

                                <div class="col md-col-6 md-px2 lg-px3">
                                    <h3><a href="{{$sub['title_link']}}">{{$sub['title']}}</a></h3>
                                    <p>{{$sub['copy']}}</p>
                                    {{-- @include('atoms.resources', [
                                        'resources' => $primaryIndex['resources']['entities'],
                                        'resource_id' => rand(),
                                        'classes' => 'mr1 -sm'
                                    ]) --}}
                                </div>

                                @if($count == 2)
                                    <div class="clearfix"><!-- --></div>
                                                                    @endif
                                
                {{-- if is last item OR next item has a child then close the container --}}
                @if(isset($primaryIndex['index'][($key +1)]['children']) || $key == count($primaryIndex['index']) -1)

                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            @endif

        @endforeach

    </article>
@endsection