<template>
<router-view></router-view>
  <div class="container-fluid">
    <div class="row">
      <div class="col my-3 d-flex justify-content-center">
        <vehicleImage/>
      </div>
    </div>
    <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">
        <buttonFunnel/>
        <confetti/>
      </div>
    </div>
    <div class="row mt-5">
      <imageButton
        btnText="windshield-damage.svg"
        altText="Windshield"
        damageTitle="Windshield"
        ariaLabel="Windshield"
      />
      <imageButton
        btnText="side-window-damage.svg"
        altText="Side Window"
        damageTitle="Side door"
        ariaLabel="Side door"
      />
      <imageButton
        btnText="back-glass-damage.svg"
        altText="Back Glass"
        damageTitle="Back glass"
        ariaLabel="Back glass"
      />
    </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 buttonFunnel from './components/buttons/buttonFunnel';
  import vehicleImage from './components/vehicleImage';
  import imageButton from './components/imageButton';
  import confetti from './components/confetti';
  import buttonPrimary from './components/buttons/buttonPrimary';
  import radioCard from './components/forms/radioCard';


  export default {
    name: 'App',
    components: {
      buttonFunnel,
      vehicleImage,
      imageButton,
      confetti,
      buttonPrimary,
      radioCard
    }
  }
</script>
