{{ block title }}
Lottery decision
{{ endblock }}

{{ block global_styles  }}
    <link rel="stylesheet" href="{{ static 'global/style_sheet.css' }}">
{{ endblock }}

{{ block content }}
<script>
var clicks = 0;
function show_list() {
  var x = document.getElementById("lotteries_full_list");
  if (x.style.display === "none") {
    x.style.display = "block";
    clicks += 1;
    document.getElementById("unfold_list_tracker").value = clicks;
  } else {
    x.style.display = "none";
  }
}
</script>
<input type="hidden" id="unfold_list_tracker" name="unfold_list_tracker" />
<br>
<p>
    <b>The AI system recommends the following 5 lotteries to you.</b>
</p>
<p>
    You can now choose one from these 5 recommended lotteries.
    Alternatively, you can also view all 200 lotteries by clicking on the gray button.
</p>

<p>
<div>
    <table class="likert">
        <tr>
            <th>ID</th>
            <th>Lottery</th>
        </tr>
        {{ for i in lotteries_one_personalized }}
        <tr>
            <td><b>{{ i.ID_shuffled }}</b></td>
            <td class="likert_label">{{ i.text }}</td>
        </tr>
        {{ endfor }}
    </table>
</div>
</p>
<br>
<p>
    <b>{{ form.decision_round_one.label }}</b>
</p>
<p>
    {{ form.decision_round_one }}
</p>
<br>
<p>
<div style="text-align:center" >
<button class="btn btn-secondary" type="button" onclick="show_list()">Collapse/expand all lotteries</button>
</div>
</p>

<p>
<div id="lotteries_full_list" style="display:none">
    <table class="likert">
        <tr>
            <th>ID</th>
            <th>Lottery</th>
        </tr>
        {{ for i in lotteries_one_full }}
        <tr>
            <td><b>{{ i.ID_shuffled }}</b></td>
            <td class="likert_label">{{ i.text }}</td>
        </tr>
        {{ endfor }}
    </table>
</div>
</p>


</div>
<br>
<button id="next_button" class="otree-btn-next btn btn-primary"> Next </button>
{{ endblock }}