<commit_before><template>
  <div class="app-wrapper">
    <div class="blurable" :class="{blur : showModal}">
      <div class="layout-wrapper">
        <oxy-header></oxy-header>
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
      <oxy-footer class="footer-wrapper"></oxy-footer>
    </div>  
    <oxy-modal v-show="showModal">
      <div slot="container">
        <portal-target name="modal"></portal-target>
      </div>
    </oxy-modal>        
  </div>
</template>

<script>
  import OxyFooter from './components/GeneralViews/OxyFooter.vue'
  import OxyHeader from './components/GeneralViews/OxyHeader.vue'
  import OxyModal from './components/UIComponents/OxyModal.vue'
  
  export default {
    components: {
      OxyFooter,
      OxyHeader,
      OxyModal
    },

    created () {
      this.$bus.$on('toggleModal', (modalState) => {
        console.debug('modal event triggered')
        this.showModal = modalState
      })
    },

    data () {
      return {
        showModal: false
      }
    }
  }
</script>

<style lang="scss">
  .layout-wrapper, .app-wrapper {
    min-height: 100vh;
  }

  .layout-wrapper {
    padding-bottom: 250px;
  }

  .footer-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;<commit_msg>Fixed footer being fixed on screen.<commit_after><template>
  <div class="app-wrapper">
    <div class="blurable" :class="{blur : showModal}">
      <div class="layout-wrapper">
        <oxy-header></oxy-header>
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
      <oxy-footer class="footer-wrapper"></oxy-footer>
    </div>  
    <oxy-modal v-show="showModal">
      <div slot="container">
        <portal-target name="modal"></portal-target>
      </div>
    </oxy-modal>        
  </div>
</template>

<script>
  import OxyFooter from './components/GeneralViews/OxyFooter.vue'
  import OxyHeader from './components/GeneralViews/OxyHeader.vue'
  import OxyModal from './components/UIComponents/OxyModal.vue'
  
  export default {
    components: {
      OxyFooter,
      OxyHeader,
      OxyModal
    },

    created () {
      this.$bus.$on('toggleModal', (modalState) => {
        console.debug('modal event triggered')
        this.showModal = modalState
      })
    },

    data () {
      return {
        showModal: false
      }
    }
  }
</script>

<style lang="scss">
  .layout-wrapper, .app-wrapper {
    min-height: 100vh;
  }

  .layout-wrapper {
    padding-bottom: 250px;
  }

  .footer-wrapper {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
{'fraction_non_alphanumeric': 0.15559701492537314, 'fraction_numerical': 0.006716417910447761, 'mean_word_length': 2.3139678615574786, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 55, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5671154', 'n_tokens_mistral': 897, 'n_tokens_neox': 866, 'n_words': 162}