<template>
  <div class="homepage-heromodule-container">
    <div class="homepage-heromodule-container__background" :style="style" />

    <TemplateContainer size="l">
      <div class="content">
        <welcome-searches />

        <div class="block-container">
          <HomepageBlockCustomer />

          <HomepageBlockNotes />
        </div>
      </div>
    </TemplateContainer>
  </div>
</template>

<script>
import HomepageBlockCustomer from './HomepageBlockCustomer'
import HomepageBlockNotes from './HomepageBlockNotes'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'

export default {
  name: 'homepage-heromodule',
  components: {
    HomepageBlockCustomer,
    HomepageBlockNotes,
    TemplateContainer
  },
  data() {
    const image = this.getStore(
      'getInsideSettings',
      'homepage.heromodule_homepage'
    )

    return {
      style: { ...(image && { backgroundImage: `url(${image})` }) }
    }
  }
}
</script>

<style lang="scss">
.homepage-heromodule-container {
  position: relative;

  &__background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: var(--spacing-3xl);
    left: 0;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;

    @include tablet {
      background-size: auto;
    }

    @include mobile {
      bottom: 0;
    }
  }

  .content {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: var(--spacing-xl) 0;
    margin-bottom: var(--spacing-s);
    justify-content: space-between;
    align-items: top;

    @include tablet {
      grid-template-columns: 1fr;
    }

    .block-container {
      display: flex;
      grid-column: 2 / span 2;

      & > div {
        flex: 1;
      }

      @include tablet {
        grid-column: 1;
      }

      @include mobile {
        flex-direction: column;
      }
    }

    .welcome-search {
      margin: var(--spacing-l) var(--spacing-m) 0 0;

      @include tablet {
        margin: 0;
      }
    }
  }
}
</style>
