{{ 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 align="justify">Ahora, le pediremos hacer una predicción sobre lo que hicieron los demás participantes en la situación anterior.</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 align="justify" 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.
                            La situación involucra al individuo A, quien es emparejado al azar con otra persona, el Individuo B.
                            El emparejamiento es anónimo, lo que significa que ninguno de los dos individuos sabrá la identidad del otro.
                            Para esta decisión, tanto A como B, recibieron <b>10 puntos.</b> El individuo A tiene que decidir si dejar la dotación del otro como está <b>(10 puntos)</b> o reducirla a <b>5 puntos.</b></p>
                    </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="sd_expectative" value="10" class="btn btn-outline-dark text-start">1. Dejar la dotación de B como está <b>(Ambos reciben 10 puntos)</b></button>
                            <button name="sd_expectative" value="9" class="btn btn-outline-dark text-start">2. Reducir la dotación de B a la mitad <b>(A obtiene 9 puntos</b> y <b>B obtiene 5 puntos)</b></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 }}