<script>
import DefaultModal from '~insideLibrary/components/modals/default/DefaultModal'

export default {
  name: 'modal-banner-homepage',
  extends: DefaultModal,
  data() {
    return {
      selection: {
        title: 'title',
        content: 'content',
        text: 'text',
        file: 'file'
      }
    }
  },
  methods: {
    scaffold(fields) {
      return {
        sections: [
          {
            class: 'content',
            fields: [
              ...this.insertIf(fields.title, {
                class: 'title',
                value: fields.title
              }),
              ...this.insertIf(fields.text, {
                class: 'text',
                value: fields.text,
                html: true
              }),
              ...this.insertIf(fields.file, {
                tag: 'paragraph-listing',
                data: {
                  heritedData: [
                    {
                      section_type: 'file',
                      file: fields.file
                    }
                  ],
                  heritedOptions: {
                    template: true
                  }
                }
              })
            ]
          },
          {
            fields: [
              {
                tag: 'paragraph-listing',
                data: {
                  heritedData: fields.content,
                  heritedOptions: { template: true }
                }
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss">
.banner-homepage-modal {
  .modal__body {
    .title {
      @include H1;
      text-align: center;
    }

    .chapo {
      @include paragraph;
    }

    .paragraph {
      @include paragraph;
    }
  }
}
</style>
