<template>
  <div
    class="homepage-block-dashboard-container"
    :class="{ large: large, order: order }"
    :style="{
      backgroundColor: backgroundColor
    }"
  >
    <Overlay
      :modal-file="modalFile"
      :modal-text="modalText"
      :title="title"
      :kpi="kpi"
      :headline="headline"
    />

    <Title tag="h4" :dark-mode="true">
      {{ title }}
    </Title>

    <div class="content">
      <image-ui
        :path="image"
        :static-image="true"
        class="icon-block"
        :class="position"
      />
      <div v-if="kpi || headline" class="text" :class="position">
        <p class="kpi">{{ kpi }}</p>

        <p class="headline" v-html="headline" />
      </div>

      <div v-else class="text" :class="position">
        <p class="no-data">NA</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Title } from 'inside-collection/atoms'
import Overlay from './sub-component/Overlay.vue'

export default {
  name: 'homepage-block-dashboard',
  components: {
    Title,
    Overlay
  },
  props: {
    backgroundColor: {
      type: String
    },
    large: {
      type: Boolean
    },
    order: {
      type: Boolean
    },
    position: {
      type: String
    },
    title: {
      type: String
    },
    kpi: {
      type: String
    },
    headline: {
      type: String
    },
    image: {
      type: String
    },
    modalFile: {
      type: Object
    },
    modalText: {
      type: String
    }
  }
}
</script>

<style lang="scss" scoped>
.homepage-block-dashboard-container {
  position: relative;
  height: 210px;
  padding: var(--spacing-l);
  color: var(--color-light);
  font-family: var(--font-secondary);
  order: 1;

  .ds-title-container {
    text-align: center;
  }

  .content {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 96%;

    .icon-block {
      position: absolute;
    }

    .icon-block.right {
      left: var(--spacing-xxl);
    }

    .icon-block.left {
      right: var(--spacing-xxl);
    }

    .text {
      position: absolute;
      text-align: center;

      .kpi,
      .no-data {
        color: var(--color-light);

        @include fontSize(50);
      }

      .headline {
        font-size: var(--font-size-h5);

        ::v-deep p {
          color: var(--color-light);
        }
      }
    }

    .text.right {
      right: var(--spacing-xl);
    }

    .text.left {
      left: var(--spacing-xl);
    }
  }
}

.homepage-block-dashboard-container:nth-child(5) {
  @include tablet {
    order: 2;
  }
}

.homepage-block-dashboard-container.large {
  grid-column: 2 / span 2;

  @include tablet {
    grid-column: 1 / span 2;
    order: 1;
    height: 420px;
  }

  @include mobile {
    grid-column: 1 / span 1;
  }
}

.homepage-block-dashboard-container.order {
  @include tablet {
    order: 3;
  }
}
</style>
