@php
    $produsInfo = html_entity_decode($produsInfo);
    $produsInfo = json_decode($produsInfo, true);
@endphp
<div class="relative text-left p-8 rounded-xl hover:ring-2 ring-[#A4C843] {{ $produsInfo['variant'] == 1 ? 'bg-[#F9FAFB]' : 'bg-[#A4C843]' }} flex flex-col space-y-4">
    <div class="produs-details relative">
        <div class="flex flex-row space-x-6 items-center">
            <div>
                {{ $image ?? 'image' }}
            </div>
            <div class="flex flex-col">
                <div class="text-4xl uppercase font-extrabold">
                    {{ $heading ?? 'heading' }}
                </div>
            </div>
        </div>
        <div class="font-extrabold">
            {{ $produsInfo['heading'][0] }}
        </div>
        <div style="display: none" class=" max-h-[60%] h-[12rem] h-3/5_ overflow-hidden"></div>
        {{-- <div class="{{ $produsInfo['variant'] !== 1 ? 'text-white' : '' }}" :class="toggleProdus ? 'h-full' : 'h-[12rem] overflow-hidden'"> --}}
        <div class="{{ $produsInfo['variant'] !== 1 ? 'text-white' : '' }} relative overflow-hidden transition-all max-h-[17rem] duration-700" ref="produscontainer" v-bind:style="toggleProdus == 1 ? 'max-height: ' + $refs.produscontainer.scrollHeight + 'px' : ''">
            <div class="flex flex-col space-y-2 text-sm_">
                @php
                    $count = 0;
                @endphp
                @foreach ($produsInfo['features'] as $feature)
                    <div class="flex flex-row space-x-2 items-baseline">
                        <div class="h-max">
                            <img src="{{ asset('autoreg_assets\check.png') }}" alt="" class="h-2">
                        </div>
                        <div>
                            {{ $feature }}
                        </div>
                    </div>
                    @php
                        $count++
                    @endphp
                @endforeach
            </div>
        </div>
        <div v-if="!toggleProdus" class="absolute right-0 h-2/5 w-full bottom-0 bg-gradient-to-t {{ $produsInfo['variant'] == 1 ? 'from-[#F9FAFB]' : 'from-[#A4C843]' }} to-transparent">
        </div>
    </div>
    <div class="flex flex-row space-x-4 justify-start">
        <button @@click="openForm('{{ json_encode($produsInfo) }}')" class="w-max text-center align-middle py-3 px-12 {{ $produsInfo['variant'] == 1 ? 'bg-[#A4C843]' : 'bg-[#38646F] text-white' }} hover:bg-[#38646F] hover:text-white">
            ALEGE PLAN
        </button>
        <button class="w-max text-center align-middle py-3 px-12 border-2 border-[#38646F] hover:bg-[#38646F] hover:text-white" @@click="toggleProdus = !toggleProdus">
            <span v-if="toggleProdus">
                Închide -
            </span>
            <span v-else>
                Compară +
            </span>
        </button>
    </div>
</div>