<template v-if="isCmsContentReady">
<div class="select-car">
    <div class="select-car-form rounded text-center">
        <vehicleBanner />
        <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
        <yearQuestion :questionText="radioQuestionWidgets.QuestionText" />
    </div>
</div>
</template>

<script>
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
import pageHeader from "@/ux-components/header/header";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";

export default {
    name: "vehicle-year",
    data() {
        return {
            pageHeaderWidgets: {},
            radioQuestionWidgets: {},
        };
    },
    computed: {},
    async created() {
        const pageContent = await this.GetContentFromCms();

        this.pageHeaderWidgets = pageContent.PageHeaderWidget[0];
        this.radioQuestionWidgets = pageContent.RadioQuestionWidget[0];
    },
    components: {
        yearQuestion,
        pageHeader,
        vehicleBanner,
    },
};
</script>

<style lang="scss">
    .select-car {
        height: calc(100vh - 1rem);

        .car_list {
        // Height will be determined by overall height of content above list
        height: calc(100% - 260px);
        width: calc(100% - 1rem);
        }
    }
</style>