{{t "component.comment-thread.comment-published-ago" createdAgo=this.comment.createdAgo}}

<div class="flex flex-row items-center justify-end space-x-2 mt-2">
                    <Button @type="link" @buttonType="button" @size="xs" @text={{t "common.cancel"}} @onClick={{this.cancelEdit}} @disabled={{not this.updateComment.isIdle}} />
                    <Button
                        @type="primary"
                        @buttonType="button"
                        @icon="save"
                        @size="xs"
                        @iconSize="xs"
                        @iconClass="text-xs"
                        @text={{t "common.save"}}
                        @onClick={{perform this.updateComment}}
                        @disabled={{or (not this.updateComment.isIdle) (not this.comment.content)}}
                    />
                </div>
            {{else}}
                <p class="thread-comment-conent-paragraph text-xs text-gray-900 dark:text-gray-100">{{this.comment.content}}</p>
            {{/if}}
        </div>
        <div class="thread-comment-conent-actions-wrapper flex flex-row items-center mt-2 space-x-4">
            <Button
                @wrapperClass="thread-comment-conent-actions-reply"
                @type="link"
                @buttonType="button"
                @size="xs"
                @iconSize="xs"
                @textClass="text-xs"
                @icon="reply"
                @text={{t "component.comment-thread.reply-comment-button-text"}}
                @onClick={{this.reply}}
            />
            {{#if this.comment.editable}}
                <Button
                    @wrapperClass="thread-comment-conent-actions-edit"
                    @type="link"
                    @buttonType="button"
                    @size="xs"
                    @iconSize="xs"
                    @textClass="text-xs"
                    @icon="edit"
                    @text={{t "component.comment-thread.edit-comment-button-text"}}
                    @onClick={{this.edit}}
                />
                <Button
                    @wrapperClass="thread-comment-conent-actions-delete"
                    @type="link"
                    @buttonType="button"
                    @size="xs"
                    @iconSize="xs"
                    @iconClass="text-xs text-danger"
                    @textClass="text-xs text-danger"
                    @icon="trash"
                    @text={{t "component.comment-thread.delete-comment-button-text"}}
                    @onClick={{this.delete}}
                />
            {{/if}}
        </div>
        {{#if this.replying}}
            <div class="flex flex-col mt-3">
                <Textarea
                    @value={{this.input}}
                    class="form-input w-full"
                    placeholder={{t "component.comment-thread.comment-reply-placeholder"}}
                    rows={{2}}
                    disabled={{not this.publishReply.isIdle}}
                />
                <div class="flex flex-row items-center justify-end space-x-2 mt-2">
                    <Button @type="link" @buttonType="button" @size="xs" @text={{t "common.cancel"}} @onClick={{this.cancelReply}} @disabled={{not this.publishReply.isIdle}} />
                    <Button
                        @type="primary"
                        @buttonType="button"
                        @icon="reply"
                        @size="xs"
                        @iconSize="xs"
                        @iconClass="text-xs"
                        @text={{t "component.comment-thread.publish-reply-button-text"}}
                        @onClick={{perform this.publishReply}}
                        @disabled={{or (not this.publishReply.isIdle) (not this.input)}}
                    />
                </div>
            </div>
        {{/if}}
        <div class="thread-comment-replies mt-3">
            {{#each this.comment.replies as |reply|}}
                {{#if (has-block)}}
                    {{yield (component "comment-thread/comment" comment=reply) reply}}
                {{else}}
                    <CommentThread::Comment @comment={{reply}} />
                {{/if}}
            {{/each}}
        </div>
    </div>
</div>