<template>
    <div class="w100 flex justify-between text-caption q-pa-md q-gutter-y-md text-grey-9">
        <div class="flex column col-12 col-sm">
          <base-logo class="text-body1 q-pb-sm"/>
          <div class="flex items-center">
            <q-icon name="mdi-map-marker-outline" color="brand" class="q-pr-sm"/>
            <span>{{ $t('footer__contacts_location') }}</span>
          </div>
          <div class="flex items-center">
            <q-icon name="mdi-phone-outline" color="brand" class="q-pr-sm" />
            <span>+7 (916) 439-04-25</span>
          </div>
          <div class="flex items-center">
            <q-icon name="mdi-email-outline" color="brand" class="q-pr-sm"/>
            <a
              href="mailto:info@tgcrew.ru"
              style="text-decoration: none; color: inherit"
              >
              info@tgcrew.ru
            </a>
          </div>
        </div>

      <div class="flex column col-12 col-sm">
        <span class="text-body1 text-bold">
          {{ $t('footer__docs') }}
        </span>
        <div
          v-for="item in docs"
          :key="item.id"
          class="text-caption"
          >
          <span
            @click="router.push({ name: item.route })"
            class="cursor-pointer"
            style="text-decoration: underline; color: inherit"
            >
            {{ $t(item.translationKey) }}
          </span>
        </div>
      </div>


      <div class="flex column col-12 col-sm">
        <div class="text-grey">
          {{ $t('footer__description_user_data') }}
        </div>
      </div>

    </div>
</template>

<script setup lang="ts">
  import BaseLogo from 'components/BaseLogo.vue'
  import { useRouter } from 'vue-router'
  import { docs } from 'src/docs'

  const router = useRouter()
</script>

<style scoped>
</style>
