{% load otree static %}

{{ block content }}
<style>
    .center{
        max-width: 60vw;
        margin-right: auto;
        margin-left: auto;
        display: block;
        text-align: center;
    }
    td{
        width: 15vw;
    }
    label{
        margin-left: 1vw;
        font-size: 1.2em;
    }
</style>

<img class="center" src="{{ static image}}" style="margin-bottom: 5vh">

<table class="center">
    <tr>
        <td>
            <input style="text-align: center" type="radio" name="a_tom" value="{{ values.0}}" id="0"><label for="0">  {{labels.0}}</label>
        </td>
        <td>
            <input type="radio" name="a_tom" value="{{ values.1}}" id="1"><label for="1">  {{labels.1}}</label>
        </td>
                <td>
            <input type="radio" name="a_tom" value="{{ values.2}}" id="2"><label for="2">  {{labels.2}}</label>
        </td>
                <td>
            <input type="radio" name="a_tom" value="{{ values.3}}" id="3"><label for="3">  {{labels.3}}</label>
        </td>
    </tr>
</table>

    {{ next_button }}

{{ endblock }}