@extends('layouts.admin.app')

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

@section('content')
<x-layouts.admin.component-demo :title="__('pages/admin/components.nav.buttons')">
    <x-utility.card :title="__('ui.variant.primary')">
        <div class="flex flex-wrap items-center gap-3">
            <x-buttons.primary size="sm">{{ __('ui.size.small') }}</x-buttons.primary>
            <x-buttons.primary>{{ __('ui.size.default') }}</x-buttons.primary>
            <x-buttons.primary size="lg">{{ __('ui.size.large') }}</x-buttons.primary>
            <x-buttons.primary :loading="true">{{ __('ui.state.loading') }}</x-buttons.primary>
            <x-buttons.primary disabled>{{ __('ui.state.disabled') }}</x-buttons.primary>
        </div>
    </x-utility.card>

    <x-utility.card :title="__('ui.variant.secondary')">
        <div class="flex flex-wrap items-center gap-3">
            <x-buttons.secondary size="sm">{{ __('ui.size.small') }}</x-buttons.secondary>
            <x-buttons.secondary>{{ __('ui.size.default') }}</x-buttons.secondary>
            <x-buttons.secondary size="lg">{{ __('ui.size.large') }}</x-buttons.secondary>
            <x-buttons.secondary href="#">{{ __('pages/admin/components.buttons.link') }}</x-buttons.secondary>
        </div>
    </x-utility.card>

    <x-utility.card :title="__('ui.variant.danger')">
        <div class="flex flex-wrap items-center gap-3">
            <x-buttons.danger size="sm">{{ __('ui.size.small') }}</x-buttons.danger>
            <x-buttons.danger>{{ __('ui.size.default') }}</x-buttons.danger>
            <x-buttons.danger size="lg">{{ __('ui.size.large') }}</x-buttons.danger>
            <x-buttons.danger :loading="true">{{ __('ui.state.deleting') }}</x-buttons.danger>
        </div>
    </x-utility.card>

    <x-utility.card :title="__('pages/admin/components.buttons.icon_buttons')">
        <div class="flex flex-wrap items-center gap-3">
            <x-buttons.icon variant="primary" :title="__('buttons.edit')">
                <x-heroicon-o-pencil class="h-5 w-5" />
            </x-buttons.icon>
            <x-buttons.icon variant="secondary" :title="__('pages/admin/components.dropdowns.items.settings')">
                <x-heroicon-o-cog-6-tooth class="h-5 w-5" />
            </x-buttons.icon>
            <x-buttons.icon variant="danger" :title="__('buttons.delete')">
                <x-heroicon-o-trash class="h-5 w-5" />
            </x-buttons.icon>
            <x-buttons.icon variant="ghost" :title="__('buttons.more')">
                <x-heroicon-o-ellipsis-horizontal class="h-5 w-5" />
            </x-buttons.icon>
        </div>
    </x-utility.card>

    <x-utility.card :title="__('pages/admin/components.buttons.async_loading')">
        <x-buttons.loading>{{ __('pages/admin/components.buttons.click_to_simulate') }}</x-buttons.loading>
    </x-utility.card>
</x-layouts.admin.component-demo>
@endsection