{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
  Investment Game Decision – Round {{ player.round_number }}
{% endblock %}

{% block content %}

{% if player.round_number == 1 %}
  <p><strong>This is a practice round.</strong> The outcome of this round
     will <strong>not</strong> be used for payment.</p>
{% else %}
  <p><strong>This is a paying round.</strong></p>
{% endif %}

<p>You have <strong>{{ endowment }} coins</strong>.</p>

<p>There are two assets:</p>

<ul>
  <li>
    <strong>Asset A (risky):</strong>
    <ul>
      <li>Heads → {{ risky_up_pct }}% on the amount invested in Asset A</li>
      <li>Tails → {{ risky_down_pct }}% on the amount invested in Asset A</li>
    </ul>
  </li>
  <li>
    <strong>Asset B (safe):</strong>
    {{ safe_return_pct }}% on the amount invested in Asset B with certainty.
  </li>
</ul>

<p>
  Please enter how many of your {{ endowment }} coins you want to invest in
  <strong>Asset A</strong>. The remaining coins are automatically invested
  in <strong>Asset B</strong>.
</p>

{{ formfield 'investment' }}

{{ next_button }}

{% include "thesis_exp_main_task/_music_snippet.html" %}

<input type="hidden" name="time_spent" id="time_spent_field">

<script>
let start = Date.now();

document.querySelector("form").addEventListener("submit", function() {
    let end = Date.now();
    let seconds = (end - start) / 1000;
    document.getElementById("time_spent_field").value = seconds.toFixed(3);
});
</script>


{% endblock %}