{{ extends "global/Page.html" }}
{{ block content }}

<style>
     .otree-body {
        max-width:100%}
    .circle_green
    {
        border: 1px solid green;
        padding: 7px 7px;
        background: green;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }

        .circle_green_off
    {
        border: 2px solid green;
        padding: 7px 7px;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }

       .circle_red
    {
        border: 1px solid red;
        padding: 7px 7px;
        background: red;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }


    .circle_red_off {
        border: 2px solid red;
        padding: 7px 7px;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }

        .circle_blue
    {
        border: 1px solid blue;
        padding: 7px 7px;
        background: blue;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }


    .circle_blue_off {
        border: 2px solid blue;
        padding: 7px 7px;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }
</style>


    <table class="table" style="width: 100%; border: 0; border-collapse: collapse; margin: auto; padding: 20px; border-bottom: transparent;
vertical-align: center" >

    <tr>
        <td style="width: 10%; /* spacer */"></td>
        <td style="width: 30%"><h2>Machine {{round}}:</h2>


            <h4>Notes:</h4>
            <textarea id="notes-display" class="form-control" readonly rows="6" style="resize: none; width: 100%;">{{notes}}</textarea>

        </td>
        <td style="width: 10%; /* spacer */"></td>
        <td style="width: 40%; padding: 0; vertical-align:top">
            <table class="table" style="width: 100%; border: 0; border-collapse: collapse; margin: auto; padding: 20px;
            border-bottom: transparent; white-space: nowrap">
                <tr>
                    <th style="padding-top: 70px"><h4>Guess</h4></th> <th> </th>
                </tr>
                <tr>
                    <td style="padding-right: 0">{{table}} </td>
                    <td style="width: 10%; padding: 0; vertical-align:top"><h3></h3>
            <table class="table"> <tr><th>Guess the Sound:</th></tr>
                <tr><td>{{formfield 'guess27'}} </td></tr></table>
        </td>
                </tr>
            </table>
        </td>
        <td style="width: 10%; /* spacer */"></td>



    </tr>

</table>

<div style="text-align: right; margin-right: 10%;"> {{ next_button }} </div>


<script>
    window.addEventListener('load', function() {
        var w = sessionStorage.getItem('notesTAWidth');
        var h = sessionStorage.getItem('notesTAHeight');
        if (w && h) {
            var ta = document.getElementById('notes-display');
            if (ta) {
                ta.style.width = w + 'px';
                ta.style.height = h + 'px';
            }
        }
    });
</script>
{{ endblock }}