@extends('layouts.admin.app')

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

@section('content')
<x-layouts.admin.component-demo :title="__('pages/admin/components.nav.modals')">
    <x-utility.card :title="__('pages/admin/components.modals.basic')">
        <p class="mb-4 text-sm text-muted-foreground">
            {{ __('pages/admin/components.modals.descriptions.basic') }}
        </p>
        <x-buttons.primary @click="$dispatch('open-modal', 'demo-modal')">
            {{ __('pages/admin/components.modals.open') }}
        </x-buttons.primary>
    </x-utility.card>

    <x-utility.card :title="__('pages/admin/components.modals.sizes')">
        <div class="flex flex-wrap gap-3">
            <x-buttons.secondary @click="$dispatch('open-modal', 'demo-modal-sm')">{{ __('ui.size.small') }}</x-buttons.secondary>
            <x-buttons.secondary @click="$dispatch('open-modal', 'demo-modal-lg')">{{ __('ui.size.large') }}</x-buttons.secondary>
            <x-buttons.secondary @click="$dispatch('open-modal', 'demo-modal-xl')">{{ __('ui.size.extra_large') }}</x-buttons.secondary>
        </div>
    </x-utility.card>

    <x-feedback.modal id="demo-modal" :title="__('pages/admin/components.modals.headings.confirm_action')">
        <p>{{ __('pages/admin/components.modals.descriptions.basic_body') }}</p>
        <x-slot:footer>
            <x-buttons.secondary @click="$dispatch('close-modal', 'demo-modal')">{{ __('buttons.cancel') }}</x-buttons.secondary>
            <x-buttons.primary @click="$dispatch('close-modal', 'demo-modal')">{{ __('buttons.confirm') }}</x-buttons.primary>
        </x-slot:footer>
    </x-feedback.modal>

    <x-feedback.modal id="demo-modal-sm" :title="__('pages/admin/components.modals.headings.small')" size="sm">
        <p>{{ __('pages/admin/components.modals.descriptions.small') }}</p>
        <x-slot:footer>
            <x-buttons.primary size="sm" @click="$dispatch('close-modal', 'demo-modal-sm')">{{ __('buttons.ok') }}</x-buttons.primary>
        </x-slot:footer>
    </x-feedback.modal>

    <x-feedback.modal id="demo-modal-lg" :title="__('pages/admin/components.modals.headings.large')" size="lg">
        <p>{{ __('pages/admin/components.modals.descriptions.large') }}</p>
        <x-slot:footer>
            <x-buttons.secondary @click="$dispatch('close-modal', 'demo-modal-lg')">{{ __('buttons.close') }}</x-buttons.secondary>
        </x-slot:footer>
    </x-feedback.modal>

    <x-feedback.modal id="demo-modal-xl" :title="__('pages/admin/components.modals.headings.extra_large')" size="xl">
        <p>{{ __('pages/admin/components.modals.descriptions.extra_large') }}</p>
        <x-slot:footer>
            <x-buttons.secondary @click="$dispatch('close-modal', 'demo-modal-xl')">{{ __('buttons.cancel') }}</x-buttons.secondary>
            <x-buttons.primary @click="$dispatch('close-modal', 'demo-modal-xl')">{{ __('buttons.save') }}</x-buttons.primary>
        </x-slot:footer>
    </x-feedback.modal>
</x-layouts.admin.component-demo>
@endsection