<style>
  card {
    width: 400px;
  }
</style>

<script>
  import IconImage from "$/client/components/IconImage.svelte";
  let flipped = false;
</script>


<flipper class:flipped={ flipped }>
  <inner>
    <card class="front">
      <top>
      <IconImage name="arrow-left" />
      </top>

      <middle>
        <h4>
          Front Card
        </h4>
        <p>This is the front facing card. Click the button to flip it.</p>
      </middle>

      <bottom>
        <button-group>
          <button on:click={ () => flipped = !flipped }>Flip It!</button>
        </button-group>
      </bottom>
    </card>
    <card class="back">
      <top>
      <IconImage name="arrow-right" />
      </top>

      <middle>
        <h4>
          Back Card
        </h4>
        <p>This is the back facing card. Click the button to flip it back.</p>
      </middle>

      <bottom>
        <button-group>
          <button on:click={ () => flipped = !flipped }>Flip it Back!</button>
        </button-group>
      </bottom>
    </card>
  </inner>
</flipper>
