@props([
    'action',
    'value',
    'table' => null,
    'successMessage' => 'Berhasil diperbarui.',
])

<div
    x-data="inlineEditor({

        value: @js($value),

        table: @js($table),

        successMessage: @js($successMessage)

    })"
>
    <form
        method="POST"
        action="{{ $action }}"
        x-ref="form"
        @submit.prevent="submit"
        class="flex items-center gap-1 justify-center"
    >
        @csrf
        @method('PATCH')

        {{ $slot }}

        <button
            type="submit"
            x-show="value !== initial"
            :disabled="loading"
            x-transition
        >
            <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="green"
                class="size-6"
            >
                <path
                    fill-rule="evenodd"
                    d="M2.25 12c0-5.385
                    4.365-9.75
                    9.75-9.75
                    s9.75 4.365
                    9.75 9.75
                    -4.365 9.75
                    -9.75 9.75
                    S2.25 17.385
                    2.25 12Z"
                />
            </svg>
        </button>

    </form>

</div>