<template>
  <div class="container-fluid container-shadow p-2 rounded-3">
    <div class="row my-4">
      <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">Radio Card</h4>
      </div>
    </div>
    <div class="row g-2">
      <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 my-4">
      <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
      </div>
    </div>
    <div class="row">
      <div class="col my-3 d-flex align-items-center">
        <buttonPrimary
        buttonText="Primary"
        />
      </div>
    </div>
    <div class="row">
      <div class="col my-3 d-flex align-items-center">
        <buttonSecondary
        buttonText="Secondary"
        />
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">List Button</h4>
      </div>
    </div>
    <div class="row">
      <div class="col my-3 d-flex align-items-center">
        <listButton
        buttonText="List Button"
        errorText="Test error message"
        />
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">Radio Button Group</h4>
      </div>
    </div>
    <div class="row">
      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
      <div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
        <h3 class="visually-hidden" id="select-year-radio-group">Select Vehicle Year</h3>
        <radioList
        groupName="demo"
        ariaLabelBy="vehicle-year"
        radioID="2021"
        errorMessage="Test error message"
        />
        <radioList
        groupName="demo"
        ariaLabelBy="vehicle-year"
        radioID="2020"
        errorMessage="Test error message"
        />
        <radioList
        groupName="demo"
        ariaLabelBy="vehicle-year"
        radioID="2019"
        errorMessage="Test error message"
        />
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
      </div>
    </div>
    <div class="row">
      <div class="col my-3 d-flex align-items-center">
        <a href="#">Text Link</a>
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">Typogrophy</h4>
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <p>This is default body copy font size/weight</p>
        <p class="small">This is small body copy using <code>.small</code> class</p>
        <p><small>This is also small using <code>&lt;small&gt;</code> tag</small></p>
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">Headings</h4>
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <h1>h1 Heading</h1>
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <h2>h2 Heading</h2>
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <h3>h3 Heading</h3>
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <h4>h4 Heading</h4>
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <h5>h5 Heading</h5>
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <h6>h6 Heading</h6>
      </div>
    </div>
    <div class="row">
      <div class="col my-3 d-flex align-items-center">
        <vehicle-banner
          :isBlurred="true"
          carId=""
        />
        <vehicle-banner
          carId="00test00"
        />
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
          <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <alert
        alertClass="alert-success"
        alertHeadline="Dismissible Alert"
        alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
        v-bind:isDismissible = "true"
        />
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <alert
        alertClass="alert-danger"
        alertHeadline="NON-Dismissible Alert"
        alertCopy="This is an example of a NON-DISMISSIBLE alert."
        v-bind:isDismissible = "false"
        />
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <alert
        alertClass="alert-warning"
        alertHeadline="Warning Alert"
        alertCopy="This is an example of a WARNING alert."
        v-bind:isDismissible = "false"
        />
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <alert
        alertClass="alert-info"
        alertHeadline="Info Alert"
        alertCopy="This is an example of a INFO alert."
        v-bind:isDismissible = "false"
        />
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <alert
        alertClass="alert-danger"
        alertHeadline="Danger Alert"
        alertCopy="This is an example of a DANGER alert."
        v-bind:isDismissible = "false"
        />
      </div>
    </div>
    <div class="row my-2">
      <div class="col">
        <alert
        alertClass="alert-success"
        alertHeadline="No Body Copy Alert"
        alertCopy=""
        v-bind:isDismissible = "false"
        />
      </div>
    </div>
  </div>
</template>

<script>
import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
import buttonSecondary from "@/uxComponents/buttonSecondary/buttonSecondary";
import radioCard from "@/uxComponents/radioCard/radioCard";
import listButton from "@/uxComponents/listButton/listButton";
import vehicleBanner from "@/commonComponents/vehicleBanner/vehicleBanner";
import radioList from "@/uxComponents/radioList/radioList";
import alert from "@/uxComponents/alert/alert";

export default {
  name: "App",
  components: {
    buttonPrimary,
    buttonSecondary,
    radioCard,
    listButton,
    vehicleBanner,
    radioList,
    alert
  },
  data() {
    return {
      years: [2023, 2022, 2021, 2020],
    };
  }
};
</script>
