1<x-card class="px-5 py-2" title="Personal Information" secondary>
 2    <x-errors class="mb-4" />
 3 
 4    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
 5        <x-input label="First Name" placeholder="First Name" wire:model="form.first_name" />
 6 
 7        <x-input label="Last Name" placeholder="Last Name" wire:model="form.last_name" />
 8 
 9        <div class="col-span-1 space-y-6 sm:col-span-2 sm:grid sm:grid-cols-7 sm:gap-5 sm:space-y-0">
10            <div class="col-span-1 sm:col-span-4">
11                <x-input label="Email" placeholder="[email protected]" wire:model="form.email" />
12            </div>
13 
14            <div class="col-span-1 sm:col-span-3">
15                <x-phone label="Phone" placeholder="Phone" wire:model="form.phone" />
16            </div>
17        </div>
18 
19        <x-select label="Country" placeholder="Country" wire:model="form.country" :options="$countries" />
20 
21        <x-datetime-picker label="Birthdate" placeholder="Birthdate" wire:model="form.birthdate" />
22 
23        <div class="col-span-1 sm:col-span-2">
24            <x-input label="Street Address" placeholder="Street Address" wire:model="form.street" />
25        </div>
26 
27        <div class="col-span-1 space-y-6 sm:space-y-0 sm:col-span-2 sm:grid sm:grid-cols-3 sm:gap-6">
28            <x-input label="City" placeholder="City" wire:model="form.city" />
29 
30            <x-input label="State" placeholder="State" wire:model="form.state" />
31 
32            <x-input label="Postal Code" placeholder="Postal Code" wire:model="form.postal_code" />
33        </div>
34 
35        <x-toggle label="Accept the terms and conditions" wire:model="form.terms" />
36    </div>
37 
38    <x-slot name="footer" class="flex items-center justify-end gap-x-3">
39        <x-button wire:click="cancel" label="Cancel" teal flat />
40 
41        <x-button wire:click="save" label="Save" spinner="save" teal />
42    </x-slot>
43</x-card>