<script>
    import Content from '@/components/Content.vue'
    import Header from '@/components/Header.vue'
    import TextFrame from '@/components/TextFrame.vue'
    import { useAppStore } from '@/stores/app.js'

    export default {
        setup() {
            const appStore = useAppStore()

            return {
                appStore
            }
        },
        name: 'Scores',
        components: {
            Content,
            Header,
            TextFrame
        }
    }
</script>
<template>
    <TextFrame>
        <Header>
            Your Scores
        </Header>
        <Content>
            <p class="text-leader">
                While the playbook you are is the one most reflected by your answers, here are the other playbooks and the extent to which they have a bearing upon your journey.
            </p>
            <table class="table-auto w-full max-w-sm mx-auto text-left">
                <thead class="text-xs text-gray-700 uppercase bg-lime-100 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th class="pl-10">
                            Playbook
                        </th>
                        <th>
                            Score
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(score, playbook, index) in this.appStore.results.all_playbooks" :key="playbook" class="hover:bg-yellow-50" :class="index % 2 == 0? `bg-lime-50 border-b dark:bg-gray-900 dark:border-gray-700` : `bg-lime-100 border-b dark:bg-gray-800 dark:border-gray-700`">
                        <td scope="col" class="py-1 pl-10 capitalize">
                            The {{ playbook }}
                        </td>
                        <td scope="col" class="py-1">
                            {{ Math.round(100*score/this.appStore.results.max_score) }} &#x25;
                        </td>
                    </tr>
                </tbody>
            </table>
        </Content>
    </TextFrame>
</template>