<template lang="pug">
main.view--surveycomplete
    article(style='display: flex; flex-direction: column; align-items: center; text-align: center;')
        h2 Thanks for Completing Our Survey!!
        h1 Please review your answers and let us know if you need to change anything.
        br
        h1 Your Profile Info:
        div(v-for='(answer, key) in answers')
            span(v-if='answer && key != "aspects"')  Your {{ key }}: {{ answer }}
        br
        div(v-if="answers.aspects")
            h1 Your Survey Answers:
        div(v-for='(aspect, index) in answers.aspects')
            div(v-if='aspect')
                p {{ surveyObjects[index].response_key_prompt }}
                p You Answered:  {{aspect}}
                br
        button(@click="changeAnswers") Change Answers
        br
        button(@click="finalSubmit") Submit Answers
</template>

<script>
export default {
    props: {
        answers: {
            type: Object,
            default: () => ({}),
        },
        surveySteps: {
            type: Array,
            default: () => [],
        },
    },
    data: () => ({
        surveyObjects: [],
    }),
    created() {
        this.surveyObjects = this.surveySteps.slice(-6)
    },
}
</script>
