@inject('SectionService', 'App\Services\SectionService')
@php
$param = 'news';
$newsData = $SectionService->get($param);
@endphp
<section class="container" id="news">
    <!-- Nav tabs -->
    <ul class="nav nav-underline">
        @foreach ($newsData['tabs'] ??[] as $tabId => $tabTitle)
            <li class="nav-item">
                <button class="nav-link {{ $loop->first ? 'active' : '' }}" aria-current="page" data-bs-toggle="tab" data-bs-target="#{{ $tabId }}">{{ $tabTitle }}</button>
            </li>
        @endforeach
    </ul>

    <!-- Tab panes -->
    <div class="container tab-content">
        @foreach ($newsData['content'] ?? [] as $tabId => $tabItems)
            <div class="tab-pane {{ $loop->first ? 'active' : '' }}" id="{{ $tabId }}">
                <div class="row">
                    @forelse ($tabItems as $item)
                        <!-- Use grid columns for responsive card sizing -->
                        <div class="col-12 col-md-6 mb-4">
                            <div class="card me-2 mb-2">
                                <div class="card-body">
                                    <h5 class="card-title">{{ $item['title'] ?? 'Default Title' }}</h5>
                                    <p class="card-text">{{ $item['text'] ?? 'Default content.' }}</p>
                                </div>
                            </div>
                        </div>
                    @empty
                        <p class="col-12">No content available for this section.</p>
                    @endforelse
                </div>
            </div>
        @endforeach
    </div>
</section>