{% extends "global/Page.html" %}
{% load otree %}

{% block content %}
<style>
    /* Styling for the Likert Grid */
    .likert-row {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
        background-color: #f8f9fa;
        padding: 12px;
        border-radius: 8px;
    }

    /* FIX: Match padding and structure of likert-row */
    .likert-labels {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        max-width: 100%;
        margin: 0.5rem auto 2.5rem auto;
        padding: 0 12px; /* Matches the 12px padding of the row above */
        text-align: center;
        font-size: 0.9rem;
        font-weight: bold;
        color: #495057;
    }

    /* Ensure text is centered within its specific grid cell */
    .likert-labels div {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        line-height: 1.2;
    }

    /* Force the first and last label to center under 1 and 7 */
    .likert-labels .label-start { grid-column: 1; }
    .likert-labels .label-mid   { grid-column: 4; }
    .likert-labels .label-end   { grid-column: 7; }

    .peq-question {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
    }

    .question-text {
        font-size: 14pt;
        margin-bottom: 1.2rem;
        display: block;
        line-height: 1.5;
    }

    /* Make radio buttons slightly larger for easier clicking */
    input[type="radio"] {
        transform: scale(1.2);
        margin-top: 8px;
    }
</style>

<div class="alert alert-success text-lg-center lead" role="alert">
    <h2><strong>POST-STUDY QUESTIONS</strong></h2>
</div>

<div class="card shadow-sm">
    <div class="card-body">

        <div class="peq-question">
            <span class="question-text">
                To what extent was the tip you chose to pay the Worker affected by the quality of their service (i.e., the number of decodes they completed)?
            </span>

            <div class="likert-row">
                {% for choice in form.TipReason_Effort_Customer %}
                    <div>{{ forloop.counter }}<br>{{ choice }}</div>
                {% endfor %}
            </div>

            <div class="likert-labels">
                <div class="label-start">Not at all</div>
                <div></div><div></div>
                <div class="label-mid">Somewhat</div>
                <div></div><div></div>
                <div class="label-end">Very much</div>
            </div>
        </div>

        <div class="peq-question">
            <span class="question-text">
                To what extent was the tip you chose to pay the Worker affected by the social pressure to tip?
            </span>

            <div class="likert-row">
                {% for choice in form.TipReason_SocialImage_Customer %}
                    <div>{{ forloop.counter }}<br>{{ choice }}</div>
                {% endfor %}
            </div>

            <div class="likert-labels">
                <div class="label-start">Not at all</div>
                <div></div><div></div>
                <div class="label-mid">Somewhat</div>
                <div></div><div></div>
                <div class="label-end">Very much</div>
            </div>
        </div>

        <div class="peq-question">
            <span class="question-text">
                To what extent was the tip you chose to pay the Worker affected by how you expect other Customers normally tip Workers?
            </span>

            <div class="likert-row">
                {% for choice in form.TipReason_SocialNorm_Customer %}
                    <div>{{ forloop.counter }}<br>{{ choice }}</div>
                {% endfor %}
            </div>

            <div class="likert-labels">
                <div class="label-start">Not at all</div>
                <div></div><div></div>
                <div class="label-mid">Somewhat</div>
                <div></div><div></div>
                <div class="label-end">Very much</div>
            </div>
        </div>

    </div>
</div>

<div class="my-3">
    <p style="font-size:16pt" class="mb-4">Please click ‘Next’ to continue.</p>
    {{ next_button }}
</div>
{% endblock %}