<template>
    <div class="row m-b-20 parentContainer">
        <div class="col">
            <div class="row justify-content-center align-items-center">
                <div class="hide col-auto btn-rounded padding-10 d-flex justify-content-center align-items-center bg-master-lighter" style="width: 30px;height: 30px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.14);">
                    <span class="bold">{{item.commenter.name.substr(0, 1)}}</span>
                </div>
                <div class="col">
                    <div class="row">
                        <div class="col-auto">
                            <p class="no-margin muted bold fs-14">{{item.commenter.name}}</p>
                        </div>
                        <div class="col-auto">
                            <span class="fs-12 muted normal">{{item.long_ago}}</span>
                        </div>
                        <div class="col d-flex justify-content-end">
                            <div class="row">
                                <div class="col p-t-5 p-b-5 b-a b-grey">
                                    <div class="row" v-if="!isEdit">
                                        <div class="col">
                                            <i class="fa fa-edit pointer" @click="isEdit = !isEdit"></i>
                                        </div>
                                        <div class="col">
                                                <div class="requestModal pointer" data-type="deleteComment">
                                                <i class="fa fa-trash"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" v-if="isEdit">
                                        <div class="col">
                                            <i class="fa fa-times pointer" @click="isEdit = !isEdit"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <p v-if="!isEdit">{{item.content}}</p>
                    <container-comment-form-component :section="section" :data="item" :id="item.owner_id" v-on:submit="isEdit=false" v-if="isEdit"></container-comment-form-component>
                </div>
            </div>

            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteComment">
                <delete-container-comment-form-component :section="section" :data="item"></delete-container-comment-form-component>
            </modal-component>
        </div>  
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';

    export default {
        props: {
            section: {
                type: String,
                required: true,
            }  
        },
        data(){
            return {
                isEdit: false,
            }
        },
        mixins: [componentHandler]
    }
</script>
