<template>
<form>
    <ul>
        <li>
        <label for="ca-theo">CA théorique</label>
        <input type="number" id="ca-theo">
        </li>
        <li>
        <label for="ca-retro">CA rétrocession</label>
        <input type="number" id="ca-retro">
        </li>
        <li>
        <label for="ca-react">CA réactualisé</label>
        <input type="number" id="ca-react">
        </li>
        <li>
        <label for="nbr-seance">Nombre de séances effectuées</label>
        <input type="number" id="nbr-seance">
        </li>
        <li>
        <label for="retro">Montant de la rétrocession</label>
        <input type="number" id="retro">
        </li>
        <li>
        <label for="remumeration">Rémunération effectuée</label>
        <input type="number" id="remumeration">
        </li>
    </ul>
</form>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'MonthForm',
  props: {
      editMonth: {}
  },
  computed: {
    ...mapGetters({
        TheEmpty: "travail/TheEmptyMonth",
    })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
}
li {
    margin: 3px;
    width: 30%;
    display: flex;
    flex-direction: column-reverse;
}
li > label {
    font-size: 0.8em;
}
input {
    width: 4em;
    font-size: 1.5em;
}

</style>
