{% 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; /* Light grey background for the scale */
        padding: 10px;
        border-radius: 5px;
    }

    .likert-labels {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        max-width: 100%;
        margin: 0.5rem auto 2rem auto;
        padding: 0 10px; /* MATCHES THE 10px PADDING OF THE ROW ABOVE */
        text-align: center;
        font-size: 0.9rem;
        font-weight: bold;
        color: #555;
    }

    /* CENTER THE TEXT IN EACH GRID CELL */
    .likert-labels div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .peq-question {
        margin-bottom: 2.5rem;
        border-bottom: 1px solid #eee;
        padding-bottom: 1rem;
    }

    .peq-question:last-child {
        border-bottom: none;
    }

    /* Larger font for the questions */
    .question-text {
        font-size: 14pt;
        margin-bottom: 1rem;
        display: block;
    }
</style>

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

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

        <div class="peq-question">
            <span class="question-text">
                To what extent do you think the effort you put into the decode task was affected by the amount of fixed wage paid by the Restaurant?
            </span>

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

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

        {% with comp=player.session.config.compensation_type %}

            {% if comp == 'Pre_tip' or comp == 'Post_tip' or comp == 'Service_charge' %}
            <div class="peq-question">
                <span class="question-text">
                    To what extent do you think the effort you put into the decode task was affected by the amount of
                    {% if comp == 'Service_charge' %}
                        service charge
                        {% else %}
                        tip
                        {% endif %}
                    paid by the Customer?
                </span>

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

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






            {% endif %}


            {% if comp == 'Service_charge' %}
            <div class="peq-question">
                <span class="question-text">
                    To what extent do you think the service charge paid by the Customer is different from the fixed wage paid by the Restaurant?
                </span>

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

                <div class="likert-labels">
                    <div>Not at all</div>
                    <div></div><div></div>
                    <div>Somewhat</div>
                    <div></div><div></div>
                    <div>Very much</div>
                </div>
            </div>
            {% endif %}

        {% endwith %}

        <div class="peq-question">
            <span class="question-text">
                To what extent do you think the restaurant can observe the quality of your service (i.e., the effort you put into the decode task)?
            </span>

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

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

        <div class="peq-question">
            <span class="question-text">
                To what extent do you think the Customer can observe the quality of your service (i.e., the effort you put into the decode task)?
            </span>

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

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

    </div>
</div>


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

{% endblock %}