@extends('layouts.dashboard')

@section('container')
    <div class="p-4 sm:ml-64">
        <div class="mt-16">
            <div class="grid grid-cols-12 gap-4">
                <div class="col-span-12 lg:col-span-8">

                    @include('layouts.components.breadcumb')

                    <h2 class="mb-7 text-3xl font-bold leading-none tracking-tight text-gray-900 md:text-4xl ">
                        Forum Diskusi
                    </h2>

                    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
                        <table class="w-full text-sm text-left text-gray-500 " id="table">
                            <thead class="text-xs text-gray-700 uppercase bg-gray-50 ">
                                <tr>
                                    <th scope="col" class="px-6 py-3">No.</th>
                                    <th scope="col" class="px-6 py-3">Judul</th>
                                    <th scope="col" class="px-6 py-3 text-center">Jumlah aduan (Tiket)</th>
                                    <th scope="col" class="px-6 py-3 text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($units as $unit)
                                    <tr class="bg-white border-b">
                                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap ">
                                            {{ $loop->index + 1 }}
                                        </th>
                                        <td class="px-6 py-4">{{ $unit->name }}</td>

                                        <td class="px-6 py-4 text-center">{{ count($unit->posts) ?? '-' }}</td>

                                        <td><a href="/dashboard/superadmin/forum/{{ $unit->slug }}"
                                                class="btn-link mx-6">Pratinjau</a>
                                        </td>
                                    </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="flex col-span-4 items-end justify-center rounded bg-transparent h-96">
                </div>
            </div>
        </div>
    </div>
@endsection