@props(['profile', 'actionLink', 'backLink'])

<x-dashboard.card class="w-full">
    <h3 class="text-md font-bold">Profile Information</h3>
    <form method="post" enctype="multipart/form-data" action="{{$actionLink}}"
          class="flex flex-col space-y-8 mt-4">
        @csrf
        @method('PATCH')

        <x-ui.input name="name" label="Name" :value="$profile->name" required placeholder="e.g. John Doe"/>

        <x-ui.textarea :value="$profile->type->bio" name="bio" label="Bio" required
                       placeholder="Describe yourself in detail..."/>

        <x-ui.input name="email" label="Email" :value="$profile->email" required
                    placeholder="example@email.com"/>

        <x-ui.input name="phone" label="Phone" :value="$profile->type->phone" required placeholder="+00 00000 00000"/>

        <x-ui.input name="location" label="Location" :value="$profile->type->location" required
                    placeholder="Kolkata, India"/>

        <div class="grid md:grid-cols-12 w-full gap-4">
            <x-ui.button variant="neutral" class="md:col-span-10">Update</x-ui.button>
            <x-ui.button :link="$backLink"
                         class=" border border-accent-600/20 md:col-span-2">Cancel
            </x-ui.button>
        </div>
    </form>
</x-dashboard.card>