@extends('front.layouts.app')

@section('main')

    @include('front.sections.content-hero')

    @foreach($page->sections as $section)
        <section class="{{ $section->layout }} {{ $section->container_type === 'boxed' ? '--boxed' : '--full' }}">
            <div>
                @foreach($section->articles as $article)
                    <article class="{{ $article->style_classes }}">
                        @php
                            // Merge all content types, add order property, and sort them
                            $contents = collect()
                                ->merge($article->textContent)
                                ->merge($article->images)
                                ->merge($article->videos)
                                ->merge($article->buttons)
                                ->merge($article->accordions)
                                ->merge($article->galleries ?? []) // optional
                                ->merge($article->maps ?? [])      // optional
                                ->sortBy('order');
                        @endphp
                        @foreach($contents as $content)
                            @switch(class_basename($content))
                                @case('TextContent')
                                    @include('front.components.text-content', ['content' => $content])
                                    @break
                                @case('Image')
                                    @include('front.components.image', ['image' => $content])
                                    @break
                                @case('Video')
                                    @include('front.components.video', ['video' => $content])
                                    @break
                                @case('Button')
                                    @include('front.components.button', ['content' => $content])
                                    @break
                                @case('Accordion')
                                    @include('front.components.accordion', ['content' => $content])
                                    @break
                                @case('Gallery')
                                    @include('front.components.gallery', ['gallery' => $content])
                                    @break
                                @case('Map')
                                    @include('front.components.map', ['map' => $content])
                                    @break
                            @endswitch
                        @endforeach

                    </article>
                @endforeach
            </div>
        </section>
    @endforeach

@endsection