<template>
  <div class="m-sign-up--tabs">
    <div class="m-sign-up__header">
      <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation">
          <a
            class="m-nav-link"
            :class="{active : formComponentName == 'login-form'}"
            :href="$t('Login')"
            @click.prevent="formComponentName = 'login-form'"
            >{{ $t("Login") }}</a
          >
        </li>
        <li class="nav-item" role="presentation">
          <a
            class="m-nav-link"
            :class="{active : formComponentName == 'register-form'}"
            :href="$t('Register')"
            @click.prevent="formComponentName = 'register-form'"
            >{{ $t("Register") }}</a
          >
        </li>
      </ul>
    </div>
    <div class="m-sign-up__content">
      <div class="tab-content" >
        <div class="tab-pane fade show active">
          <component
            @set-component="$emit('set-component',$event)"
            :is="formComponentName"
          ></component>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import authMixin from "~/mixins/authMixin";

export default {
  mixins: [authMixin],
  data() {
    return {
      formComponentName: "login-form",
    };
  },


};
</script>
