{% block title %}
Well done!
{% endblock %}

{% block content %}

{{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
{{ endif }}

<p>
    On the next pages, we will ask you 15 questions to determine which books Alex gets.
</p>
<p>
    For example, one of them will be: <i>which books do you prefer Alex to receive? The ones with the original or fake
    notes?</i>
    There are other questions where we add a bonus for Alex to one of the options.
    You can click on this button to see all questions:
    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Questions
      </button>
</p>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">List of questions</h5>
            </div>
            <div class="modal-body">
                <p>Which books do you prefer Alex to receive?</p>
                <ol id="modalList">
                    
                </ol>
            </div>
            <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<p>
    We will randomly pick one of the questions and implement whatever option you choose. This means that any question can be the one that determines what Alex gets, so please answer    them carefully.
</p>

<p>
    When you are ready, click "Next."
</p>

<button style="float: right" class="btn btn-primary btn-large">Next</button>

{% endblock %}

{% block styles %}

<style>
.bold {
    font-weight: bold;
  }
</style>

{% endblock %}

{% block scripts %}

<script>
// Function to generate rows in the modal based on an input list of dollar values



function generateModalRows(dollarValues) {
    var modalList = document.getElementById("modalList");

    if ("{{original_first|safe}}" == "True"){

        modalList.innerHTML= `<li>...the ones with the <span style="color: blue">original notes</span>
                        <span class='bold'>and $1</span> or the ones with the <span style="color: chocolate">fake notes</span>?
                    </li>
                    <li>...the ones with the <span style="color: blue">original notes</span> or the ones with the
                        <span style="color: chocolate">fake notes</span>?</li>`

        // Loop through the dollar values and create list items for each value
        for (var i = 0; i < dollarValues.length; i++) {
            var boldPlus = document.createElement("span");
            boldPlus.className = "bold";
            boldPlus.textContent = "and $";
            boldPlus.textContent += dollarValues[i];

            var listItem = document.createElement("li");
            listItem.innerHTML = "...the ones with the <span style=\"color: blue\">original notes</span> or the ones with the" +
                " <span style=\"color: chocolate\">fake notes</span> ";
            listItem.appendChild(boldPlus.cloneNode(true));
            listItem.innerHTML += "?";
            modalList.appendChild(listItem);
        }
    } else if ("{{original_first|safe}}" == "False"){
        modalList.innerHTML= `<li>...the ones with the <span style="color: blue">fake notes</span>
                            or the ones with the <span style="color: chocolate">original notes</span> <span class='bold'>and $1</span>?
                        </li>
                        <li>...the ones with the <span style="color: blue">fake notes</span> or the ones with the
                            <span style="color: chocolate">original notes</span>?</li>`

        // Loop through the dollar values and create list items for each value
        for (var i = 0; i < dollarValues.length; i++) {
            var boldPlus = document.createElement("span");
            boldPlus.className = "bold";
            boldPlus.textContent = "and $";
            boldPlus.textContent += dollarValues[i];

            var listItem = document.createElement("li");
            listItem.innerHTML = "...the ones with the <span style=\"color: blue\">fake notes</span> " 
            listItem.appendChild(boldPlus.cloneNode(true));
            listItem.innerHTML += " or the ones with the <span style=\"color: chocolate\">original notes</span>?";
            modalList.appendChild(listItem);
        }
    }
}

// Call the generateModalRows function with the input list
var dollarValues = {{ dollarValues|safe }}
generateModalRows(dollarValues);
    
</script>

{% endblock %}