{{ block title }}
    Choice to cooperate or defect 
{{ endblock }}
{{ block content }}
<table>
    <tr>
        <td rowspan="4"> Other Player </td>
        <td colspan="3"> You </td>
    </tr>
    <tr>
        <td></td>
        <td style="...">Cooperate</td>
        <td style="...">Defect</td>
    </tr>
    <tr>
        <td>Cooperate</td>
        <td>{{Constants.payoff_both_cooperate}}, {{Constants.payoff_both_cooperate}}</td>
        <td>{{Constants.payoff_cooperate_defect_L}}, {{Constants.payoff_cooperate_defect_H}}</td>
    </tr>
    <tr>
        <td>Defect</td>
        <td>{{Constants.payoff_cooperate_defect_H}}, {{Constants.payoff_cooperate_defect_L}}</td>
        <td>{{Constants.payoff_both_defect}}, {{Constants.payoff_both_defect}}</td>
    </tr>
</table>
    {{ formfields }}
    {{ next_button }}

{{ endblock }}

{% block app_styles %}
    <style>
        table {
            border: 1px solid black;
        }
        td {
            border: 1px solid white;
            background-color: rgb(0,33,71);
            color: white;
            font-weight: bold;
            font-size: 19px;
            padding: 3px 10px 3px 10px;
            text-align: center;
        }
        
        .rangeslider,
        .rangeslider__fill {
            display:block;
            border-radius:10px;
        }

        .rangeslider {
            position:relative;
            margin: 10px auto;
        }

        .rangeslider:after{
            top:50%;
            left:0;
            right:0;
            content:'';
            width:100%;
            height:5px;
            margin-top:-2.5px;
            border-radius:5px;
            position:absolute;
            background:#3498db;
        }

        .rangeslider--horizontal{
            width:100%;
            height:28px;
        }

        .rangeslider--vertical{
            width:5px;
            min-height:150px;
            max-height:100%;
        }
        .rangeslider--disabled{
            filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
            opacity:0.4;
        }

        .rangeslider__fill{
            position:absolute;
            background:#64c832;
        }
        .rangeslider--horizontal .rangeslider__fill{
            top:0;
            height:100%;
        }
        .rangeslider--vertical .rangeslider__fill{
            bottom:0;
            width:100%;
        }

        .rangeslider__handle{
            top:50%;
            width:28px;
            height:28px;
            cursor:pointer;
            margin-top:-14px;
            background:white;
            position:absolute;
            background:#64c832;
            border: 3px solid #fff;
            border-radius:50% !important;
            display:inline-block;
        }
        .rangeslider__handle:active{
            background:#64c832;
        }

        .rangeslider__fill,
        .rangeslider__handle{
            z-index:1;
        }
        .rangeslider--horizontal .rangeslider__fill{
            top:50%;
            height:5px;
            margin-top:-2.5px;
        }

    </style>
{%endblock%}