<template>
  <div>

    <div class="container-fluid content-box flex between-xs">
      <div class="col-xs-12 col-md-3">
        <custom-information />
      </div>
    
      <div class="col-xs-12 col-md-3">
        <custom-services />
      </div>
      
      <div class="col-xs-12 col-md-3">
        <custom-account />
      </div>
      
      <div v-if="enableComponents.customContact" class="col-xs-12 col-md-3">
        <custom-contact />
      </div>
    </div>

   
    <div class="container-fluid content-box flex between-xs">
      <div class="col-xs-12 col-md-6">
        <div v-if="enableComponents.customSocial || enableComponents.customCertificates || enableComponents.customPayment" class="flex column">

          <div v-if="enableComponents.customSocial" class="col-xs-12 col-md-12 no-padding" >
            <custom-social/>
          </div>

          <div v-if="enableComponents.customPayment" class="col-xs-12 col-md-12 no-padding top-margin-medium" >
            <custom-payment/>
          </div>

          <div v-if="enableComponents.customCertificates" class="col-xs-12 col-md-12 no-padding top-margin-medium" >
            <custom-certificates/>
          </div>

        </div>
      </div>
      
      <div class="col-xs-12 col-md-6">
        <the-newsletter />
      </div>
    </div>

    
    <div class="footer-bottom content-box flex middle-xs between-xs">
      <div class="col-xs-12 col-md-12">
        <custom-options />
      </div>
    </div>

  </div>
</template>

<script>
import store from "@components/TheFooter/storeFooter.js";

export default {
  name: 'CustomFooter',
  components: {
    TheNewsletter: () => import(/* webpackChunkName: "TheNewsletter" */ '@components/TheNewsletter/index.vue'),
    CustomSocial: () => import(/* webpackChunkName: "CustomSocial" */ '@components/TheFooter/CustomFooter/CustomSocial.vue'),
    CustomContact: () => import(/* webpackChunkName: "CustomContact" */ '@components/TheFooter/CustomFooter/CustomContact.vue'),
    CustomOptions: () => import(/* webpackChunkName: "CustomOptions" */ '@components/TheFooter/CustomFooter/CustomOptions.vue'),
    CustomAccount: () => import(/* webpackChunkName: "CustomAccount" */ '@components/TheFooter/CustomFooter/CustomAccount.vue'),
    CustomPayment: () => import(/* webpackChunkName: "CustomPayment" */ '@components/TheFooter/CustomFooter/CustomPayment.vue'),
    CustomServices: () => import(/* webpackChunkName: "CustomServices" */ '@components/TheFooter/CustomFooter/CustomServices.vue'),
    CustomInformation: () => import(/* webpackChunkName: "CustomInformation" */ '@components/TheFooter/CustomFooter/CustomInformation.vue'),
    CustomCertificates: () => import(/* webpackChunkName: "CustomCertificates" */ '@components/TheFooter/CustomFooter/CustomCertificates.vue'),
  },
  data () {
    return {
      enableComponents: store.state.enableComponents,
    };
  },
}
</script>

<style>
.html-content {
  word-break: break-all;
}

@media only screen and (max-width: 991px) {
  .html-content {
    max-width: 20rem;   
    overflow: hidden; 
  }
}
</style>