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

{% block title %}
    Decision Page
{% endblock %}

{% block content %}
  {% include Constants.instructions_template %}

    <p>
    You received ${{endowment}}. You have two choices:
      <br> 1) Keep ${{sure_amount}} out of your ${{endowment}}
      <br> or
      <br> 2) Gamble to keep all of your ${{endowment}}. The odds are shown below:
    </p>

    <div id="piechart"></div>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script type="text/javascript">
      // Load google charts
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      // Draw the chart and set the chart values
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['Outcome', 'Probability'],
        ['Win', {{gamble_chance}}],
        ['Lose', {{lose_chance}}],
      ]);

        // Optional; add a title and set the width and height of the chart
        var options = {'title':'Gambling Odds', 'width':550, 'height':400};

        // Display the chart inside the <div> element with id="piechart"
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
      </script>

    {% formfield player.gambled label="Choice" %}
      {% next_button %}

{% endblock %}