<template>
  <div class="demo-page">
    <h2>isStopLoss()</h2>
    <ul>
      <li
        v-for="({ obj, key }, index) in products"
        :key="index"
      >
        <div>
          <h4>Input</h4>
          <code>$TF.Product.isStopLoss({{ obj }}{{ key ? `, '${key}'` : '' }})</code>
        </div>
        <div>
          <h4>Output</h4>
          <p><strong>{{ key ? $TF.Product.isStopLoss(obj, key) : $TF.Product.isStopLoss(obj) }}</strong></p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data: () => ({
      products: [
        {
          obj: { product_type_name: 'Stop Loss' },
        },
        {
          obj: { product_type_name: 'Basic Life / AD&D' },
        },
        {
          obj: { name: 'Stop Loss' },
          key: 'name',
        },
        {
          obj: { name: 'Basic Life / AD&D' },
          key: 'name',
        },
      ],
    }),
  };
</script>

<style lang="scss" scoped>
  @import 'src/assets/styles/variables';

  ul {
    max-width: 750px;
  }

  li {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid $tf-medium-gray;
  }

  div {
    padding: 0 10px;
  }
</style>
