<template>
 <div class="default">
  <!-- <Carousel v-show="!loading" class="child"> -->
    <Changelog/>
    <!-- <History/>
    <Advice/>
  </Carousel> -->
  <p v-show="loading" class="loading">
    <Icon icon="fa-spinner fa-solid" spin-pulse/> Chargement en cours
  </p>
 </div>
</template>

<script setup>
import Welcome from './Home/Welcome.vue';
import Carousel from '@/components/UI/Carousel.vue';
import Changelog from './Home/Changelog.vue';
import Advice from './Home/Advice.vue';
import History from './Home/History.vue';

import { ref } from 'vue';
import Events from '@/utils/Events';

const loading = ref(true);

Events.on("CHANGELOG_LOADED", () => {
    loading.value = false;
});



</script>

<style scoped>
.textSecond {
    font-size: 0.8em;
    color: var(--text-secondary);
    opacity: 0.8;

}   

p {
    margin: 0 0 0.5em 0;
    font-size: 1.5em;
    font-weight: 600;

}

.default  {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    gap: 5px;
    flex: 1;
}

@media screen and (max-width: 768px),
       screen and (max-height: 607px) {
    .default {
        grid-template-rows: 1fr;
    }
}

.child {
     grid-column: 1 / -1;
    
    width: 100%;
}

.loading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;;
    color: var(--text-secondary);
}

</style>