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

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

            return {
                resultsStore
            }
        },
        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">
                    <tr>
                        <th class="pl-10">
                            Playbook
                        </th>
                        <th>
                            Score (&#x25;)
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(score, playbook, index) in this.resultsStore.results.all_playbooks" :key="playbook" class="hover:bg-yellow-50" :class="index % 2 == 0? `bg-lime-50 border-b` : `bg-lime-100 border-b`">
                        <td scope="col" class="py-1 pl-10 capitalize">
                            The {{ playbook }}
                        </td>
                        <td scope="col" class="py-1">
                            {{ Math.round(100*score/this.resultsStore.results.max_score) }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </Content>
    </TextFrame>
</template>