@props([
    'dataKey' => $dataKey,
    'requestKey' => $dataKey,
    'mediaCollection' => $mediaCollection,
    'buttonLabel' => $buttonLabel,
    'assetDisplayLabel' => $assetDisplayLabel,
])

<div x-cloak x-data="{
    ids: [],
    urls: [],
    addImage(id, url) {
        this.ids.push(id);
        this.urls.push(url)
    },
    $dataKey: false
}">
    <button @click="$dataKey = !$dataKey" type="button"
        class="flex items-center justify-center px-3 py-2 space-x-2 text-sm tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-500 rounded-md dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:bg-indigo-700 hover:bg-indigo-600 focus:outline-none focus:bg-indigo-500 focus:ring focus:ring-indigo-300 focus:ring-opacity-50">
        <span>{{ $buttonLabel }}</span>
    </button>
    <p>{{ $assetDisplayLabel }}</p>
    <input type="hidden" name="{{ 'media[' . $requestKey . ']' }}" x-bind:value="ids" />

    <template x-for="url in urls">
        <img x-bind:src="url" alt="" width="100" />
    </template>

    <x-modal modelVar="$dataKey">
        <ul>
            @foreach ($mediaCollection as $media)
                <li>
                    <img src="{{ $media->get_thumb_url }}" width="100" data-media-id="{{ $media->id }}"
                        @click="addImage('{{ $media->id }}', '{{ $media->get_thumb_url }}')" />
                </li>
            @endforeach
        </ul>
    </x-modal>
</div>