<template>
  <div class="info" :class="product.kind.name">
    <div class="info-data">
      <div class="info-data-left" >
        <img class="logo" :src="$helper.getImage(product.kind.image)" />
        <p class="kind">{{ $t(product.kind.localized) }}</p>
        <p class="slogan">{{ $t(product.slogan) }}</p>
      </div>
      <div class="info-data-right">
        <div class="info-data-row">
          <div class="info-data-box land">
            <div class="info-data-box-label">{{ $t("labels.country") }}</div>
            <div class="info-data-box-value">
              {{ $t(product.country) }}
            </div>
          </div>
          <div class="info-data-box height">
            <div class="info-data-box-label">{{ $t("labels.height") }}</div>
            <div class="info-data-box-value">
              <div class="text-overflow">
                {{ $t(product.height) }}
              </div>
            </div>
          </div>
        </div>
        <div class="info-data-row">
          <div class="info-data-box revision">
            <div class="info-data-box-label">{{ $t("labels.revision") }}</div>
            <div class="info-data-box-value">
              <div class="text-overflow">
                {{ $t(product.revision) }}
              </div>
            </div>
          </div>
          <div class="info-data-box harvest">
            <div class="info-data-box-label">{{ $t("labels.harvest") }}</div>
            <div class="info-data-box-value">
              <div class="text-overflow">
                {{ $t(product.harvest) }}
              </div>
            </div>
          </div>
          <div class="info-data-box profile">
            <div class="info-data-box-label">{{ $t("labels.profile") }}</div>
            <div class="info-data-box-value">
              <div class="text-overflow">
                {{ $t(product.profile) }}
              </div>
            </div>
          </div>
        </div>
        <div class="info-data-row">
          <div class="info-data-box taste">
            <div class="info-data-box-label">{{ $t("labels.taste") }}</div>
            <div class="info-data-box-value">
              <div class="text-overflow">
                {{ $t(product.taste) }}
              </div>
            </div>
          </div>
          <div class="info-data-box mouthfeel">
            <div class="info-data-box-label">{{ $t("labels.texture") }}</div>
            <div class="info-data-box-value">
              <div class="text-overflow">
                {{ $t(product.texture) }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    product: Object
  }
};
</script>

<style lang="scss" scoped>
.info {
  font-size: 12px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  .logo {
    width: 50px
  }
  &.earth {
      background-color: #A6AF94;
  }
  &.water {
    background-color: #889CA7;
  }
  &.air {
    background-color: #F4EEB0;
  }
  &.fire {
    background-color: #D58C83;
  }
  &.no-product {
    background-color: #fff;
  }

  height: 100%;
  width: 100%;

  &-data {
    min-height: 127px;
    display: grid;
    grid-template-columns: 20% 80%;
    border-style: solid;
    border-width: 2px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

    &-left {
      padding-top: 16px;
      border-bottom-left-radius: 15px;
    }

    &-right {
      border-bottom-right-radius: 15px;
      display: grid;
      grid-template-rows: repeat(3, 1fr);
      height: 100%;
      width: 100%;

      .earth & {
        background-color: #babfa9;
      }
      .water & {
        background-color: #92a7b1;
      }
      .air & {
        background-color: #f4f4cc;
      }
      .fire & {
        background-color: #d59c95;
      }
    }

    &-row {
      border-top-style: solid;
      border-top-width: 2px;
      border-bottom-style: solid;
      border-bottom-width: 2px;
      display: inline-flex;
      // flex-wrap: nowrap;
      // justify-content: space-around;
      min-width: 100%;
      height: 100%;

      &:first-child {
        border-top: none;
      }

      &:last-child {
        border-bottom: none;
      }

      .earth & {
        border-color: #a6af94;
      }

      .water & {
        border-color: #889ca7;
      }
      .air & {
        border-color: #f4eeb0;
      }
      .fire & {
        border-color: #d58c83;
      }
    }

    &-box {
      padding: 4px 0 0 8px;
      border-right-style: solid;
      border-right-width: 3px;
      flex-basis: 0px;
      flex-grow: 1;

      &:last-child {
        border-right: none;
      }

      .earth & {
        border-color: #a6af94;
      }

      .water & {
        border-color: #889ca7;
      }
      .air & {
        border-color: #f4eeb0;
      }
      .fire & {
        border-color: #d58c83;
      }

      &-label {
        font-family: "Righteous", cursive;
        text-transform: uppercase;
        font-size: 9px;
      }
      &-value {
        font-family: "Cormorant Garamond", serif;
        line-height: 12px;
        font-size: 12px;
      }
    }

    p {
      &.kind {
        font-family: "Righteous", cursive;
        text-align: center;
        line-height: 20px;
        margin-left: 4px;
        text-transform: uppercase;
        letter-spacing: 1.3px;
        font-size: 10px;
      }
      &.slogan {
        font-family: "Cormorant Garamond", serif;
        text-align: center;
        line-height: 12px;
        margin-left: 4px;
        font-size: 10px;
      }
    }

    .earth & {
      border-color: #babfa9;
    }
    .water & {
      border-color: #92a7b1;
    }
    .air & {
      border-color: #f4f4cc;
    }
    .fire & {
      border-color: #d59c95;
    }
  }
}
</style>