<template>
  <div>
    <div class="page-header">
      <img
        v-if="banner"
        :src="$_getContentImage(banner, 'banner-page')"
        alt="form image"
      />
    </div>

    <div class="layout-container">
      <section class="form-header">
        <Title v-if="title" class="mb-l">
          {{ title }}
        </Title>

        <BaseText v-if="introduction" :html="true" class="mb-xl">
          {{ introduction }}
        </BaseText>
      </section>

      <slot />
    </div>
  </div>
</template>

<script>
import { BaseText, Title } from 'inside-collection/atoms'

export default {
  name: 'HeaderForm',
  components: { Title, BaseText },
  props: {
    title: { type: String },
    introduction: { type: String },
    banner: { type: Object }
  }
}
</script>
