{{ block title }}Réunion des copropriétaires{{ endblock }}
{{ block content }}
<div class="tab">
    <!-- Duplicate this div if you have more than 3 pages of instructions ... -->
    <div class="card-header bg-transparent mainheader">
    <h4>
            Instructions (1/2)
    </h4>
</div>
<br>

    Merci de lire attentivement la situation fictive dans laquelle vous vous trouvez : <br> <br>
    Vous résidez dans une copropriété avec <b><mark style="background-color: yellow;">3 autres personnes</mark></b>.<br>
    Au cours de <b><mark style="background-color: yellow;">5 différentes réunions</mark></b>, vous allez avoir l'occasion de choisir les plantes qui seront utilisées
    pour les espaces communs de votre copropriété. Plus précisément, vous aurez le choix entre deux
    types de plantes : <br> <ul>
    <li><b><mark style="background-color: yellow;">Le bouquet 1</mark></b> se compose de plantes qui ont un<b> <mark style="background-color: yellow;">impact positif sur la pollinisation</mark></b>. </li>
    <li><b><mark style="background-color: yellow;">Le bouquet 2</mark></b> se compose de <b><mark style="background-color: yellow;">plantes exotiques</mark></b>. </li>
</ul> <br>
    Au début de chaque réunion, vous serez en possession d'un montant de 10 €. Choisir le bouquet 1 ou le bouquet 2
    vous coutera une certaine partie de ce montant. <b>Ce coût dépend à la fois de votre choix
    de bouquet, mais aussi de celui d’un autre membre de la copropriété</b>.<br> <br>
    <b>Seuls deux copropriétaires seront présents à chaque réunion</b>, <mark style="background-color: yellow;"> vous et un autre copropriétaire </mark>. Le second copropriétaire avec lequel vous
    choisirez ne sera pas le même au cours de deux réunions consécutives. .<br> <br>

    Par exemple: <br>
    Si chaque copropriétaire est appelé par une lettre, les copropriétaires pourront être répartis de la
    manière suivante : <br>
    Réunion 1 : A – B / C – D <br>
    Réunion 2 : A – C / B – D<br>
    Réunion 3 : A – B / C – D<br>
    Ect ….
<br> <br>
    <button type="button" class="btn btn-primary btn-tab" data-offset="1">Suivant</button>
</div>

<div class="tab">
    <!-- Duplicate this div if you have more than 3 pages of instructions ... -->
    <div class="card-header bg-transparent mainheader">
    <h4>
            Instructions (2/2)
    </h4>
</div>
<br>

    <b>Choix</b> : A chaque réunion, vous devrez donc faire un choix entre les plantes pollinisatrices ou les plantes
    exotiques. <br> <br>
    Vous devrez cliquer soit sur le  <b>bouton « plantes pollinisatrices »</b> soit
    sur le <b>bouton « plantes exotiques »</b>. <br> <br>
    Ce choix impactera <b>le montant qu’il vous restera en fonction de votre choix, et de celui de l'autre copropriétaire</b> qui est
    avec vous pour cette réunion. <br> <br>
    Voici un exemple d'une matrice de gain (avec des lettres à fins d'exemple) : <br> <br>
    Dans chaque cellule de cette matrice, <b><mark style="background-color: yellow;">le montant de gauche (en gras) correspond au montant que vous obtiendrez</mark>
    après votre dépense et <mark style="background-color: yellow;">le montant de droite au montant qu’il reste à l’autre copropriétaire</mark></b>.<br> <br>

    <table class='table table-bordered text-center'
       style='width: auto; margin: auto'>
    <tr>
        <td colspan=2 rowspan=2></td>
        <td colspan=2>L'autre copropriétaire</td>
    </tr>
    <tr>
        <td>Plantes pollinisatrices</td>
        <td>Plantes exotiques</td>
    </tr>
    <tr>
        <th rowspan=2><span style="transform: rotate(-90deg);">Vous</span></th>
        <th><button type ='button' class="otree-btn-next btn btn-primary"> Plantes pollinisatrices </button> </th>
        <td><b>X €</b> , X €</td>
        <td><b>Z €</b> , Y €</td>
    </tr>
    <tr>
        <th> <button type = "button" class="otree-btn-next btn btn-primary"> Plantes exotiques</button></th>
        <td> <b>Y €</b> ,Z €</td>
        <td><b>Q €</b> , Q €</td>
    </tr>
</table>

    <br> <br>
    <b><mark style="background-color: yellow;">A chaque réunion, les coûts évoluerons</mark></b>, veuillez donc particulièrement faire attention à la matrice de la réunion de prendre
    votre décision. <br><br>
    Pour rappel, <b>vos choix ainsi que le montant de votre paiement sont totalement anonymes</b>. <br> <br>
        Pour passer à la présentation de la première réunion, merci de cliquer sur le bouton suivant.
    <br> <br>


    <button type="button" class="btn btn-primary btn-tab" data-offset="-1">Précédent</button>
        <button class="btn btn-primary">Suivant</button>
</div>

    <script>
    let activeTab = 0;

    function showCurrentTabOnly() {
        let tabIndex = 0;
        for (let tab of document.getElementsByClassName('tab')) {
            tab.style.display = tabIndex === activeTab ? 'block' : 'none';
            tabIndex++;
        }
    }

    showCurrentTabOnly();
    for (let btn of document.getElementsByClassName('btn-tab')) {
        btn.onclick = function () {
            activeTab += parseInt(btn.dataset.offset);
            showCurrentTabOnly();
        }
    }
</script>

{{ endblock }}