Untitled

<div
    x-data="{
      timestamp : $wire.entangle('form.timestamp').defer,
    }"
    @update-file-timestamp.window="timestamp = $event.detail"
    class="mt-auto flex-shrink-0"
>
    <div>
        @if($replyComment)
            <div class="p-2 bg-gray-200 rounded-md">
                <div class="flex items-center justify-between ">
                    <div class="text-gray-700 text-sm"> Replying to <span
                            class="font-bold">{{ $replyComment->user->name }}:</span></div>
                    <a href="#" wire:click.prevent="resetComment()">
                        <x:icons.x class="w-5 h-5 text-gray-500"/>
                    </a>
                </div>
                <div class="mt-1 text-sm text-gray-700">
                    <p>
                        {!! $replyComment->rich_text !!}
                    </p>
                </div>
            </div>
        @endif
    </div>

    <form wire:submit.prevent="submit" class="{{ $replyComment ? 'pt-1' : 'pt-2' }}">
        <div class="relative">
            <div
                class="bg-white shadow-sm overflow-hidden object-cover">
                <x-form.trix wire:model="comment" without-border/>

                <div class="flex pl-2 justify-between">
                    <label
                        title="Mark as checked to comment for link."
                        x-data="{ value : @entangle('isLinkComment').defer }"
                        class="flex items-center gap-2 rounded-md">

                        <x-form.input-checkbox x-model="value" value="1"/>

                        <span
                            :class="{ 'text-gray-400' : !value, 'text-gray-900' :value }"
                            class="text-sm flex items-center">
                            <x:icons.clock class="h-4 w-4 mr-1"/>
                            <span class="" x-text="Math.floor(timestamp / 60) "></span>:
                            <span class=""
                                  x-text="parseInt(timestamp - (Math.floor(timestamp / 60) * 60)).toString().padStart(2,'0')"></span>
                        </span>
                    </label>

                    <div class="mx-2 border-b border-gray-200"></div>
                    <div class="flex float-right items-center m-2 space-x-2">
                        <div class="flex justify-end">
                            <x:buttons.secondary
                                value="Cancel" class="border-gray-100 bg-gray-100 text-gray-400 text-sm">
                            </x:buttons.secondary>
                        </div>
                        <div class="flex justify-end">
                            <x:buttons.primary
                                value="Submit" class="text-sm font-normal">
                                Submit
                            </x:buttons.primary>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>