<template>
  <div class="wrapper authentication-styles">
    <header class="logo-header">
      <div class="container-fluid d-flex justify-content-around">
        <div class="row">
          <div class="col-12">
            <div class="logo-header__logo">
              <a
                href="javascript:void(0)"
                disabled="true"
                :title="appLongTitle() + appDescription()"
              >
                <img :src="logo" :alt="appLongTitle() + appDescription()" />
              </a>
            </div>
          </div>
        </div>
        <select-language-dropdown
          v-if="!isMajlesBuild()"
        ></select-language-dropdown>
      </div>
    </header>
    <div class="container">
      <div class="row">
        <div class="col-12">
          <!-- <slot name="header"> Default header content </slot> -->

          <slot> </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "pinia";
import { useAuthStore } from "~/stores/authStore";
import { useCommonStore } from "~/stores/commonStore";

// import { useMixin } from "@nuxtjs/composition-api";
// useMixin(mixin({ isMajlesBuild() }));

export default {
  name: "auth-layout",
  async beforeMount() {
    const logo = await logoPhoto();
    this.logo = logo.default;
  },
  data() {
    return {
      logo: false,
    };
  },
  mounted() {
    this.setBodyClass("auth-page");
    document.title = import.meta.env.VITE_TITLE;
  },
  computed: {
    ...mapState(useAuthStore, ["isAuthenticatedGetter"]),
    tahrirAppTitle() {
      return import.meta.env.VITE_TAHRIR_APP_TITLE ?? "";
    },
    appVersion() {
      return import.meta.env.VITE_VERSION ?? "";
    },
    eitaaChannelUrl() {
      return import.meta.env.VITE_EITAA ?? "";
    },
    // logoPhoto() {
    // if (buildName() == "majles")
    // return require("assets/majles/img/majles_logo-2.png");
    // return require("~/assets/common/img/logo/hamfahmi.png");
    // return "";
    // },
  },
  methods: {
    ...mapActions(useCommonStore, ["setBodyClass"]),
  },
};
</script>
<style lang="scss">
@import "../assets/auth/signup";
</style>
