<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">List Card</h4>
      </div>
    </div>
    <div class="row g-2">
      <listCard
        buttonLabel="Windshield"
        buttonImage="windshield-damage.svg"
        altText="Windshield"
        groupName="damageKey"
        buttonID="windshield"
      />
      <listCard
        buttonLabel="Side Window"
        buttonImage="side-window-damage.svg"
        altText="Side Window"
        groupName="damageKey"
        buttonID="sidewindow"
      />
      <listCard
        buttonLabel="Back Glass"
        buttonImage="back-glass-damage.svg"
        altText="Back Glass"
        groupName="damageKey"
        buttonID="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"
        loaderColor="white"
        sizeInRem="1" />
      </div>
    </div>
    <div class="row">
      <div class="col my-3 d-flex align-items-center">
        <buttonSecondary
          buttonText="Secondary"
          loaderColor="white"
          sizeInRem="1"
        />
      </div>
    </div>
    <div class="row">
      <div class="col my-3 d-flex align-items-center">
        <buttonBack/>
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
        <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
      </div>
    </div>
    <div class="row">
      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
      <div
        role="radiogroup"
        aria-labelledby="demo-1-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="sr-only" id="demo-1-radio-group">
          Select Vehicle Year
        </h3>
        <listButton
        groupName="demo-1"
        ariaLabelBy="vehicle-year"
        buttonID="2021"
        isRequired=true
        textPosition="text-start"
        loaderColor="blue"
        loaderPosition="right"
        sizeInRem="1"
        screenReaderOnlyText="(opens new window)"
        />
        <listButton
        groupName="demo-1"
        ariaLabelBy="vehicle-year"
        buttonID="2020"
        isRequired=true
        textPosition="text-start"
        loaderColor="blue"
        loaderPosition="right"
        sizeInRem="1"
        screenReaderOnlyText="(opens new window)"
        />
        <listButton
        groupName="demo-1"
        ariaLabelBy="vehicle-year"
        buttonID="2019"
        isRequired=true
        textPosition="text-start"
        loaderColor="blue"
        loaderPosition="right"
        sizeInRem="1"
        screenReaderOnlyText="(opens new window)"
        />
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
        <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
      </div>
    </div>
    <div class="row">
      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
      <div
        role="radiogroup"
        aria-labelledby="demo-2-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="sr-only" id="demo-2-radio-group">
          Select Vehicle Year
        </h3>
        <listButton
        groupName="demo-2"
        ariaLabelBy="vehicle-make"
        buttonID="Chevrolet"
        buttonLabelSubCopy="Test sub-headline"
        textPosition="text-start"
        loaderColor="blue"
        loaderPosition="right"
        sizeInRem="1"
        screenReaderOnlyText="(opens new window)"
        />
        <listButton
        groupName="demo-2"
        ariaLabelBy="vehicle-make"
        buttonID="Dodge"
        buttonLabelSubCopy="Test sub-headline"
        textPosition="text-start"
        loaderColor="blue"
        loaderPosition="right"
        sizeInRem="1"
        screenReaderOnlyText="(opens new window)"
        />
        <listButton
        groupName="demo-2"
        ariaLabelBy="vehicle-make"
        buttonID="Ford"
        buttonLabelSubCopy="Test sub-headline"
        textPosition="text-start"
        loaderColor="blue"
        loaderPosition="right"
        sizeInRem="1"
        screenReaderOnlyText="(opens new window)"
        />
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
        <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line Centered</h4>
      </div>
    </div>
    <div class="row">
      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
      <div
        role="radiogroup"
        aria-labelledby="demo-3-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="sr-only" id="demo-3-radio-group">
          Multi-Line Centered
        </h3>
        <listButton
        groupName="demo-3"
        ariaLabelBy="vehicle-model"
        buttonID="Corvette"
        buttonLabelSubCopy="Test sub-headline"
        textPosition="text-center"
        loaderColor="blue"
        loaderPosition="right"
        sizeInRem="1"
        screenReaderOnlyText="(opens new window)"
        />
        <listButton
        groupName="demo-3"
        ariaLabelBy="vehicle-model"
        buttonID="Testarosa"
        buttonLabelSubCopy="Test sub-headline"
        textPosition="text-center"
        loaderColor="blue"
        loaderPosition="right"
        sizeInRem="1"
        screenReaderOnlyText="(opens new window)"
        />
        <listButton
        groupName="demo-3"
        ariaLabelBy="vehicle-model"
        buttonID="S600"
        buttonLabelSubCopy="Test sub-headline"
        textPosition="text-center"
        loaderColor="blue"
        loaderPosition="right"
        sizeInRem="1"
        screenReaderOnlyText="(opens new window)"
        />
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
        <h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
      </div>
    </div>
    <div class="row px-3">
      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
      <div
        role="radiogroup"
        aria-labelledby="demo-4-radio-group"
        class="d-flex flex-row p-0"
      >
        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
        <h3 class="sr-only" id="demo-4-radio-group">
          Select Vehicle Year
        </h3>
        <listButtonHorizontal
        groupName="demo-4"
        ariaLabelBy="vehicle-model"
        buttonID="1"
        buttonLabelSubCopy=""
        textPosition="text-center"
        loaderColor="blue"
        loaderPosition="right"
        sizeInRem="1"
        v-bind:totalInGroup="3"
        v-bind:positionInGroup="1"
        screenReaderOnlyText="(opens new window)"
        />
        <listButtonHorizontal
        groupName="demo-4"
        ariaLabelBy="vehicle-model"
        buttonID="2"
        buttonLabelSubCopy=""
        textPosition="text-center"
        loaderColor="blue"
        loaderPosition="right"
        sizeInRem="1"
        v-bind:totalInGroup="3"
        v-bind:positionInGroup="2"
        screenReaderOnlyText="(opens new window)"
        />
        <listButtonHorizontal
        groupName="demo-4"
        ariaLabelBy="vehicle-model"
        buttonID="3"
        buttonLabelSubCopy=""
        textPosition="text-center"
        loaderColor="blue"
        loaderPosition="right"
        sizeInRem="1"
        v-bind:totalInGroup="3"
        v-bind:positionInGroup="3"
        screenReaderOnlyText="(opens new window)"
        />
      </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 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 class="row my-4">
      <div class="col">
        <h4 class="m-0 p-2 bg-light rounded">Site Header</h4>
      </div>
    </div>
    <div class="row my-3">
      <div class="col">
        <siteHeader
          imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
        />
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
        <h4 class="m-0 p-2 bg-light rounded">Vehicle Banner</h4>
      </div>
    </div>
    <div class="row my-3">
      <div class="col">
        <vehicleBanner
          vehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3"
        />
      </div>
    </div>
  </div>
</template>

<script>
import buttonPrimary from "@/ux-components/button-primary/button-primary";
import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
import buttonBack from "@/ux-components/button-back/button-back";
import listCard from "@/ux-components/list-card/list-card";
import listButton from "@/ux-components/list-button/list-button";
import alert from "@/ux-components/alert/alert";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import siteHeader from "@/common-components/site-header/site-header";
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
export default {
  name: "App",
  components: {
    buttonPrimary,
    buttonSecondary,
    buttonBack,
    listCard,
    listButton,
    alert,
    vehicleBanner,
    listButtonHorizontal,
    siteHeader,
  },
  data() {
    return {
      years: [2023, 2022, 2021, 2020],
    };
  },
};
</script>
