@php
    $existing = $items->first();
    $langId = $existing ? ($translations[$existing->idartikelpage]->firstWhere('locale', 'id') ?? null) : null;
    $langEn = $existing ? ($translations[$existing->idartikelpage]->firstWhere('locale', 'en') ?? null) : null;
@endphp

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">{{ $section['label'] }}</h5>
        <a href="{{ url('/solusi-konten/edit/' . $key . ($existing ? '/' . $existing->idartikelpage : '')) }}" class="btn btn-sm btn-warning mb-0">
            <i class="fas fa-edit me-1"></i> {{ $existing ? 'Edit' : 'Isi Data' }}
        </a>
    </div>
    <div class="card-body">
        @if (!$existing)
            <p class="text-center text-muted py-4">Belum ada data. Klik "Isi Data" untuk mengisi.</p>
        @else
            <div class="row mb-3">
                <div class="col-md-6">
                    <div class="fw-bold text-dark mb-1">Judul (ID)</div>
                    <div class="text-break" style="text-align: justify;">{{ $langId->judul ?? '-' }}</div>
                </div>
                <div class="col-md-6">
                    <div class="fw-bold text-dark mb-1">Judul (EN)</div>
                    <div class="text-break" style="text-align: justify;">{{ $langEn->judul ?? '-' }}</div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="fw-bold text-dark mb-1">Deskripsi (ID)</div>
                    <div class="text-break" style="text-align: justify;">{!! $langId->deskripsi ?? '-' !!}</div>
                </div>
                <div class="col-md-6">
                    <div class="fw-bold text-dark mb-1">Deskripsi (EN)</div>
                    <div class="text-break" style="text-align: justify;">{!! $langEn->deskripsi ?? '-' !!}</div>
                </div>
            </div>
        @endif
    </div>
</div>