@props([
    'action',
    'field',
    'value' => null,
    'table' => null,
    'options' => [],
    '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 flex-col gap-2"
    >
        @csrf
        @method('PATCH')

        <select

            x-model="value"

            name="{{ $field }}"

            {{ $attributes->merge([
                'class' => 'form-select border border-gray-300 rounded-md shadow-sm p-1'
            ]) }}

        >

            @foreach($options as $key => $label)

                <option
                    value="{{ is_string($key) ? $key : $label }}"
                >
                    {{ $label }}
                </option>

            @endforeach

        </select>

        {{ $slot }}

        <button
            type="submit"
            x-show="canSubmit"
            :disabled="loading"
            x-transition
            class="bg-green p-0.5 rounded-md text-white hover:opacity-75 focus:outline-none w-min self-end disabled:opacity-50 disabled:cursor-not-allowed"
        >
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3 h-3">
                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
            </svg>
        </button>

    </form>
</div>