<template>
  <div class="paragraph paragraph-steps">
    <div
      v-for="(step, index) in stepsData"
      :key="index"
      :class="{ 'step--reversed': index % 2 === 1 }"
      class="step"
    >
      <div class="step__img">
        <img :src="$_getContentImage(step.image)" :alt="step.title" />
      </div>

      <div class="step__txt">
        <span class="step__txt-index">{{ index + 1 }}</span>

        <p class="step__txt--title bold">{{ step.title | unescapeHtml }}</p>

        <div v-html="step.body" />
      </div>
    </div>
  </div>
</template>

<script>
import { unescapeHtml } from '@inside-library/filters/UnescapeHtml'

export default {
  name: 'StepsParagraph',
  data() {
    return {
      stepsData: this.heritedData.content
    }
  },
  methods: {
    unescapeHtml
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.paragraph-steps {
  overflow: hidden;
  background-color: var(--color-primary);
  border: 0.2rem solid var(--color-primary);
  border-top-left-radius: 3.5rem;
  border-top-right-radius: 3.5rem;

  .step {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 28.4rem;

    &--reversed {
      flex-direction: row-reverse;

      .step__img::after {
        left: 0;
        transform: translate(-100%, -50%) rotate(180deg);
      }
    }

    &__img,
    &__txt {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 100%;
      padding: 3.5rem;
      text-align: center;
    }

    &__img {
      position: relative;

      &::after {
        z-index: 2;
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        width: 0;
        height: 0;
        transform: translate(100%, -50%);
        border-style: solid;
        border-width: 22.5px 0 22.5px 21px;
        border-color: transparent transparent transparent var(--color-primary);
      }

      img {
        max-width: 100%;
        max-height: 100%;
      }
    }

    &__txt {
      position: relative;
      background-color: var(--color-light);

      &-index {
        z-index: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        color: var(--color-grey-200);
        transform: translate(-50%, -50%);

        @include fontSize(255);
      }

      &--title,
      & > div {
        z-index: 1;
        position: relative;
      }

      &--title {
        margin-bottom: 1.2rem;

        @include fontSize(26);
      }
    }
  }
}
</style>
