@php
    $interviewArticles = json_decode($ArrRecentLeftPanelInterviewAricles, true);
    $baseThumb = config('constants.Sitethumbnail');
@endphp

@if (!empty($interviewArticles))
    <div class="lg:w-9/12 flex flex-col gap-6">

        {{-- SECTION HEADER --}}
        <div class="flex items-center justify-between font-rethink1">
            <h2 class="text-[1.35rem] leading-normal text-black whitespace-nowrap">
                Interview<span class="txt-red"></span>
            </h2>

            <a href="{{ url('interviews.html') }}"
                class="text-black border border-gray-300 hover:bg-red-600 hover:text-white transition px-3 py-2 text-sm rounded-2xl">
                View All
            </a>
        </div>

        <div class="w-full flex flex-col lg:flex-row gap-4">

            {{-- LEFT BIG ARTICLE --}}
            @php
                $main = $interviewArticles[0];
                $mainPhoto = $main['photopath'] ? $baseThumb . $main['photopath'] : $baseThumb . 'default.jpg';
                $mainDate =
                    $main['publish_date'] && $main['publish_time']
                        ? \Carbon\Carbon::parse($main['publish_date'] . ' ' . $main['publish_time'])
                        : null;
            @endphp

            <div
                class="lg:w-7/12 w-full flex flex-col bg-white rounded-xl shadow hover:shadow-lg transition-all duration-300">
                <div class="flex flex-col">
                    <a href="{{ $main['url'] }}">
                        <img src="{{ $mainPhoto }}" alt="{{ $main['title'] }}" class="w-full rounded-t-xl">
                    </a>

                    <div class="py-2 px-3">
                        <h3 class="text-xl lg:text-[1.75rem] lg:leading-[1.25] mt-0 article-title">
                            <a href="{{ $main['url'] }}" class="flex-shrink-0">
                                {{ Str::limit($main['title'], 120, '...') }}
                            </a>
                        </h3>

                        @if ($mainDate)
                            <p class="text-xs text-gray-500 my-1">
                                <i class="fa-regular fa-clock"></i>
                                {{ $mainDate->diffInWeeks() > 1 ? $mainDate->format('d F Y') : $mainDate->diffForHumans() }}
                            </p>
                        @endif
                    </div>
                </div>
            </div>

            {{-- RIGHT SMALL ARTICLES --}}
            <div class="lg:w-5/12 flex flex-col lg:gap-2 gap-2 text-base/6 lg:text-[17px] lg:leading-[1.4]">

                @foreach ($interviewArticles as $index => $item)
                    @continue($index === 0)

                    @php
                        $photo = $item['photopath'] ? $baseThumb . $item['photopath'] : $baseThumb . 'default.jpg';
                        $date =
                            $item['publish_date'] && $item['publish_time']
                                ? \Carbon\Carbon::parse($item['publish_date'] . ' ' . $item['publish_time'])
                                : null;
                    @endphp

                    <article class="flex lg:gap-4 gap-0 flex-row lg:flex-row bg-gray-50 hover:shadow-md transition">
                        <a href="{{ $item['url'] }}" class="flex-shrink-0">
                            <img src="{{ $photo }}" alt="{{ $item['title'] }}"
                                class="lg:w-32 w-full w-24 h-14 lg:h-20 object-cover rounded-lg flex-shrink-0">
                        </a>

                        <div class="w-auto px-2 lg:p-0">
                            <h3 class="hover:txt-red transition text-base lg:text-[17px] lg:leading-[1.4]">
                                <a href="{{ $item['url'] }}" class="flex-shrink-0">
                                    {{ Str::limit($item['title'], 90, '...') }}
                                </a>
                            </h3>

                            @if ($date)
                                <p class="text-xs text-gray-500 lg:mt-1 mt-0">
                                    <i class="fa-regular fa-clock"></i>
                                    {{ $date->diffInWeeks() > 1 ? $date->format('d F Y') : $date->diffForHumans() }}
                                </p>
                            @endif
                        </div>
                    </article>

                    <hr class="lg:hidden">
                @endforeach

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