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

{% block title %}
    Partie 2
{% 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 mensuel est de 1000€ (une fois votre loyer payé) 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é est le suivant :
    <ul>
  <li> Je suis <strong>incapable de me déplacer à pied</strong></li>
  <li> J'ai <strong>des problèmes légers</strong> pour me laver ou m'habiller tout(e) seul(e) </li>
    <li> Je suis <strong>incapable</strong> 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">
 Suite à l'opération, vous êtes en convalescence pendant 1 mois et donc en arrêt maladie. Votre état de santé est :
    <ul>
    <li> J'ai des <strong>problèmes légers</strong> pour me déplacer à pied</li>
  <li> Je n'ai <strong>aucun problème</strong> pour me laver ou m'habiller tout(e) seul(e) </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€). Vous n'avez pas d'assurance santé.
</p>
<p class="text-justify">
Votre employeur a souscrit à un contrat de prévoyance qui vous octroie des 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é à domicile,
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>
    </p>
<p class="text-justify">
   <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 %}