{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Deuxième partie
{% endblock %}

{% block scripts %}
<script>

var m1 = -1 ;
var m2 = 0 ;

function change(val) {
    document.getElementById('mois2').innerHTML = val;
    m2 = val ;
    m2_id = document.getElementById('mois2');
    m2_id.innerHTML=m2;
    m1 = 200 - val ;
    m1_id = document.getElementById('mois1');
    m1_id.innerHTML=m1;
}
    $(function () {
        $("#form").submit(function (event) {
            if (m1===-1) {
                event.preventDefault();
            }
        });
    });
</script>
{% endblock %}

{% block content %}
<p class="text-justify">
Imaginez que votre revenu disponible mensuel est de 1000€ (après charges et loyer) et que vous avez un accident qui entraîne
    un arrêt maladie de 2 mois. Vous devez vous faire opérer mais l'opération n'aura lieu que dans un mois. <br>
    Durant le mois d’attente avant l’opération, votre état de santé sera le suivant :
    <ul>
  <li> Je suis obligé(e) de rester alité(e)</li>
  <li> Je n'ai aucun problème pour prendre soin de moi (me laver, m'habiller) </li>
  <li> Je suis incapable d'accomplir mes activités courantes</li>
  <li> J'ai des douleurs ou une gêne modérée(s)</li>
  <li> Je ne suis ni anxieux(se) ni déprimé(e)</li>
    </ul>
    </p>
<p class="text-justify">
Pendant le mois d'arrêt après l'opération, vous êtes en convalescence et votre état de santé sera le suivant :
    <ul>
    <li> J'ai des <strong>problèmes légers</strong> pour me déplacer à pied</li>
  <li> Je n'ai aucun problème pour prendre soin de moi (me laver, m'habiller) </li>
  <li> J'ai des <strong>problèmes légers</strong>  pour accomplir mes activités courantes</li>
  <li> J'ai des douleurs ou une gêne modérée(s)</li>
  <li> Je ne suis ni anxieux(se) ni déprimé(e)</li>
    </ul>
    </p>
<p class="text-justify">
Avant l'accident vous n'aviez aucun problème de santé et l’opération n’a pas de conséquences sur votre santé à long terme.
 Après les deux mois d’arrêt maladie vous serez à nouveau en bonne santé et pourrez retourner travailler. Vous n’avez pas de
 dépenses liées à l’opération et votre revenu est entièrement préservé (égal à 1000€).
</p>
<p class="text-justify">
Votre employeur a souscrit à un contrat de prévoyance qui vous octroiedes bons d'achat d'un montant de 200€ pour votre arrêt maladie.
Ces bons d'achat ne peuvent être utilisés que pour certaines activités : repas d’un restaurant soit pris sur place ou livré,
abonnement à une plateforme de films et/ou séries pendant 1 mois, places pour un événement sportif, spectacle ou concert,
abonnement aux chaînes de télévision de votre choix pendant 1 mois, places de cinéma. <br>
Les bons d'achat ne sont valables qu’un seul mois et sont fournis au début du mois. Vous ne pouvez donc utiliser chaque mois que le montant des
    bons obtenus au début du mois. En particulier, les bons d'achat obtenus au début du premier mois et non utilisés ne peuvent être utilisés
    le mois suivant. <br>
   <strong> Vous devez choisir la répartition des bons d'achats entre les deux mois.</strong> <br>
 <strong> Indiquez quel montant vous voulez pour chaque mois en déplaçant le curseur. </strong>
   </p>
<p> <center>

    <input id="slider" name ="su12" type="range" min="0" max="200" step="10" oninput="change(this.value)">

    {{ form.su12.errors }}
    </center>
</p>
<table class="table">
        <tbody>
    <tr>
        <td align="left"><strong> Montant pour le premier mois (en €) &#x27a1;</strong></td>
        <td align="left"> <strong><div id="mois1"> </div> </strong></td>
        <td align="right"> <strong><div id="mois2"> </div></strong> </td>
        <td align="right"> <strong> &#11013; Montant pour le deuxième mois (en €)</strong> </td>
    </tr>
     </tbody>
 </table>

    {% next_button %}

{% endblock %}