@if ($content->layout === 'links' && $content->header)
    <div class="photo-block-header relative z-2 md:rounded-t-lg shadow-md -mb-1 pb-1 w-full max-w-6xl print:shadow-none">
        <div class="flex justify-center items-baseline relative px-8">
            <div class="h2 py-2 mt-0">{{ $content->header }}</div>
            <div class="text-xl opacity-60 leading-none pl-2 w-6 hidden md:block"><fa-icon icon="fas fa-angle-right"></fa-icon></div>
        </div>
    </div> 
@endif

<div class="absolute debug">{{ $content->height }}p</div>

@php 

if ($content->columns >= 4 && $content->photos->count() > 4) {
    $mobile_cols = 2;
} else {
    $mobile_cols = 1;
}

$single_col = 0;

@endphp

<div class="w-full relative z-5 grid avoid-page-break overflow-hidden 
    {{ $content->text_style && $content->photos->count() ? ( $content->layout !== 'full' ? 'shadow' : 'shadow-lg' ) : '' }}
    {{ !$content_element->pivot->no_margin ? ($sort_order > 1 ? 'md:rounded-lg' : 'md:rounded-b-lg' )  : '' }}
    {{ $content->photos->count() ? ( $content->layout !== 'full' ? 'max-w-6xl' : 'md:rounded-none' ) : 'max-w-6xl' }} 
    {{ $content->layout === 'links' ?  'photo-block-header px-2 pb-2' : '' }}

@if ($content_element->pivot->randomize)
    contents
@else
    @if ($mobile_cols === 2) {
        grid-cols-2
    @else
        grid-cols-1
    @endif

    @if ($content->columns === 6)
        md:grid-cols-6 print:grid-cols-6
    @elseif ($content->columns === 5)
        md:grid-cols-5 print:grid-cols-5
    @elseif ($content->columns === 4)
        md:grid-cols-4 print:grid-cols-4
    @elseif ($content->columns === 3)
        md:grid-cols-3 print:grid-cols-3
    @elseif ($content->columns === 2)
        md:grid-cols-2 print:grid-cols-2
    @else
        print:grid-cols-1
    @endif
@endif

{{ $content->padding || $content->layout === 'links' ? 'gap-2' : '' }}
    print:shadow-none
">

@foreach ($content_element->pivot->randomize ? $content->photos->shuffle()->values() :  $content->photos->sortBy('sort_order')->values() as $index => $photo)

        <div class="w-full md:w-auto relative overflow-hidden
            {{ $photo->hide_mobile ? 'hidden md:block' : '' }}
            {{ $photo->hide_print ? 'print:hidden' : '' }}
            {{ $content->layout === 'links' ? 'md:rounded overflow-hidden' : '' }}
            {{ $content->text_style ? 'text-style-'.$content->text_style : '' }}
            {{ $content_element->pivot->randomize ? 'h-full z-2 min-h-72 randomize-border' : '' }}

            @if ($photo->span === 5)
                md:col-span-5 print:col-span-5
            @elseif ($photo->span === 4)
                md:col-span-4 print:col-span-4
            @elseif ($photo->span === 3)
                md:col-span-3 print:col-span-3
            @elseif ($photo->span === 2)
                col-span-{{ $mobile_cols }} md:col-span-2 print:col-span-2
            @else
                @php 
                    $single_col++;
                @endphp
                @if ($index === $content->photos->count() - 1 && $single_col % 2 !== 0 && $mobile_cols === 2)
                    col-span-2
                @endif
                md:col-span-1 print:col-span-1
            @endif

            @if (($photo->title || $photo->subtitle) && !$photo->link)
                pb-66p
            @elseif ($content->layout === 'links' || $photo->link)
                @if ($mobile_cols === 2)
                    @if ($index === $content->photos->count() - 1 && $single_col % 2 !== 0)
                        pb-50p
                    @else 
                        pb-75p
                    @endif
                @else
                    pb-50p
                @endif
            @else 
                @if ($mobile_cols === 2)
                    @if ($index === $content->photos->count() - 1 && $single_col % 2 !== 0)
                        pb-50p
                    @else 
                        pb-66p
                    @endif
                @else
                    @if ($content->height >= 75)
                        pb-66p
                    @else
                        pb-50p
                    @endif
                @endif
            @endif

            @if ($content->layout === 'links')
                @if ($content->photos->count() < 3)
                    md:pb-40p print:pb-40p
                @else
                    md:pb-50p print:pb-50p
                @endif
            @else

                @if (floor($content->height / $photo->span) == 200)
                    md:pb-200p print:pb-200p
                @elseif (floor($content->height / $photo->span) == 150)
                    md:pb-150p print:pb-150p
                @elseif (floor($content->height / $photo->span) == 100)
                    md:pb-100p print:pb-100p
                @elseif (floor($content->height / $photo->span) == 75)
                    md:pb-75p print:pb-75p
                @elseif (floor($content->height / $photo->span) == 66)
                    md:pb-66p print:pb-66p
                @elseif (floor($content->height / $photo->span) == 50)
                    md:pb-50p print:pb-50p
                @elseif (floor($content->height / $photo->span) == 40)
                    md:pb-40p print:pb-40p
                @elseif (floor($content->height / $photo->span) == 37)
                    md:pb-37p print:pb-37p
                @elseif (floor($content->height / $photo->span) == 33)
                    md:pb-33p print:pb-33p
                @elseif (floor($content->height / $photo->span) == 25)
                    md:pb-25p print:pb-25p
                @endif

            @endif


            @if ($photo->vertical_span === 4)
                pb-100p md:row-span-4 print:row-span-4
            @elseif ($photo->vertical_span === 3)
                pb-100p md:row-span-3 print:row-span-3
            @elseif ($photo->vertical_span === 2)
                pb-75p md:row-span-2 print:row-span-2
            @else
                md:row-span-1 print:row-span-1
            @endif
        "
            key="photo-{{ $photo->id }}"
        >
            @if ($index === $content->photos->count() - 1 && !$photo->link && !$content_element->pivot->randomize)
                <div class="photo-border"></div>
            @endif

            @if ($index === 0 && $photo->span === 1 && $content->columns === 3 && !$content->padding && $content->layout !== 'links' && !$content_element->pivot->randomize)
                <div class="absolute h-full border-l-4 border-primary md:right-0 z-4"></div>
            @endif

            @include ('content-elements.photo', ['photo' => $photo, 'max_size' => ( ($content->layout === 'full' ? 2304 : 1152) / $content->columns ) * $photo->span, 'layout' => $content->layout, 'sort_order' => $sort_order ])

        </div>

    @endforeach

    @if ($content->columns === 5 && $content->photos->count() % 2) 
        <div class="md:hidden flex items-center justify-center">
            <img src="/images/icon_gray.svg" class="w-16 opacity-50" />
        </div>
    @endif

    @if ($content->show_text)
        @include ('content-elements/photo-block-text')
    @endif

</div>