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

<x-ui.layout.page
    :title="__('hr_reports.title')"
    :subtitle="__('hr_reports.subtitle')"
    page-icon="fe fe-bar-chart-2"
    :breadcrumbs="$breadcrumbs"
>
    <div class="row g-3">
        @foreach ($links as $link)
            @can($link['permission'])
                <div class="col-md-6 col-xl-3">
                    <a href="{{ route($link['route']) }}" class="card border-0 shadow-sm h-100 text-decoration-none">
                        <div class="card-body">
                            <div class="d-flex align-items-center gap-3 mb-2">
                                <span
                                    class="avatar avatar-md rounded d-inline-flex align-items-center justify-content-center"
                                    style="background: {{ config('theme.gradients.primary') }};">
                                    <i class="{{ $link['icon'] }} text-white"></i>
                                </span>
                                <strong style="color: {{ config('theme.colors.text') }};">{{ $link['title'] }}</strong>
                            </div>
                            <p class="text-muted small mb-0">{{ $link['description'] }}</p>
                        </div>
                    </a>
                </div>
            @endcan
        @endforeach
    </div>
</x-ui.layout.page>
