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

<style>
    .otree-body {
        max-width:100%
    }

    .circle_green {
        border: 1px solid green;
        padding: 7px;
        background: green;
        border-radius: 100%;
        margin: auto;
        width: 1%;
    }

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

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

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

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

    .circle_blue_off {
        border: 2px solid blue;
        padding: 7px;
        border-radius: 100%;
        margin: auto;
        width: 1%;
    }
</style>
<h2 style="margin-bottom: 15px;">Example Machine</h2>

<table class="table" style="width: 100%;  border-collapse: collapse; margin: auto; padding: 20px;">
    <tr>
        <!-- LEFT COLUMN -->
        <td style="width: 30%; padding-top: 35px;">



            <!-- ✅ NOTES PANEL (ADDED) -->
            <h4>Your notes:</h4>
                <textarea id="notes-display" class="form-control" readonly rows="6" style="resize: none; width: 100%;">{{ Example_notes }}</textarea>

        </td>

        <!-- RIGHT COLUMN -->
        <td style="width: 70%; vertical-align: top;">
            <table  style="width: 100%; border: 0; border-collapse: collapse;">
                <tr>
                    <th style="padding-top: 40px;"><h4>Make a Guess</h4></th>
                </tr>
                <tr>
                    <td style="padding-right: 20px;">
                        {{ table }}
                    </td>
                    <td style="width: 20%; vertical-align: top;">
                        <table >
                            <tr>
                                <th>Guess the Sound</th>
                            </tr>
                            <tr>
                                <td>{{ formfield 'guess_example' }}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
    </tr>
</table>

<div style="float: right;">
    {{ 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 }}