{% block title %}
    {# CUSTOMER VIEW: WORKER COMPENSATION #}
{% endblock %}

{% block content %}
    <div class="alert alert-success text-lg-center lead" role="alert">
        <h2><strong>WORKER EFFORT AND COMPENSATION</strong></h2>
    </div>

    <div class="card mb-4">
        <div class="card-body" style="line-height: 1.6;">
            <p style="font-size:16pt" class="mb-4">
               The Worker must exert effort to correctly complete more decodes.
               The more decodes the Worker correctly completes, the higher the service quality.
            </p>

            <p style="font-size:16pt">
                Regardless of how many decodes they complete (i.e., their service quality), the Worker earns a fixed wage from the restaurant.
            </p>
                    <p style="LINE-HEIGHT:0.5pt"><br></p>


            {% if compensation_type == 'Fixed_wage' or compensation_type == 'fixed_wage' %}
            <p style="font-size:16pt">
                The Worker’s fixed wage is <b>higher</b> than the standard wage at similar restaurants.
            </p>

            {% elif compensation_type == 'Service_charge' or compensation_type == 'service_charge' %}
            <p style="font-size:16pt">
                The Worker’s fixed wage is the <b>standard</b> wage paid at similar restaurants. However,
                the <b>service charge</b> you pay the Worker increases the Worker’s compensation.
            </p>

            {% elif compensation_type == 'Pre_tip' or compensation_type == 'pre_tip' or compensation_type == 'Post_tip' or compensation_type == 'post_tip' %}
            <p style="font-size:16pt">
                The Worker’s fixed wage is the <b>standard</b> wage paid at similar restaurants. However, the <b>tip</b> you pay the
                Worker increases the Worker’s compensation.
            </p>
            {% endif %}
        </div>
    </div>

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

    <style>
        /* FORCING LEFT ALIGNMENT FOR THE NEXT BUTTON */
        .otree-btn-next {
            font-size: 16pt;
            margin-left: 0 !important;
            margin-right: auto !important;
            display: block !important;
        }
    </style>
{% endblock %}