<template>
  <div class="min-h-screen bg-white" style="min-width: 1200px">
    <div
      class="flex items-center px-4 font-bold text-base border-b bg-gray-200 h-14"
    >
      <!-- Logo -->
      <a href="http://birzha/">
        <img :src="url('/logo.svg')" title="Logo" class="h-12" />
      </a>
      <!-- Links -->
      <div class="flex flex-1 ml-10">
        <inertia-link
          v-for="link in linksFiltered"
          :key="link.url"
          :href="route(link.path)"
          class="flex items-center h-14 text-gray-700 hover:bg-gray-200 border-b-2 border-transparent px-5 -mb-0.5"
          :class="{ 'border-primary text-primary': route().current(link.path) }"
        >
          {{ link.label }}
        </inertia-link>
      </div>

      <div class="flex space-x-2">
      <a :href="route('lang', 'tm')"><span class="mx-0.5" :class="{'opacity-40': !isActiveLocale('tm')}">TK</span></a>
      <a :href="route('lang', 'ru')"><span class="mx-0.5" :class="{'opacity-40': !isActiveLocale('ru')}">RU</span></a>
      <a :href="route('lang', 'en')"><span class="mx-0.5" :class="{'opacity-40': !isActiveLocale('en')}">EN</span></a>
      </div>
      <a-button v-if="$page.props.user" class="ml-6" @click="logout">{{
        trans("Logout")
      }}</a-button>
      <!-- <a-button v-else @click="login">Içeri gir</a-button> -->
    </div>
    <main style="height: calc(100vh - 3.5rem)"><slot></slot></main>
  </div>
</template>

<script>
export default {
  metaInfo() {
    return {
      title: this.trans('Home'),
      titleTemplate: '%s | TDHÇMB'
    }
  },

  data() {
    return {};
  },

  computed: {
    links() {
      return [
        {
          label: this.trans("Imports"),
          path: "imports",
        },
        {
          label: this.trans("Exports"),
          path: "exports",
        },
        {
          label: this.trans("Requests"),
          path: "requests",
          auth: true,
        },
        {
          label: this.trans("Lines"),
          path: "lines",
          auth: true,
        },
        {
          label: this.trans("Categories"),
          path: "categories",
          auth: true,
        },
        {
          label: this.trans("Archives"),
          path: "groups",
          auth: true,
        },
        {
          label: this.trans("Settings"),
          path: "settings",
          auth: true,
        },
      ];
    },

    linksFiltered() {
      if (!this.$page.props.user) {
        return this.links.filter((link) => !link.auth);
      }

      return this.links;
    },
  },

  methods: {
    isActiveLocale(locale) {
      return this.$page.props.locale === locale
    },

    login() {
      this.$inertia.visit(this.route("login"));
    },

    logout() {
      this.$inertia.post(this.route("logout"));
    },
  },
};
</script>
