{% block title %}
    {# Add title here if needed #}
{% endblock %}


{% block content %}


    <div class="alert alert-success text-lg-center lead" role="alert">
        <h2><strong>CUSTOMER TIP (ROUND {{ subsession.round_number }})</strong></h2>
    </div>



<div class="card">
        <div class="card-body">
            <ol class="list-group list-group-flush">
                <li class="list-group-item">
    <p style="font-size: 16pt;">
        As the Customer, you now need to <b>decide how much to tip the Worker in Round {{ subsession.round_number }}</b>.
    </p>

     <p style="font-size: 16pt;">
        You need to decide how much to tip the Worker <b>before</b> they provide the service.
        The amount of tip can range from <b>zero up to 80 tokens</b>.
        The Worker will see the tip amount you pay <b>before</b> they provide the service
        (i.e., start working on the decode task).
    </p>

                </li>
<li class="list-group-item">
    <div class="form-group">
                                                <p style="LINE-HEIGHT:0.5pt"><br></p>

        {# oTree renders the label and input here; the CSS above ensures the label is 16pt #}
        <p style="font-size: 16pt; margin-bottom: 4px;"> <b>How much do you want to tip the Worker for their service in Round {{ subsession.round_number }}?</b></p>
       <div style="display: flex; align-items: center; gap: 10px; max-width: 400px;">
    {{ formfield 'tip' label="" }}
    <span style="font-size: 15pt;"> Tokens</span>
</div>

        <small class="form-text text-muted">Enter a whole number between 0 and 80 tokens.</small>
    </div>

                </li>
</ol>
</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 %}