{% 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 1</h5>
        <div class="card-body">
            <p>
                Suppose an employer employed no worker and a worker accepted no job. <br>
                What profits would the worker and the employer make in this case?
            </p>

            {{ formfield 'quiz1_worker' }}
            {{ formfield 'quiz1_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 %}