<template>
    <div class="container-xxl flex-grow-1 container-p-y">
        <search-bar />

        <div class="row g-3">
            <div class="mt-8">
                <router-link to="/board/write">
                    <button type="button" class="btn btn-primary float-end">글쓰기</button>
                </router-link>
            </div>
            <template v-for="(item, index) in list" :key="item.id">
                <board-card :item="item" @click="goDetail(item.id)">
                    <template #optInfo>
                        <span v-show="item.viewCount" style="padding-left: 10px" class="text-muted"
                            ><i class="fa-regular fa-eye"></i> {{ item.viewCount }}</span
                        >
                        <span v-show="item.cmtCount" style="padding-left: 10px" class="text-muted"
                            ><i class="fa-regular fa-comment-dots"></i> {{ item.cmtCount }}
                        </span>
                    </template>
                </board-card>
            </template>
            <div class="mt-8">
                <pagination />
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
    import BoardCard from '@/components/list/BoardCard.vue';
    import Pagination from '@/components/pagination/Pagination.vue';
    import SearchBar from '@/components/search/SearchBar.vue';
    import router from '@/router';
    import dummy from '@a/boardDummy.json';

    const list = ref(dummy);

    /** 상세로 이동 */
    const goDetail = idx => {
        router.push(`/board/get/${idx}`);
    };
</script>

<style></style>
