<div class="array-input" ...attributes>
    <div class="flex items-center justify-between {{@headerClass}}">
        <div class={{@yieldWrapperClass}}>{{yield this.data}}</div>
        <div class="flex justify-end items-center mb-4">
            <Button @type={{@addButtonType}} @text={{or @addButtonText "Add"}} @icon={{or @addIcon "plus"}} @iconPrefix={{or @addIconPrefix "fas"}} @onClick={{this.addData}} />
        </div>
    </div>
    <div class="bg-white border border-gray-200 rounded shadow-sm dark:bg-gray-800 dark:border-gray-900 text-xs">
        <div class="h-48 overflow-y-scroll rounded">
            {{#each this.data as |datum index|}}
                <div class="flex text-gray-800 border-b border-gray-200 dark:border-gray-900 dark:text-gray-100 relative">
                    <Input @type="text" @value={{datum}} aria-label="Data Input" placeholder={{@placeholder}} {{on "change" (fn this.onChange index)}} {{on "paste" (fn this.onPaste index)}} class="form-input w-full flex-1 border-none shadow-none rounded-none pr-24" {{on "keyup" (fn this.inputDatum index)}} />
                    <div class="absolute right-0 py-2.5 px-4">
                        <button type="button" class="rounded-none border-none bg-transparent shadow-none outline-none text-red-500" {{on "click" (fn this.removeData index)}}>Remove</button>
                    </div>
                </div>
            {{/each}}
        </div>
    </div>
</div>