<template>
<div id="content">
    <section id="months">
        <create-month/>
        <months-list/>
    </section>
    <section id="stats">
        <ca-on-period/>
        <ca-repartition/>
    </section>
</div>
</template>

<script>
import { mapActions } from 'vuex'
import MonthsList from '../components/MonthsUl.vue'
import CreateMonth from '../components/CreateMonth.vue'
import caOnPeriod from '../components/caOnPeriod.vue'
import caRepartition from '../components/caRepartition.vue'
export default {
    name: 'home',
    components: {
        MonthsList: MonthsList,
        CreateMonth: CreateMonth,
        caOnPeriod: caOnPeriod,
        caRepartition: caRepartition,
    },
    data () {
        return {}
    },
    computed: {
    },
    methods: {
        ...mapActions('travail', {
            'loadMonths': 'loadMonths',
        }),
    },
    mounted () {
        this.loadMonths()
    }, 
}
</script>

<style scoped>
#content {
    display: grid;
    grid-template-columns: minmax(580px, 2fr) minmax(450px, 1fr);
    grid-template-areas: 
        "stats months";
    gap: 1em; 
}
#stats {
    grid-area: stats;
}
#months {
    grid-area: months;
}
</style>
