<template>
    <div class="row w-100">
        <div class="col">
            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
            <!-- <div class="row justify-content-center padding-30" v-show="!isLoading"> -->
            <div class="row justify-content-center flex-column bg-white rounded padding-30" v-show="!isLoading">
                <h4 class="m-b-20">Remarks</h4>
                <div class="col">
                    <div class="row" v-for="remark in data.remarks">
                        <div class="col">
                            <remark-list-component :section="section" :data="remark"></remark-list-component>
                        </div>
                    </div>
                    <div class="row align-items-center justify-content-center p-t-50 p-b-50" v-if="!data.remarks.length">
                        <div class="col-10">
                            <div class="row align-items-center justify-content-center  hint-text">
                                <div class="col-4 hint-text">
                                    <img :src="asset('images/not-found-illustration.png')" class="w-100 hint-text" />
                                </div>
                            </div>
                            <div class="row text-center">
                                <div class="col">
                                    <div class="row m-t-20">
                                        <div class="col">
                                            <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing To Show Here Yet!</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <remark-comment-form-component :section="section" :module_type="module_type" :id="data.id"></remark-comment-form-component>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useFormHandler } from '@/composables/useFormHandler';

const props = defineProps<{
    section: string;
    module_type: string;
    data: any;
}>();

const { isLoading } = useFormHandler(props);

const asset = (path: string) => (window as any).Vapor.asset(path);
</script>
