<comparateur>

  <h2>Comparateur de formations</h2>

  <a href="#">← Retour à la recherche</a>
  <a href="#/estimation">🎯 Estimer mes chances</a>


  <div if={ state.formations.length === 0 }>
    Aucune formation sélectionnée.
  </div>




  <div class="comparateur-grille">

    <div each={ formation in state.formations } class="comparateur-colonne">

      <h3>{ formation.fil_lib_voe_acc }</h3>
      <h4>{ formation.g_ea_lib_vx }</h4>
      <p>{ formation.ville_etab } ({ formation.dep_lib })</p>
      <p>Taux d'accès : { formation.taux_acces_ens }%</p>
      <p>Places : { formation.capa_fin }</p>
      <p>Candidatures : { formation.voe_tot }</p>
      <p>Admis : { formation.acc_tot }</p>
      <p>Bac Général : { formation.pct_bg }%</p>
      <p>Bac Techno : { formation.pct_bt }%</p>
      <p>Bac Pro : { formation.pct_bp }%</p>
      <p>Mention AB : { formation.pct_ab }%</p>
      <p>Mention B : { formation.pct_b }%</p>
      <p>Mention TB : { formation.pct_tb }%</p>
      <button onclick={ () => retirerFormation(formation) }>
        Retirer
      </button>

    </div>

  </div>









  <style>

    .comparateur-grille
    {
      display: flex;
      flex-direction: row;
      gap: 20px;
    }

    .comparateur-colonne
    {
      border: 1px solid #ccc;
      padding: 15px;
      min-width: 200px;
    }

  </style>










  <script>

    export default
    {
      state:
      {
        formations: []
      },

      onMounted()
      {
        const saved = localStorage.getItem('comparateur')
        if (saved)
        {
          this.update({ formations: JSON.parse(saved) })
        }
      },

      retirerFormation(formation)
      {
        const formations = this.state.formations.filter(f => f.cod_aff_form !== formation.cod_aff_form)
        localStorage.setItem('comparateur', JSON.stringify(formations))
        this.update({ formations })
      }
    }

  </script>



</comparateur>