<script>
    import Sidebar from '@/components/sidebar/Index.vue'
    import { useResultsStore } from '@/stores/results.js'

    export default {
        setup() {
            const resultsStore = useResultsStore()

            return {
                resultsStore
            }
        },
        name: 'ResultsIndex',
        components: {
            Sidebar
        },
        created() {
            if (this.resultsStore.results.playbooks.length > 1) {
                this.$router.options.routes[3].children[0].meta.title = 'Your Results'
            } else {
                this.$router.options.routes[3].children[0].meta.title = 'Your Result'
            }
        }
    }
</script>
<template>
    <div>
        <div class="flex flex-col space-y-3 md:flex-row md:space-x-6 md:space-y-0">
            <div class="flex flex-col w-full md:w-1/3 h-fit">
                <Sidebar :prefix="$router.options.routes[3].path" :routes="$router.options.routes[3].children">
                    <template v-slot:header>
                        Results
                    </template>
                </Sidebar>
            </div>
            <div class="flex w-full md:w-2/3">
                <router-view v-slot="{ Component, route }" class="w-full" ref="panel" appear>
                    <Transition mode="out-in"
                        :enter-active-class="route.meta.panelEnterActiveClass"
                        :enter-from-class="route.meta.panelEnterFromClass"
                        :leave-active-class="route.meta.panelLeaveActiveClass"
                        :leave-to-class="route.meta.panelLeaveToClass"
                    >
                        <component :is="Component" />
                    </Transition>
                </router-view>
            </div>
        </div>
    </div>
</template>