<template>
<router-view></router-view>
<div class="container-fluid">
    <div class="row">
        <div class="col">
            <p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
            <p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <buttonPrimary />
        </div>
    </div>
    <div class="row mt-5">
        <radioCard radioLabel="Windshield" radioImage="windshield-damage.svg" altText="Windshield" groupName="damageKey" radioID="windshield" />
        <radioCard radioLabel="Side Window" radioImage="side-window-damage.svg" altText="Side Window" groupName="damageKey" radioID="sidewindow" />
        <radioCard radioLabel="Back Glass" radioImage="back-glass-damage.svg" altText="Back Glass" groupName="damageKey" radioID="backglass" />
    </div>
    <div class="row">
        <div class="col my-3 d-flex align-items-center">
            <buttonPrimary buttonText="Primary" buttonType="btn-primary" />
        </div>
    </div>
    <div class="row">
        <div class="col my-3 d-flex align-items-center">
            <buttonPrimary buttonText="Primary Focus" buttonType="btn-primary-focus" />
        </div>
    </div>
    <div class="row">
        <div class="col my-3 d-flex align-items-center">
            <buttonPrimary buttonText="Disabled" buttonType="disabled" />
        </div>
    </div>
    <div class="row">
        <div class="col my-3 d-flex align-items-center">
            <a href="#">Text Link</a>
        </div>
    </div>
</div>
</template>

<script>
import buttonPrimary from '@/uxComponents/buttonPrimary/buttonPrimary';
import radioCard from '@/uxComponents/radioCard/radioCard';
export default {
    name: 'App',
    components: {
        buttonPrimary,
        radioCard
    }
}
</script>
