{{ block title }}Participant {{tag}}: Your Interpretation {{stage}}/{{num_q}}
{{ endblock }}
{{ block content }}
{% block styles %}

<style>

        .otree-body {
            max-width: 100%

        }
        .vertical-center {
            margin: 0;
            position: absolute;
            top: 50%;
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        .advice {
            text-align:left;
            border:1px solid black;
            border-padding:10px;
        }
        .otree-title {
            text-align: center;
         }

        .fixed_table {
            table-layout:fixed;
            width:330px;
            height:380px;
        }

        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);
        }

        .left {
            width: 40%;
        }

        .right {
            width: 60%;
        }

        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;
        }

        input[type="radio"]{
            border-radius: 50%;
            outline: 3px solid #999;
        }


        .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
        }
        .buttonC {
            background-color: {{Cbutton_color}};
            color: black;
            border: 1px black;
        }

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

        .buttonC:hover {
            background-color: {{Cbutton_hover}};
        }
h2 {
  font-size: 20px;
}

        .buttonD:hover {
            background-color: {{Dbutton_hover}};
        }
        span {
            min-height: 100px;
            display: inline-flex;
            align-items: center;
        }
        .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 style="padding-left:60px;padding-right:60px">
    <div class='row' style = 'border:1px solid black;padding:20px;margin-bottom: 1px;height:auto;width:800px;margin:0 auto;'>
        <h2 align="center"><b>Scenario: </b></h2>

        {{ if first }}

        <p align="center"> It is the first round of the experiment.</p>

        {{ else }}
        <div class="left">
            <p>It is round {{round}} of the experiment. In the previous round, suppose participant {{active_opp_tag}} made the choice shown on the right:</p>


            <p>
                Assume that {{if r}} you have {{else}} participant {{active_tag}} has{{endif}} acted according to your interpretation of the advice in previous rounds.
            </p>
        </div>
        <div class = "right">
            <div align="center">
                {% include 'GPD/surveyHistory.html' %}
            </div>
        </div>
        {{ endif }}
    </div>
    <div class="row" style = "height:400px;">
        <div class="left" style ="margin-top: 1cm;">
            {{ if r }}
                 <p>
                    You received the following advice from participant {{pred_tag}}:
                </p>
            {{ else }}
                <p>
                    You gave the following advice to participant {{succ_tag}}:
                </p>
            {{ endif }}
            <div style = 'border:1px solid black;padding:20px;margin-bottom: 1px;height:100px;overflow:auto;' align="left">
                <i>
                    {{advice}}
                </i>
             </div>
        </div>
        <div class = "right" style = "margin-top: 1cm;">
            <form>
                <input type="radio" id="Yes" name="clear" value="True" required >
                <label for="Yes"> The advice recommends a clear choice for {{ if r }}you{{ else }}participant {{ active_tag }}{{endif}} in this scenario.</label><br>
                <input type="radio" id="No" name="clear" value="False" required>
                <label for="No"> The advice does NOT recommend a clear choice for {{ if r }}you{{ else }}participant {{ active_tag }}{{endif}} in this scenario.</label>
            </form>
            <p style = "margin-top: 0.3cm;">
                Which choice does the advice suggest for {{ if r }}you{{ else }}participant {{ active_tag }}{{endif}} to take in round {{round}}?

                If the advice is not clear, click on your best guess.
            </p>
            <div class="form-group required">
        

                <table class="table table-bordered text-center" style="width: auto; margin: auto">
                    <tr>
                        <th colspan="2" rowspan="2"> Round {{round}}</th>
                        <th colspan="2">{{ active_opp_tag }}'s Choice</th>
                    </tr>
                    <tr>
                        <th>{{ C.C_TAG}}</th>
                        <th>{{ C.D_TAG}}</th>
                    </tr>
                    <tr>
                        <th rowspan="2"><span>
                            {{ if r }}Your Choice {{ else }} {{ active_tag }}'s Choice {{endif}}</span></th>
                        <td><button name="interpret" value="True" class="btn btn-primary btn-large buttonC">{{ C.C_TAG}}</button></td>
                        <td><b>{{C.PAYOFF_CC}}</b>, {{C.PAYOFF_CC}}</td>
                        <td><b>{{ C.PAYOFF_CD }}</b>, {{C.PAYOFF_DC}}</td>
                    </tr>
                    <tr>
                        <td><button name="interpret" value="False" class="btn btn-primary btn-large buttonD">{{ C.D_TAG}}</button></td>
                        <td><b>{{C.PAYOFF_DC}}</b>, {{ C.PAYOFF_CD }}</td>
                        <td><b>{{C.PAYOFF_DD}}</b>, {{C.PAYOFF_DD}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

{{ endblock }}