<template>
  <div id="app">
    <router-link to="/">
    </router-link>
      <img :src="logo" alt="EventAI Logo" class="app-logo" @click="goBack" />
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      logo: require('@/assets/LogoEventAiTransPetit.png') // Ruta hacia el logo en assets
    }
  },
  methods: {
    goBack () {
      if (this.$route.path === '/login' || this.$route.path === '/signup') {
        this.$router.push('/welcomePage')
      } else {
        this.$router.go(-1)
      }
    }
  }
}
</script>

<style scoped>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0;
  padding-top: 0px; /* Aumenta si necesitas espacio adicional alrededor del logo */
}

/* Posiciona el logo en la esquina superior izquierda */
.app-logo {
  position: absolute;
  top: 20px; /* Ajusta para posicionarlo correctamente en la página */
  left: 20px; /* Ajusta para tu diseño */
  height: 120px; /* Tamaño del logo */
  cursor: pointer;
  z-index: 1000; /* Asegura que esté sobre otros elementos */
}
</style>

<style>
body {
  margin: 0;
  padding: 0;
  max-height: auto;
}
</style>
