<div data-timestamp="{{timestamp}}" class="group">
    <div class="chat chat-start">
        <div class="message chat-bubble rounded-lg text-base">
            {{message}}
            <div class="attachmentsContainer grid gap-2 mt-2 grid-cols-[repeat(auto-fit,minmax(5rem,1fr))] max-w-[20rem]"></div>
        </div>
    </div>
    <div class="flex">
        <span class="text-base-content opacity-50 text-sm ml-4">{{date}}</span>
        <div class="hidden group-hover:flex badge rounded-lg w-20 ml-4 gap-0 p-0">
            <button onclick="attachDeleteMessageEvent(this)" class="deleteMessageBtn flex justify-center items-center flex-1 pt-1 pb-1 rounded-tl-lg rounded-bl-lg h-full hover:bg-base-300 transition">
                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" class="h-4 fill-current text-base-content">
                    <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/>
                </svg>
            </button>
            <button onclick="attachEditMessageEvent(this)" class="editMessageBtn flex justify-center items-center flex-1 pt-1 pb-1 rounded-tr-lg rounded-br-lg h-full hover:bg-base-300 transition">
                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" class="h-4 fill-current text-base-content">
                    <path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/>
                </svg>
            </button>
        </div>
    </div>
</div>