@props(['question', 'pos_action', 'neg_action', 'identifier', 'color'])
<div class="fixed inset-0 z-50 w-screen h-screen p-3 overflow-y-auto bg-opacity-50 backdrop-blur-sm">
    <div
        class="fixed items-center justify-center p-5 m-auto space-y-3 overflow-y-auto bg-white rounded-lg shadow-lg md:w-1/5 inset-2 max-h-min md:p-10">
        <div>
            <div class="flex items-center mx-10 my-2 text-lg">
                <p class="">{{ $question }} <span class="px-1 font-semibold">{{ $identifier }}</span>?</p>
            </div>
            <div class="flex items-center justify-between mx-10">
                <button wire:click.prevent = '{{ $pos_action }}'
                    class="px-2 py-2 border-2 border-white rounded-lg bg-green-50 md:px-4">
                    <i class="text-green-600 ri-check-line"></i>
                    <span>Yes</span>
                </button>
                <button wire:click.prevent = '{{ $neg_action }}'
                    class="px-2 py-2 border-2 border-white rounded-lg bg-red-50 md:px-4">
                    <i class="text-red-600 ri-close-line"></i>
                    <span>No</span>
                </button>
            </div>
        </div>
    </div>
</div>