<div class="flex flex-col relative w-full max-w-6xl">

    <div class="md:grid md:grid-cols-3 print:grid">

        <div class="col-start-2 col-span-2 row-start-1 flex justify-center">

            <div class="w-full">

                <div class="text-block px-8 pb-8">

                    @if ($content->header)
                        <h{{ $header ? '1' : '2'}}>{{ $content->header }}</h{{ $header ? '1': '2' }}>
                    @endif

                    @if ($content->body)
                        <div class="content-text body">
                            {!! $content->body !!}
                        </div>
                    @endif
                </div>

                @if ($content->layout !== 'inline' && $content->title)

                    <div class="relative text-block mt-4">

                        <div class="absolute right-0 -mr-4 h-10 w-10 flex items-center justify-center">
                            <div class="opacity-50 text-xl"><fa-icon icon="fas fa-user-tie"></fa-icon></div>
                        </div>
                        <div class="border-b border-color pb-1 items-baseline mb-1">
                            <h2>{{ $content->title }}</h2>
                        </div>

                    </div>

                @endif

                @if ($content->layout === 'list')
                    <div class="relative text-block mt-4 pl-2 md:pl-0" dusk="staff-profile-layout-list">
                        @php
                            // Identify the manager
                            $manager = $content->staff_profiles->firstWhere('departments', 'Head of Information Technology and Innovations');
                            
                            // Filter out the manager from the list
                            $staffProfilesWithoutManager = $content->staff_profiles->reject(function ($profile) { 
				                return $profile->departments === 'Head of Information Technology and Innovations';
                            });

                            // Sort the rest of the staff profiles
                            $sortedProfiles = $staffProfilesWithoutManager->sortBy('name', SORT_NATURAL | SORT_FLAG_CASE);

                            // Combine the manager and the sorted profiles
                            $finalProfiles = collect();

                            if ($manager) {
                                $finalProfiles->push($manager);
                            }
                            
                            $finalProfiles = $finalProfiles->merge($sortedProfiles);
                        @endphp

                        @foreach ($finalProfiles as $sp)
                            @if ($sp->bio)
                                <a class="flex items-center relative my-4 rounded-r text-color bg-highlight" 
                                    href="{{ $page->full_slug }}#{{ $sp->anchor }}"
                                    dusk="staff-profile-link-{{ $sp->id }}"
                                >
                            @else
                                <div class="flex items-center relative rounded-r bg-highlight my-4" dusk="staff-profile-link-{{ $sp->id }}">
                            @endif

                                <div class="">
                                    <div class="relative w-20 pb-[133%] overflow-hidden rounded-l staff-profile-list-photo">
                                        @if ($sp->photos->count())
                                            <photo-container :photo='@json($sp->photos->first())' :max-size="200" :no-enlarge="true"></photo-container>
                                        @else 
                                            <div class="w-full h-full flex items-center justify-center absolute">
                                                <img class="absolute h-24" src="/images/icon_white.svg" alt="Brentwood Icon" />
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="ml-4">
                                    <h3 class="mt-0 link">{{ $sp->full_name }}</h3>
                                    <div class="">{{ $sp->departments }}</div>
                                    @if ($sp->credentials)
                                        <div class="italic flex">
                                            <div class="text-gray-400 pr-1"><fa-icon icon="fas fa-graduation-cap"></fa-icon></div>
                                            <div class="">{{ $sp->credentials }}</div>
                                        </div>
                                    @endif
                                </div>
                            @if ($sp->bio)
                                </a>
                            @else
                                </div>
                            @endif
                        @endforeach
                    </div>
                @endif

                @if ($content->layout === 'grid')

                    <div class="grid grid-cols-2 md:grid-cols-3 w-full mt-4 gap-2 md:gap-4 text-block pl-4 md:pl-0" dusk="staff-profile-layout-grid">

                        @foreach ($content->staff_profiles as $sp)
                                <div class="{{ $sp->bio ? 'link' : '' }} md:text-center md:flex items-center justify-center border-b rounded-t staff-profile-list-grid-link" 
                                    dusk="staff-profile-link-{{ $sp->id }}"
                                >
                                    @if ($sp->bio)
                                        <a class="w-full h-full py-1 block" href="{{ $page->full_slug }}#{{ $sp->anchor }}">{{ $sp->full_name }}</a>
                                    @else
                                        {{ $sp->full_name }}
                                    @endif
                                </div>
                        @endforeach

                    </div>

                @endif


                @if ($content->layout === 'thumbnails')
                    <div class="relative text-block mt-4" dusk="staff-profile-layout-thumbnails">

                        <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
                            @foreach ($content->staff_profiles as $sp)
                                <div class="relative w-full" dusk="staff-profile-link-{{ $sp->id }}">

                                    @if ($sp->bio)
                                        <a class="" href="{{ $page->full_slug }}#{{ $sp->anchor }}">
                                    @endif

                                        <div class="relative w-full pb-[133%] overflow-hidden rounded staff-profile-list-photo">
                                            @if ($sp->photos->count())
                                                <photo-container :photo='@json($sp->photos->first())' :max-size="200" :no-enlarge="true"></photo-container>
                                            @else 
                                                <div class="w-full h-full flex items-center justify-center absolute">
                                                    <img class="absolute h-24" src="/images/icon_white.svg" alt="Brentwood Icon" />
                                                </div>
                                            @endif
                                        </div>
                                        <div class="text-white text-shadow leading-none absolute bottom-0 z-3 w-full bg-black bg-opacity-30 px-2 pt-1 pb-px">
                                            <span class="font-semibold">{{ $sp->full_name }}</span><br/>
                                            <span class="text-sm">{{ $sp->departments }}</span>
                                        </div>

                                    @if ($sp->bio)
                                        </a>
                                    @endif

                                </div>
                            @endforeach
                        </div>

                    </div>
                @endif

            </div>

        </div>

        <div class="col-start-1 row-start-1">
            @if ($content->layout === 'inline')
                @include ('staff-profiles.inline', ['staff_profiles' => $content->staff_profiles, 'title' => $content->title])
            @endif
        </div>

    </div>

    @foreach ($content->staff_profiles as $staff_profile)
        <expander uuid="staff-profile-{{ $staff_profile->id }}" :filter="false" :preview="{{ request('preview') ? 'true' : 'false' }}" :modal="true" max-width="max-w-prose" anchor="{{ $staff_profile->anchor }}" >
            <staff-profile :staff-profile='@json($staff_profile)'></staff-profile>
        </expander>
    @endforeach

</div>
