{% load otree static %}

{% block styles %}
    {% include '_templates/styles/intro_page.html' %}
{% endblock %}


{% block content %}
<div class="tab" style="display: block">
    <div class="card">
        <h5 class="card-header">Question 3</h5>
        <div class="card-body">
            <p>
                Suppose an employer employed two workers.<br>
                Worker 1 receives a wage of <b>{{ q3_wage_1 }}</b> and provides <b>{{ q3_effort_received_1 }}</b> effort.<br>
                Worker 2 receives a wage of <b>{{ q3_wage_2 }}</b> and provides <b>{{ q3_effort_received_2 }}</b> effort.<br>
            </p>
             <p>
                What profits would the employer and workers make in this case?
            </p>

            {{ formfield 'quiz3_worker1' }}
            {{ formfield 'quiz3_worker2' }}
            {{ formfield 'quiz3_employer' }}

            <div style="margin-top: 20px;"></div>
            <hr style="border-top: 1px solid #ccc;">
            <button type="button" class="btn btn-outline-secondary" id="show-info-button" onclick="showInformation()" style="display: block">Click for information on how profits are calculated</button>
            <button type="button" class="btn btn-outline-secondary" id="hide-info-button" onclick="hideInformation()" style="display: none">Click to hide information</button>

            {% if player.participant.is_employer == True %}
                {% include '_templates/includes/quizInfo_employer.html' %}
            {% else %}
                {% include '_templates/includes/quizInfo_worker.html' %}
            {% endif %}
          </div>
    </div>
</div>

<br>

{{ next_button }}

{% endblock %}

{% block scripts %}
    <script src="{% static 'javascript/hideInformation.js' %}"></script>
    <script src="{% static 'javascript/showInformation.js' %}"></script>
{% endblock %}