{{ block content }}
    <!-- Version 1.0 -->
    <link rel="stylesheet" href="{{ static 'global/base.css' }}">
    <div class="row">
        <div class="container-fluid">
            <div class="row text-center mt-5">
                <div class="alert alert-info" role="alert">
                    <h2>Sección {{nombre_seccion}}</h2>
                </div>
            </div>
            <div id="slide1" class="row my-3">
                <div class="card">
                    <div class="card-body">
                        <p>Ahora le pediremos hacer una predicción sobre lo que hicieron los demás participantes en la situación anterior. Si usted responde lo mismo que la mayoría de los participantes, le pagaremos <b>5 puntos</b> adicionales al pago que haya obtenido en la situación anterior. De lo contrario, si esta sección es elegida al momento de sortear las secciones, usted solo recibirá el pago de esta sin bonificación alguna. Como el sorteo de cuál de las secciones se pagará ocurrirá después de que todos hayan finalizado la sesión, le recomendamos que responda a todas las preguntas con el máximo cuidado y como si todas fueran a ser pagadas. </p>
                    </div>
                </div>
            </div>
            <div id="slide2" class="row my-3 d-none">
                <div class="card">
                    <div class="card-body">
                        <p><b>Le recordamos el enunciado de la situación anterior</b></p>
                        <p class="fst-italic">A continuación, se describe una situación real en la que una persona, el Individuo A, debe tomar una decisión. Al individuo A se le asignó un dado para que lo lanzara de manera anónima sin que nadie pudiera conocer el resultado del lanzamiento. Al individuo A se le paga de acuerdo con el número reportado como se muestra en la siguiente tabla:</p>
                        <div class="table-responsive">
                            <table class="table text-center align-items-center">
                                <tbody>
                                  <tr>
                                    <th scope="row">Número reportado</th>
                                    <td>1</td>
                                    <td>2</td>
                                    <td>3</td>
                                    <td>4</td>
                                    <td>5</td>
                                    <td>6</td>
                                  </tr>
                                  <tr>
                                    <th scope="row">Pago en COP</th>
                                    <td>0</td>
                                    <td>2000</td>
                                    <td>4000</td>
                                    <td>6000</td>
                                    <td>8000</td>
                                    <td>10000</td>
                                  </tr>
                                </tbody>
                              </table>
                        </div>
                    </div>
                </div>
            </div>
            <div id="slide3" class="row my-3 d-none">
                <div class="card">
                    <div class="card-body">
                        <p>Ahora, le pedimos que responda:</p>
                        <p class="text-center"><b>¿Cuál cree que haya sido la elección más frecuente entre las personas que participaron en la situación anterior?</b></p>
                        <div class="btn-group-vertical" role="group">
                            <button name="dg_expectative" value="1" class="btn btn-outline-dark text-start">1. Reportar 1</button>
                            <button name="dg_expectative" value="2" class="btn btn-outline-dark text-start">2. Reportar 2</button>
                            <button name="dg_expectative" value="3" class="btn btn-outline-dark text-start">3. Reportar 3</button>
                            <button name="dg_expectative" value="4" class="btn btn-outline-dark text-start">4. Reportar 4</button>
                            <button name="dg_expectative" value="5" class="btn btn-outline-dark text-start">4. Reportar 5</button>
                            <button name="dg_expectative" value="6" class="btn btn-outline-dark text-start">4. Reportar 6</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div id="back_div" class="col-3 text-center d-none">
                    <button type="button" id="back" class="btn btn-primary">Retroceder</button>
                </div>
                <div id="next_div" class="col-3 text-center">
                    <button type="button" id="next" class="btn btn-primary">Siguiente</button>
                </div>
            </div>
        </div>
    </div>
    <script src="{{ static 'global/animation.js' }}"></script>
    <script>
        let idx = 1;
        document.getElementById("back").onclick = () => {
            if (idx != 1){
                let prev = document.getElementById("slide"+idx)
                let next = document.getElementById("slide"+(idx-1))
                fade(prev, next);
                if (idx == 2){
                    fade_out(document.getElementById("back_div"));
                }
                else if(idx == 3){
                    fade_in(document.getElementById("next_div"))
                }
                idx--;
            }
        };
        document.getElementById("next").onclick = () => {
            if(idx < 4){
                if (idx == 2){
                    fade_out(document.getElementById("next_div"));
                }
                let prev = document.getElementById("slide"+idx)
                let next = document.getElementById("slide"+(idx+1))
                fade(prev, next);
                if (idx == 1){
                    fade_in(document.getElementById("back_div"));
                }
                idx++;
            }
        };
    </script>
{{ endblock }}