@extends('layouts.admin.app')

@section('title', __('pages/admin/components.nav.cards'))

@section('content')
<x-layouts.admin.component-demo :title="__('pages/admin/components.nav.cards')">
    <x-utility.card :title="__('pages/admin/components.cards.basic')">
        <p class="text-sm text-muted-foreground">
            {{ __('pages/admin/components.cards.descriptions.basic') }}
        </p>
    </x-utility.card>

    <x-utility.card :title="__('pages/admin/components.cards.with_actions')">
        <x-slot:actions>
            <x-buttons.secondary size="sm">{{ __('buttons.export') }}</x-buttons.secondary>
            <x-buttons.primary size="sm">{{ __('buttons.add_new') }}</x-buttons.primary>
        </x-slot:actions>
        <p class="text-sm text-muted-foreground">
            {{ __('pages/admin/components.cards.descriptions.with_actions') }}
        </p>
    </x-utility.card>

    <x-utility.card :title="__('pages/admin/components.cards.with_footer')">
        <p class="text-sm text-muted-foreground">
            {{ __('pages/admin/components.cards.descriptions.with_footer') }}
        </p>
        <x-slot:footer>
            <x-buttons.secondary>{{ __('buttons.cancel') }}</x-buttons.secondary>
            <x-buttons.primary>{{ __('buttons.save_changes') }}</x-buttons.primary>
        </x-slot:footer>
    </x-utility.card>

    <x-utility.card :title="__('pages/admin/components.cards.borderless')" :noBorder="true">
        <p class="text-sm text-muted-foreground">
            {{ __('pages/admin/components.cards.descriptions.borderless') }}
        </p>
    </x-utility.card>
</x-layouts.admin.component-demo>
@endsection