<pourcentageForma>
    <div class="recap box has-background-light has-text-weight-normal">
        <p>Moyenne des admis : <span class="is-pulled-right" if={props.moyenne}>{props.moyenne}</span></p>
        <p>Nombre de formations : <span class="is-pulled-right">{props.statistique.nhits}</span></p>
        <p>Capacité : <span class="is-pulled-right" if={props.capacite}>{props.capacite}</span></p>
        <div class="is-flex m-0">
            <p class="column is-5 p-0">Sélectivité :</p>
            <div class="column p-0">
                <progress-bar select={props.getSelectivite} if={props.selectivite}>
                    <div class="columns is-mobile is-vcentered">
                        <div class="column is-narrow pr-1">
                            <p class="has-text-right has-text-weight-bold">{props.selectivite}</p>
                        </div>
                        <div class="column pl-0">
                            <progress class="progress is-info" value="{100-props.selectivite}" max="100" if={props.selectivite >= 75}>{props.selectivite}%</progress>
                            <progress class="progress is-success" value="{100-props.selectivite}" max="100" if={props.selectivite >= 50 && props.selectivite < 75}>{props.selectivite}%</progress>
                            <progress class="progress is-warning" value="{100-props.selectivite}" max="100" if={props.selectivite > 25 && props.selectivite < 50}>{props.selectivite}%</progress>           
                            <progress class="progress is-danger" value="{100-props.selectivite}" max="100" if={props.selectivite <= 25}>{props.selectivite}%</progress>
                        </div>
                    </div>
                </progress-bar>
            </div>
        </div>
    </div>
    <script>
    export default function todos() {
    return {
      onBeforeMount(props, state) {
        // initial state
        this.state = {
        };
      }
    }
    }

    </script>
    
</pourcentageForma>