{% extends "global/Base.html" %}
{% load staticfiles %}
{% load otree_tags %}

{% block styles %}
<style type = "text/css">

    /* for table formatting */
    .negative { color : red; }
    .positive { color : green; }
    table {
      margin-right: auto;
      margin-left: auto;}
    table th {
      padding-right: 0.5em;
      padding-left: 0.5em;
      text-align: center;
    width: 80px;}
    table td{
      padding-right: 0.5em;
      padding-left:0.5em;
      text-align: center;
      width: 50px;}
    table tr{column-rule: 6px double #ff00ff}


    .header_container{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 75px;
    }
    /* center the button */
    .center {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 150px;
    }
</style>

{% endblock %}




{% block title %}
Summary of return simulations
{% endblock %}





{% block content %}

<!-- Create the table with return pairs -->
<table>
    <tr  style="border-bottom:1px solid black">
        <th> Return simulation </th>
        <th> Asset 1</th>
        <th> Asset 2</th>
    </tr>
    {% for row in inputs %}
    <tr>
        <td> {{ row.sample_number }} </td>
        <td class = {{ row.color1 }}> {{ row.r1 }} </td>
        <td class = {{ row.color2 }}> {{ row.r2 }} </td>
    </tr>
    {% endfor %}
    <tr>
      <td> &nbsp; </td>
    <tr>
      <tr>
        <td> &nbsp; </td>
        <td> {% next_button %} </td>
        <td> &nbsp; </td>
      <tr>
</table>

<!-- <div class = "center">
      {% next_button %}
</div> -->










<script>

// Short JavaScript to format the otree header, center and change font size
        (function ($) {
            document.getElementsByTagName('h2')[0].style.fontSize = "1.5em";
            document.getElementsByTagName('h2')[0].style.textAlign = "center";

    }(jQuery));
    $( document ).ready(function() {

    });
</script>








{% endblock %}