<template>

  <div class="container-fluid nested-radio">
    <div class="row mb-1 demo-animate"><!-- demo-animate for demo only -->
      <div class="col">
        <listCard
        groupName="listcard1"
        isWide="true"
        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
        buttonLabel="Green Tint, Blue Shade"
        buttonID="radio1"
        />
      </div>
    </div>
    <div class="row mb-1 show-hide"><!-- show-hide for demo only -->
      <div class="col">
        <p class="mb-0 fw-bold">Ok, select the features</p>
        <radio ref="radio"
        groupName="group1"
        buttonLabel="rain sensor, solar, 3rd visor band"
        buttonID="button1"
        isRequired
        value="test button"
        screenReaderOnlyText="rain sensor, solar, 3rd visor band"
        />
        <radio ref="radio"
        groupName="group1"
        buttonLabel="rain sensor, heated glass, solar, 3rd visor band"
        buttonID="button2"
        isRequired
        value="test button"
        screenReaderOnlyText="rain sensor, heated glass, solar, 3rd visor band"
        />
      </div>
    </div>
    <div class="row mb-2">
      <div class="col">
        <listCard
        groupName="listcard1"
        isWide="true"
        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
        buttonLabel="Green Tint"
        buttonID="radio2"
        />
      </div>
    </div>
  </div>

</template>

<script>
import listCard from "@/ux-components/list-card/list-card";
import radio from "@/ux-components/radio/radio";

export default {
  name: "nestedRadio",
  components: {
    radio,
    listCard,
  }
};
</script>

<style lang="scss">
.nested-radio {
  padding: 20px; // For demo only
  .ui-radio {
    margin: .25rem 0;
  }
  p {
    font-size: .875rem;
  }
  // For demo only
  .show-hide {
    max-height: 0;
    transition: max-height 0.35s ease-out;
    overflow: hidden;
  }
  .demo-animate {
    &:hover {
      + .show-hide {
        max-height: 100px;
        transition: max-height 0.35s ease-in;
      }
    }
  }
  // END for demo only
}
</style>
