<template>
  <div class="kpi">
    <section :class="[position === 'center' ? 'centerP' : 'leftP', 'kpi-data']">
      <p class="kpi-value">{{ ammount }} {{ unit }}</p>
      <p class="kpi-text">{{ title }}<ods-tooltip class="" effect="dark" content="Right Center prompts info" placement="right">
        <ods-icon name="info" size="12" class="icon-info"></ods-icon></ods-tooltip>
      </p>
      <p :class="[Math.sign(percentage) === -1 ? 'negative-value' : 'positive-value', 'fs']">
        <ods-icon name="play" size="12" v-bind:class="[Math.sign(percentage) === -1 ? 'triangle-down' : 'triangle-up', 'icon-triangle']"></ods-icon>
        1 %
      </p>
    </section>
  </div>
</template>

<script>
export default {
  name: 'kpi-data',
  props: ['ammount', 'unit', 'title', 'percentage', 'href', 'position'],
};
</script>

<style lang="scss" scoped>

  .kpi{
    align-self: center;
    border-right: 1px solid #ccc;

    &:last-child {
      border-right: 0;
      padding-right: 0;
    }

    .centerP p {
      justify-content: center;
    }

    .kpi-data {
      width: 100%;
      display: flex;
      flex-direction: column;
      font-weight: 500;

      p{
        display: flex;
        flex-flow: row;
        padding-top: 3%;
      }

      p:first-child{
        padding-top: 0;
      }

      .kpi-value {
        font-size: 30px;
      }

      .kpi-text {
        text-transform: uppercase;
        color: #6E767D;
        font-size: 9px;
        line-height: 16px;
      }

      .icon-info {
        margin-left: 3%;
        padding-top: 1%;
      }

      .icon-arrow-right {
        color: #2E6C99;
        cursor: pointer;
      }

      .fs {
        font-size: 75%;
      }

      .positive-value {
        color:#36B348;
      }

      .triangle-up {
        transform: rotate(31deg);
        padding-top: 2%;
      }

      .negative-value {
        color:#DE2F2F;
      }

      .triangle-down {
        transform: rotate(-28deg);
      }
    }

    .leftP {
      margin-left: 15%;
    }
  }

  @media (min-width: 768px) and (max-width: 1200px){

  .kpi .kpi-data .kpi-value {
    font-size: 25px;
  }
}
</style>
