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

{% block title %}
    Job search -- Part B
{% endblock %}

{% block style %}

    <style>
         input {
              display: block;
              margin : 0 auto;
         }
    </style>

{% endblock %}


{% block content %}

    <style>
        .my_style {
            font-family: Georgia, serif;
            font-size: 16px;
            letter-spacing: 2px;
            word-spacing: 2px;
            color: black;
            font-weight: normal;
            text-decoration: none;
            font-style: normal;
            font-variant: normal;
            text-transform: none;
            }
    </style>


    <div class="text-center" style="font-size:20px;">
        <p>
            <br><br>
            Now you need to decide the number of jobs you prefer.
            <br><br>
            The total job search cost will depend on the number of jobs.
            <br><br>
            Choose any number from <strong>0</strong> to <strong>5</strong>.
            <br><br>
            <strong> (Choosing 0 means that you are not going to look for jobs this round.) </strong>
        </p>
    <br>
    <div class="text-center" style="margin: auto; display: block;">
    {% formfields %}
    <br>
    <button class="otree-btn-next btn btn-primary">Number of Jobs</button>
    </div>
        <br><br>
     <button id="btn_reminder" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collpaseExample" aria-expanded="false" aria-controls="collapseExample">
        Instruction (show/hide)
        </button>
    </div>

        <div class="collapse" id="collapseExample">
          <div style="font-size:20px;">
        <br>
        <p>
        Suppose you have just lost your job, and now you are looking for a new job. In this process, you should consider:
            <ol>
                <li>
                    <strong>The minimum wage you are willing to accept.</strong>
                </li>
                <li>
                    How much effort you would put in looking for jobs. (<strong>How many jobs you will look for.</strong>)
                </li>
            </ol>
        </p>
        You will be able to look for jobs for 20 rounds.
        <p>
            <ol>
                <li>
                    If you fail to find a job in one round, you move to the next.
                </li>
                <li>
                    <strong>Once you find the job, the job search will end.</strong>
                    <ol>
                        <li>
                            <strong>Your earnings from new job equals to the wage rate multiplied by the rest of rounds (including the current round)</strong>.
                        </li>
                    </ol>
                </li>
            </ol>
        </p>
            Let us think about what you have when looking for jobs:
        <p>
            <ol>
                <li>
                    You have some money in your account.
                </li>
                <li>
                    Looking for jobs has a cost, and the cost depends on how many jobs you are looking for.
                </li>
                <li>
                    You may have Unemployment Insurance benefit for a period of time, and the amount and duration will vary.
                    <ol>
                        <li>
                            However,<strong>you won't have Unemployment Insurance anymore if you find a new job</strong>.
                        </li>
                    </ol>
                </li>
            </ol>
        </p>
        Finally, your earned points will be converted into U.S. dollars <strong>(20 points = 1 dollar)</strong>.
        <br><br>
        </div>
    </div>


    <br><br>
    <table style="border-collapse: collapse; width: 100%;" border="1" class="table table-bordered">
            <tbody>
                <tr>
                    <th style="width: 22%; text-align: center;">Number of Jobs</th>
                    <td style="width: 13%; text-align: center;">0</td>
                    <td style="width: 13%; text-align: center;">1</td>
                    <td style="width: 13%; text-align: center;">2</td>
                    <td style="width: 13%; text-align: center;">3</td>
                    <td style="width: 13%; text-align: center;">4</td>
                    <td style="width: 13%; text-align: center;">5</td>
                </tr>
                <tr>
                    <th style="width: 22%; text-align: center;">Cost</th>
                    <td style="width: 13%; text-align: center;">0 point</td>
                    <td style="width: 13%; text-align: center;">2 points</td>
                    <td style="width: 13%; text-align: center;">5 points</td>
                    <td style="width: 13%; text-align: center;">10 points</td>
                    <td style="width: 13%; text-align: center;">18 points</td>
                    <td style="width: 13%; text-align: center;">30 points</td>
                </tr>
            </tbody>
        </table>

        <script>
            $('#btn_reminder').click(function() {
            $('#collapseExample').toggle();
           // $(this).html( $(this).html() == 'Show instructions' ? 'Hide instructions' : 'Show instructions' );
            });
        </script>

    {% endblock %}