<div x-data="{ dialog: '' }">
    <x-portal::button variant="outline" x-on:click="dialog='edit-profile'">
        Edit Profile
    </x-portal::button>

    <x-portal::dialog id="edit-profile" dismissible>
        <x-portal::dialog.header>
            <x-portal::dialog.title>Edit profile</x-portal::dialog.title>
            <x-portal::dialog.description>
                Make changes to your profile here. Click save when you're done.
            </x-portal::dialog.description>
        </x-portal::dialog.header>
        <x-portal::dialog.content>
            
            <div class="grid gap-4 py-4">
                <div class="grid grid-cols-4 items-center gap-4">
                    <x-portal::form.label>Name</x-portal::form.label>
                    <div class="col-span-3">
                        <x-portal::input type="text" placeholder="Name" name="name"
                            value="Pedro Duarte" />
                    </div>
                </div>
                <div class="grid grid-cols-4 items-center gap-4">
                    <x-portal::form.label>Username</x-portal::form.label>
                    <div class="col-span-3">
                        <x-portal::input type="text" placeholder="Username" name="username"
                            value="@peduarte" />
                    </div>
                </div>
            </div>
            
        </x-portal::dialog.content>
        <x-portal::dialog.footer>
            <x-portal::button variant="outline" x-on:click="dialog=''">
                Cancel
            </x-portal::button>
            <x-portal::button type="submit" x-on:click="dialog=''">
                Save Changes
            </x-portal::button>
        </x-portal::dialog.footer>
    </x-portal::dialog>
</div>