{{ user:can do="Moderar catálogos" }}      
<div class="absolute right-0 top-0 rounded "  >
   
    {{ svg src="agregar_comentario" class="h-6 w-6 cursor-pointer" @click="showCommentModal = ! showCommentModal"  }}

</div>
<div  x-data="{comment: ''}"   @click.away="showCommentModal = false"  x-show="showCommentModal" x-transition class="z-20 absolute rounded-3xl bg-tertiary dark:bg-darkTertiary font-normal shadow-lg  right-0 -top-30 p-5">
    <div><span class="font-semibold">{{request.user.get_full_name}}</span></div>
    <div class="cl-input-container mb-2">
        <textarea name="comments_field" id="comments_field"  class="cl-select !w-72 placeholder:font-thin" rows="4"  x-model="comment" placeholder="Deja tus comentarios y observaciones"></textarea>

    </div>

    <div class="flex justify-center ">
        <button x-on:click.prevent="showCommentModal = false;" class="mr-2 bg-secondary hover:bg-opacity-80 text-white py-1 px-4">Cancelar</button>
        <button x-on:click.prevent.throttle.5000ms="await agregarComentarioCampo('{{bs_id}}', field, comment); comment = ''; showCommentModal = false;" class="bg-accent hover:bg-opacity-80 text-white py-1 px-4">Comentar</button>
    </div>
</div>  

{{ /user:can }}



<!-- COMENTARIOS  -->
<div x-show="commentHasField(field)" x-transition>
    <!-- Mostrar el SVG una vez si hay algún comentario que coincida -->
    <div x-show="servicio_beneficio.comentarios.filter(comentario => comentario.campo == field).length > 0" x-transition>
        <div  x-data="{showComments:false}" class="absolute right-0 md:-right-12 -top-1">

            {{ svg src="comentarios" class="z-0 h-8 w-8 cursor-pointer text-orange-600" @click="showComments = ! showComments"  }}

            <div x-show="showComments" x-transition class="z-40 ml-2 absolute -right-24 xl:-right-56 2xl:-right-80 flex flex-col space-y-2 ">
                <!-- Mostrar todos los comentarios que coinciden -->
                <template x-for="comentario in servicio_beneficio.comentarios" :key="comentario.fecha">
                    <template x-if="comentario.campo == field"> 
                        <div class=" rounded-xl bg-tertiary dark:bg-darkTertiary shadow-lg  p-5 relative">
                            <div class="flex flex-row justify-between">
                                <span class="font-semibold"  x-text="comentario.usuario_full_name"></span>
                                <svg @click="showComments=false" class="h-4 w-4 cursor-pointer" viewBox="-0.5 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                    
                                    <path d="M3 21.32L21 3.32001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M3 3.32001L21 21.32" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> 
                        
                                </svg>
                            
                            </div>
                            <p><small class="font-light" x-text="new Date(comentario.fecha).toLocaleString()"></small></p>

                            <p class="font-light rounded-md p-1.5 my-2 w-60 2xl:w-72" x-text="comentario.comentario"></p>
                            
                            {{ user:can do="Moderar catálogos" }}                  

                            <button @click.prevent="mostrarModalConfirmarEliminarComentario = true;selectedComentario = comentario.id" class="text-accent absolute right-5 bottom-5">

                                {{ svg src="basura" class="h-5 w-5 cursor-pointer" @click="mostrarModalConfirmarEliminarComentario = ! mostrarModalConfirmarEliminarComentario"  }}

                            </button>
                            {{ /user:can }}              

                        </div>
                    </template>
                </template>
            </div>
        </div>
    </div>
</div>