{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Job Market Signaling: Round {{ player.round_number }}
{% endblock %}

{% block content %}
    <p>
        {% if player.round_number != 3 %}
            The applicant has chosen to take {{ applicant_choice.lower }}.
            {% formfield player.choice label='Please choose a job to offer.' %}

            <table class="table-sm table-bordered d-sm-inline-block">
                    <thead>
                    <tr>
                        <th></th>
                        <th colspan="3" scope="col" class="text-center">Slacker (probability 0.6)<br></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th rowspan="3" scope="row" class="align-middle text-center">Employer</th>
                        <td></td>
                            <th>Easy</th>
                            <th>Difficult</th>
                    </tr>
                    <tr>
                        <th>Manager</th>
                            <td>(0, 100)</td>
                            <td>(0, 50)</td>
                    </tr>
                    <tr>
                        <th>Clerk</th>
                            <td>(60, 60)</td>
                            <td>(60, 10)</td>
                    </tr>
                </tbody>
            </table>
            <table class="table-sm table-bordered d-sm-inline-block">
                <thead>
                    <tr>
                        <th></th>
                        <th colspan="3" scope="col" class="text-center">Go-getter (probability 0.4)<br></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th rowspan="3" scope="row" class="align-middle text-center">Employer</th>
                        <td></td>
                            <th>Easy</th>
                            <th>Difficult</th>
                    </tr>
                    <tr>
                        <th>Manager</th>
                            <td>(100, 100)</td>
                            <td>(100, 80)</td>
                    </tr>
                    <tr>
                        <th>Clerk</th>
                            <td>(60, 60)</td>
                            <td>(60, 40)</td>
                    </tr>
                </tbody>
            </table>

        {% else %}
            The applicant has sent you the following message: 'I am a {{ applicant_choice }}.'
            {% formfield player.choice label='Please choose a job to offer.' %}

            <table class="table-sm table-bordered d-sm-inline-block">
                <thead>
                    <tr>
                        <th></th>
                        <th colspan="2" scope="col" class="text-center">Slacker (probability 0.6)<br></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th rowspan="2" scope="row" class="align-middle text-center">Employer</th>
                        <th>Manager</th>
                        <td>(0, 100)</td>
                    </tr>
                    <tr>
                        <th>Clerk</th>
                        <td>(60, 60)</td>
                    </tr>
                </tbody>
            </table>
            <table class="table-sm table-bordered d-sm-inline-block">
                <thead>
                    <tr>
                        <th></th>
                        <th colspan="2" scope="col" class="text-center">Go-getter (probability 0.6)<br></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th rowspan="2" scope="row" class="align-middle text-center">Employer</th>
                        <th>Manager</th>
                        <td>(100, 100)</td>
                    </tr>
                    <tr>
                        <th>Clerk</th>
                        <td>(60, 60)</td>
                    </tr>
                </tbody>
            </table>
        {% endif %}
        </p>

    {% next_button %}
{% endblock %}