{{ block css }}
    <link rel="stylesheet" href="{{ static 'global/style.css' }}"/>
{{ endblock }}

{{ block title }}
    Step 1: Selecting a Job Offer    
{{ endblock }}

{{ block content }}

    <p>
        Both Firm A and Firm B can make one of two possible job offers (see screenshot below):
    </p>
    <ul>
        <li>Job Offer #1: Worker's <b>Wage</b> is set by <u>the worker</u></li>
        <li>Job Offer #2: Worker's <b>Wage</b> is set by <u>you</u></li>
    </ul>
    <p>
        <img src="https://www.dropbox.com/scl/fi/gebd4v8zefog3el8tojn3/Step-1-Selecting-a-Job-Offer.png?rlkey=osxpzr9sp5ou04zrb9tzh3jgo&st=lb7wlo1v&raw=1" alt="Step 1: Selecting a Contract Offer" class="screenshot" style="max-width:450px; height:auto;">
    </p>
    <p>
        For <u>Firm A</u>, <b>Wage</b> can be one of <u>nine</u> possible amounts: 20, 25, 30, 35, 40, 45, 50, 55, or 60 Lira.<br>
    </p>
    <p>
        For <u>Firm B</u>, <b>Wage</b> can be one of <u>twelve</u> possible amounts: 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, or 75 Lira.
    </p>
    <p>
        The <b>Wage</b> is fixed, meaning, the worker will receive the <b>Wage</b> regardless of the <b>Production Level</b>.
    </p>
    <p>
        If you choose Job Offer #1, the worker will set their own <b>Wage</b>.
    </p>
    <p>
        If, instead, you choose Job Offer #2, you will set the worker's <b>Wage</b> (see screenshot below): 
    </p>
    <p>
        <img src="https://www.dropbox.com/scl/fi/utcof75xpkat6jltz56pw/Step-1b-Selecting-a-Job-Offer.png?rlkey=prdnnzu8c9zkphvzoisoh6wtx&st=mnokn1v1&raw=1" alt="Step 1b: Selecting a Contract Offer" class="screenshot" style="max-width:400px; height:auto;">
    </p>
    <p>
        You will be provided with a table of possible payoffs associated with a given <b>Wage</b> amount and each possible <b>Production Level</b>. Once a <b>Wage</b> has been entered, you may select “Calculate Payoffs.” Then, the table will populate with the associated payoffs for you and the worker based on the entered <b>Wage</b> amount and each possible <b>Production Level</b>. For example, if you enter a <b>Wage</b> of 50 Lira and select “Calculate Payoffs,” then the table would populate with the following values (see tables below):
    </p>
    <p>
        If you are assigned to act as Firm A:
    </p>
    <table class="payoff-table">
        <tr><th>Production Level</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th></tr>
        <tr><th>Your Payoff</th><td>-20</td><td>10</td><td>40</td><td>70</td><td>100</td><td>130</td><td>160</td><td>190</td><td>220</td><td>250</td></tr>
        <tr><th>Worker Payoff</th><td>50</td><td>48</td><td>46</td><td>44</td><td>42</td><td>40</td><td>38</td><td>36</td><td>34</td><td>32</td></tr>
    </table><br>
    <p>
        You may enter a new <b>Wage</b> amount and click “Calculate Payoffs” as many times as you wish to observe payoffs for different <b>Wage</b> levels.
    </p>
    <p>
        Remember, the worker will view both your offer and another firm’s offer and select one (see screenshot below):
    </p>
    <p>
        <img src="https://www.dropbox.com/scl/fi/h5qiair4qdqo28qtwj5m2/Step-1c-Selecting-a-Job-Offer.png?rlkey=359j9wuoiy7gp12nfsmfnxpj8&raw=1" alt="Step 1" class="screenshot" style="max-width:550px; height:auto;">
    </p>
    <p>
        Note: during the labor market, “X” will represent which job offer the firm is making (1 or 2), and “Y” will be the <b>Wage</b> amount in Lira of the firm’s offer if they choose to set the worker's <b>Wage</b>.  
    </p>

    {{ next_button }}

{{ endblock }}