<x-ui.layout.page :title="__('loans.my_title')" page-icon="fe fe-dollar-sign">
    <x-slot:actions>
        <x-ui.operational.create-button :href="route('me.loans.create')" :label="__('loans.actions.request')" />
    </x-slot:actions>
    <x-ui.operational.index-shell>
        <x-ui.table.table :columns="[['label'=>'#'],['label'=>__('loans.fields.type')],['label'=>__('loans.fields.amount')],['label'=>__('loans.fields.balance')],['label'=>__('loans.fields.start_date')],['label'=>__('loans.fields.status')]]">
            @forelse($loans as $loan)
                <x-ui.table.row><td>{{ $loan->id }}</td><td>{{ __('loans.types.'.$loan->type) }}</td><td>{{ number_format((float)$loan->amount,2) }}</td><td>{{ number_format((float)$loan->remaining_balance,2) }}</td><td>{{ $loan->start_date?->format('Y-m-d') }}</td><td>{{ __('loans.status.'.$loan->status) }}</td></x-ui.table.row>
            @empty<x-ui.table.row><td colspan="6"><x-ui.operational.empty-state :title="__('loans.empty')" /></td></x-ui.table.row>@endforelse
        </x-ui.table.table>
        <x-slot:pagination>{{ $loans->links() }}</x-slot:pagination>
    </x-ui.operational.index-shell>
</x-ui.layout.page>
