<template>
  <div class="page calculation--page latin-digits">
    <Hero :title="staticData.hero"/>
    <section class="s1">
      <div class="container">
        <div class="panel">
          <h2 class="title">{{ staticData.app.t1 }}</h2>
          <p>{{ staticData.app.t2 }}</p>
        </div>
      </div>
    </section>
    <calculation-app :titleTxt="staticData.app.t3"/>
    <calculation-guide-tables/>
  </div>
</template>


<script>
import {fadeInAnimation} from '~/mixins/animations'

export default {
  computed: {
    staticData() {
      return this.$store.state.staticData.calculation[this.$route.params.lang]
    }
  },
  mixins: [fadeInAnimation],
  head() {
    return {
      htmlAttrs: {
        title: this.staticData.hero
      },
      title: this.staticData.hero,
      meta: [
        {
          hid: this.staticData.hero,
          name: 'description',
          content: this.staticData.app.t2
        }
      ]
    }
  }
}
</script>


