<template>
  <v-footer
    padless
    color="secondary"
  >
    <v-col
      class="d-flex justify-center pb-0"
      cols="12"
    >
      <!-- TODO: provide translation -->
      <v-tabs 
        centered
        hide-slider
        background-color="secondary"
        class="font-weight-light"
        dark
        dense
        role="navigation"
        height="20px"
        >
        <v-tab
          class="grey--text text--lighten-3"
          to="/project.html#contact"
          >
          Contact
        </v-tab>
        <v-tab
          class="grey--text text--lighten-3"
          to="/privacy.html"
          >
          Data Privacy
        </v-tab>
        <v-tab
          class="grey--text text--lighten-3"
          to="/imprint.html"
          >
          Imprint
        </v-tab>
        <v-tab
          class="grey--text text--lighten-3"
          to="/termsofuse.html"
          >
          Terms of Use
        </v-tab>
      </v-tabs>
    </v-col>
    <v-col
      cols="12"
    >
      <v-img
        max-height="100%"
        max-width="200px"
        style="margin: 0 auto"
        :src="$withBase('/assets/images/dfg_logo_schriftzug_blau_foerderung_en.svg')"
        ></v-img>
    </v-col>
    <v-col
      class="text-caption grey--text text--lighten-3 text-center copyright"
      cols="12"
    >
      <!-- TODO: provide translation -->
      © {{ new Date().getFullYear() }} – Ahiqar - The syriac and arabic Ahiqar Texts
    </v-col>
  </v-footer>
</template>

<style lang="scss" scoped>
.v-tab {
  font-size: 75%;
}
</style>