{{ extends "global/Page.html" }}
{{ block title }}Feelings on Purchase{{ endblock }}

{{ block content }}


<!-- Includes the background style from the UW Teton Lab experiments -->
{{ include_sibling 'uw_teton_survey.html' }}

<style>
    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: auto;
        height: 100px; /* Fixed height for consistency */
    }
    
    .response-table {
        width: 100%; /* Ensures the table uses the full width of its container */
        border-collapse: collapse; /* Neater borders */
    }
    
    .response-table td, .response-table th {
        border: 1px solid #ddd; /* Light grey border for each cell */
        text-align: center;
        padding: 8px;
    }
    
    .response-table tr:nth-child(even){background-color: #f2f2f2;}
    .response-table tr:hover {background-color: #ddd;}  
    
    .container {
        display: grid;
        grid-template-rows: auto;
        top: 0px;
        grid-row-gap: 5px; /* space between rows */
        position: sticky;
        background-color: #ebecec; /* Ensures the text is readable over any underlying content */
        z-index: 1000; /* Keeps the sticky element above other content */
    }
</style>

<!-- Intro paragraph, for spender -->
<p>{{ if player.participant.spender == 1 }}
    You just attempted to purchase the following item using money from the joint account.
</p>

<!-- Intro paragraph, for non-spender -->
<p>{{ else }}
    Your partner attempted to purchase the following item using money from the joint account.
</p>
    
{{ endif }}

<!-- Image of the selected item -->
<img src="{{ image_path }}" alt="Selected item for auction." class="center">

<!-- Description of the selected item displayed below the image -->
<p class="description">
    {{ description }}
</p>

<div class="container">
    <p id="first-element">
        We will ask you how you would feel purchasing the item at amounts ranging from $0 to $20. For instance, how would you feel if {{ if player.participant.spender == 1 }}you{{ else }}your partner{{ endif }} were able to purchase the item for $8 with money <b>earned by you</b>? How would you feel if {{ if player.participant.spender == 1 }}you{{ else }}your partner{{ endif }} were able to purchase the item for $8 with money <b>earned by your partner</b>? How would your feelings change if {{ if player.participant.spender == 1 }}you{{ else }}your partner{{ endif }} were instead paying $12 for the item? Please indicate your feelings using the smiley face scale above — ranging from very positive (Face A) to very negative (Face G).
    </p>
    
    <!-- Image of the Smiley Likert Scale -->
    <img src="{{ img_url }}" alt="Smiley face pain scale." id="second-element" class="center">
    
    <p id="third-element">
        Please indicate how you would feel about the purchase at the different prices, stating a letter (A-G) that best corresponds to your feelings.
    </p>

    <!-- Parent container for two-column layout -->
    <div style="display: flex; justify-content: space-between; gap: 10px; /* Adds 10px gap between each flex item */">

        <!-- Self-earned Likert Scale Questions Table -->
        <div>
            <p>
                Money YOU earned, from the joint account
            </p>
            <table class="response-table">
                <tr>
                    <td><strong>Price</strong></td>
                    <td><strong>A</strong></td>
                    <td><strong>B</strong></td>
                    <td><strong>C</strong></td>
                    <td><strong>D</strong></td>
                    <td><strong>E</strong></td>
                    <td><strong>F</strong></td>
                    <td><strong>G</strong></td>
                </tr>
            </table> <br>
        </div>

        <!-- Partner-earned Scale Questions Table -->
        <div>
            <p>
                Money YOUR PARTNER earned, the from joint account
            </p>
            <table class="response-table">
                <tr>
                    <td><strong>Price</strong></td>
                    <td><strong>A</strong></td>
                    <td><strong>B</strong></td>
                    <td><strong>C</strong></td>
                    <td><strong>D</strong></td>
                    <td><strong>E</strong></td>
                    <td><strong>F</strong></td>
                    <td><strong>G</strong></td>
                </tr>
            </table> <br>
        </div>

    </div>
    
</div>

<!-- Parent container for two-column layout -->
<div style="display: flex; justify-content: space-between; gap: 10px;">
    
    <!-- Self-earned Likert Scale Questions Table -->
    <div>
        <table class="response-table">
            {% for field in form %}
                {% if field.name.startswith('pop_self') %}
                    <tr>
                        <th>{{ field.label }}</th>
                        {% for choice in field %}
                            <td>{{ choice }}</td>
                        {% endfor %}
                    </tr>
                {% endif %}
            {% endfor %}
        </table> <br>
    </div>

    <!-- Partner-earned Scale Questions Table -->
    <div>
        <table class="response-table">
            {% for field in form %}
                {% if field.name.startswith('pop_partner') %}
                    <tr>
                        <th>{{ field.label }}</th>
                        {% for choice in field %}
                            <td>{{ choice }}</td>
                        {% endfor %}
                    </tr>
                {% endif %}
            {% endfor %}
        </table> <br>
    </div>
    
</div>

{{ next_button }}

{{ endblock }}