Form Sheet Demo

<x-e::form>
    <x-e::form.sheet>
        <x-e::form.sheet.header class="col-span-4">Name</x-e::form.sheet.header>
        <x-e::form.sheet.header class="col-span-3">Email address</x-e::form.sheet.header>
        <x-e::form.sheet.header class="col-span-3">URL</x-e::form.sheet.header>
        <x-e::form.sheet.header class="col-span-2">Actions</x-e::form.sheet.header>


        {{-- existing items --}}

        @foreach($items as $index => $item)
        <x-e::form.sheet.display class="col-span-4" value="{{ $item['name'] }}" />
        <x-e::form.sheet.display class="col-span-3" value="{{ $item['email'] }}" />
        <x-e::form.sheet.display class="col-span-3" value="{{ $item['url'] }}" />
        <x-e::form.sheet.actions class="col-span-2">
            <x-e::form.sheet.action wire:click.prevent="remove_item({{ $index }})"
                title="Remove this item"
                type="danger" icon="heroicon-o-minus"
                    />
        </x-e::form.sheet.actions>
        @endforeach

        {{-- new item --}}

        <x-e::form.sheet.text class="col-span-4" wire:model.blur="name" />
        <x-e::form.sheet.text class="col-span-3" wire:model.blur="email" />
        <x-e::form.sheet.text class="col-span-3" wire:model.blur="url" />
        <x-e::form.sheet.actions class="col-span-2">
            <x-e::form.sheet.action wire:click.prevent="add_item"
                title="Add this item"
                type="info" icon="heroicon-o-plus"
            />
            <x-e::form.sheet.action wire:click.prevent="add_item('random')"
                title="Add a random item"
                type="info" icon="heroicon-o-cube-transparent"
            />
        </x-e::form.sheet.actions>

    </x-e::form.sheet>
</x-e::form>
<div class="p-8 pt-2">
    <livewire:euikit-sheetimport :fields="$fields" />
    </div>
</div>