@php
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('me.payslips_title')],
    ];
@endphp

<x-ui.layout.page
    :title="__('me.payslips_title')"
    :subtitle="__('me.payslips_subtitle')"
    page-icon="fe fe-file-text"
    :breadcrumbs="$breadcrumbs"
>
    <x-ui.table.table :columns="[
        ['label' => '#'],
        ['label' => __('payslips.fields.period')],
        ['label' => __('payslips.fields.range')],
        ['label' => __('payslips.fields.generated_at')],
        ['label' => __('payslips.fields.finalized_at')],
        ['label' => __('common.actions')],
    ]">
        @forelse ($paginator as $snap)
            <x-ui.table.row>
                <td><code>{{ $snap->id }}</code></td>
                <td>{{ $snap->period?->name ?? '—' }}</td>
                <td class="small">
                    {{ $snap->period?->start_date?->format('Y-m-d') }} → {{ $snap->period?->end_date?->format('Y-m-d') }}
                </td>
                <td>{{ $snap->generated_at?->format('Y-m-d H:i') ?? '—' }}</td>
                <td>{{ $snap->period?->finalized_at?->format('Y-m-d H:i') ?? '—' }}</td>
                <td>
                    <x-ui.buttons.secondary :href="route('me.payslips.show', $snap->id)" icon="fe fe-eye">
                        {{ __('common.view') }}
                    </x-ui.buttons.secondary>
                </td>
            </x-ui.table.row>
        @empty
            <x-ui.table.row>
                <td colspan="6" class="text-center text-muted py-4">
                    {{ __('payslips.empty') }}
                </td>
            </x-ui.table.row>
        @endforelse
    </x-ui.table.table>

    @if ($paginator->hasPages())
        <div class="mt-3 d-flex justify-content-center">
            {{ $paginator->links() }}
        </div>
    @endif
</x-ui.layout.page>

