{{ block title }}All Scenes{{ endblock }}
{{ block content }}

<style>
    .scenario-table {
        width: 100%;
        table-layout: fixed;
        padding: 0 10px; /* Padding on the sides */
    }
    .scenario-table img {
        width: 100%; /* Make images responsive */
        height: auto;
    }
    .scenario-table td {
        padding: 5px; /* Spacing between cells */
    }
    .otree-timer {
        display: none;
    }
</style>

Spend your endowment of <b>{{ player.endowment }}</b>:

<table class="scenario-table">
  <tr>
    <td style="width: 60%;">
        <img src="{{ static img1 }}" alt="{{ name }}" >
    </td>
    <td style="width: 60%;">
        <img src="{{ static img2 }}" alt="{{ name }}" >
    </td>
    <td style="width: 60%;">
        <img src="{{ static img3 }}" alt="{{ name }}" >
    </td>
    <td style="width: 60%;">
        <img src="{{ static img4 }}" alt="{{ name }}" >
    </td>
    <td style="width: 60%;">
        <img src="{{ static img5 }}" alt="{{ name }}" >
    </td>
  </tr>
  <tr>
        {{ for field in form }}
            {{ for choice in field }}
                <td>
                {{ choice }}
                effort: {{ choice.label }}
                </td>
            {{ endfor }}
        {{ endfor }}

  </tr>
</table>

{{ next_button }}

<!-- debug info stuff here
<div style="background-color: yellow; padding: 20px;">
    <h3>Debug Info</h3>
    Assigned feedback treatment: {{ player.participant.fb_treat }}<br>
    Assigned ses treatment: {{ player.participant.ses_treat }}<br>
    Endowment: {{ player.endowment }}<br>
</div> -->


<!-- TODO:
* could add if statement to only show number of images based on endowment
-->
{{ endblock }}