<template>
  <div class="content-page">
    <div class="background">
    </div>
    <h1>{{ heading }}</h1>
    <section class="content-container">
      <slot></slot>
    </section>
  </div>
</template>

<script>
export default {
  props: {
    bgLoading: {
      type: String,
      required: false,
      default: function () {
        return 'linear-gradient(to top, orange, yellow)'
      }
    },
    img: {
      type: String,
      required: false,
      default: function () {
        return 'url(https://via.placeholder.com/1920x1080)'
      }
    },
    heading: {
      type: String,
      required: true
    }
  },

  data () {
    return {
    }
  },

  computed: {
    loadingStyle () {
      return {
        backgroundcolor: 'rgba(red, .5)'
      }
    }
  },

  methods: {
  }

}
</script>

<style lang="scss" scoped>

.content-page {
  position: relative;
  width: 100%;
  height: 100%;
  padding: $site-menu__header-width 0 0 0;

  @media (min-width: $bp__layout) {
    padding:  0 0 0 $site-menu__header-width;
  }

  background-color: rgba(black, .1); // TEMP
}
</style>
