{{ block title }}Round {{ period }} Results{{ endblock }}
{{ block content }}
{% include 'RPD/style.html' %}
{% block styles %}
<style>
        .otree-body {
            max-width: 100%

        }

        .otree-title {
            text-align: center;
         }

        .fixed_table {
            table-layout:fixed;
            width:330px;
            height:380px;
        }
th {
  vertical-align: middle;
}
        td {
            text-align: center;
            font-size: 125%;
        }

        .btn-primary {
            box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.24), 0 2px 6px 0 rgba(0, 0, 0, 0.19);}

        .btn-primary:hover {
            box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        }



        .buttonC {
            background-color: {{Cbutton_color}};
            color: black;
            border: 1px black;
        }

        .buttonD {
            background-color: {{Dbutton_color}};
            color: black;
            border: 1px black;
        }

        .no-click {pointer-events: none;}

        .left {
            width: 50%;
        }

        .right {
            width: 50%;
            border-left: 2px solid black;
        }

        h1 {
            text-align: center;
        }

        h3 {
            text-align: center;
        }

        h4 {
            text-align: center;
        }

        .choice {
            margin-left: 0px
        }

        .payoffs {
            height: 75px;
            border: solid black;
            border-width: 2px;
        }

        .your-choice {
            border: none;
            width: 60px;
            font-weight: bold;
        }

        .empty {
            border: none;
        }



        .fixed_table_info {
            table-layout:fixed;
            height:130px;
            width:320px;
        }

        .info_cells {
            height: 20px;
            width: 60px;
            border: 0.5px solid black;
        }

        .info_cells_header {
            height: 20px;
            width: 50px;
            border: none;
        }

        .vertical-row {
            Float: left;
            height: 400px;
            width: 1px; /* edit this if you want */
            background-color: black
        }
        .noselect {
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Safari */
            -khtml-user-select: none; /* Konqueror HTML */
            -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
        }
    </style>
{% endblock %}
<div class="row">
  <div class="left">
    <div class="form-group required">
        <table class="table table-bordered text-center" style="width: auto; margin: auto">
            <tr>
                <th colspan="2" rowspan="2" class = "center"><h4>Round {{period}}</h4></th>
                <th colspan="2">Other's Choice</th>
            </tr>
            <tr>
                <th {{ if opp_decision }}{{opp_color}}{{endif}}>{{ C.C_TAG}}</th>
                <th {{ if not opp_decision }}{{opp_color}}{{endif}}>{{ C.D_TAG}}</th>
            </tr>
            <tr>
                <th rowspan="2"><span>Your Choice</span></th>
                <td {{ if my_decision }}{{my_color}}{{endif}}><button name="cooperate" value="True" class="btn btn-large buttonC no-click">{{ C.C_TAG}}</button></td>
                <td {{ if my_decision }}{{if opp_decision}}{{outcome_color}}{{else}}{{my_color}}{{endif}}{{elif opp_decision}}{{opp_color}}{{endif}}><b>{{C.PAYOFF_CC}}</b>, {{C.PAYOFF_CC}}</td>
                <td {{ if my_decision }}{{if opp_decision}}{{my_color}}{{else}}{{outcome_color}}{{endif}}{{elif not opp_decision}}{{opp_color}}{{endif}} ><b>{{ C.PAYOFF_CD }}</b>, {{C.PAYOFF_DC}}</td>
            </tr>
            <tr>
                <td {{ if not my_decision }}{{my_color}}{{endif}}><button name="cooperate" value="False" class="btn btn-large buttonD no-click">{{ C.D_TAG}}</button></td>
                <td {{ if not my_decision }}{{if opp_decision}}{{outcome_color}}{{else}}{{my_color}}{{endif}}{{elif opp_decision}}{{opp_color}}{{endif}}><b>{{C.PAYOFF_DC}}</b>, {{ C.PAYOFF_CD }}</td>
                <td {{ if not my_decision }}{{if not opp_decision}}{{outcome_color}}{{else}}{{my_color}}{{endif}}{{elif not opp_decision}}{{opp_color}}{{endif}}><b>{{C.PAYOFF_DD}}</b>, {{C.PAYOFF_DD}}</td>
            </tr>
        </table>
    </div>
      <p>
          Above is the outcome for round {{ period }}.
      </p>
    <p>
        The roll for this round was <i>{{ roll }}</i>.
        {{ if last_per }}
            This is more than {{ delta }}, so this match is over.</p>
            <p> You obtained <b>{{ payoff }}</b> from this match. </p>
            {{ if end }}
                <p> This was your final match.</p>
                <button class="btn btn-primary btn-large">
                    See Results
                </button>
            {{ else }}
                <button class="btn btn-primary btn-large">
                    New Match
                </button>
            {{ endif }}
        {{ else }}
            This is not more than {{ delta }}, so this match will last another round.</p>

            <button class="btn btn-primary btn-large">
                Next round
            </button>
        {{ endif }}
  </div>
  <div class="right">
    {% include 'RPD/left-info.html'%}
  </div>
</div>
{{ endblock }}