{% extends "global/Page.html" %}

{% load otree static %}
{% load analytical %}
{% load widget_tweaks %}

{% block styles %}
    <style>
    .otree-body {
        background-color: white;
        color: black;
        width: 450px;
        height: 100%;
        position: fixed;
        z-index: 1;
        overflow-x: hidden;
        padding-top: 0px;
        top:0;
        margin-top: -8px;
    }

    .otree-btn-next {
        background-colour: green;
    }
    .otree-title {
        color: black;
        text-align: left;
        top: 0;
        padding-top: -0px;
        margin-top: -8px;
    }

    .left {
        left: 0;
        background-color: white;
    }

    .right {
        height: 100%;
        position: fixed;
        left: 450px;
        top: 0;
        right: 0;
        background-color: white;
        overflow-x: hidden;
    }

    .right h4{
        margin-top: 50px;
        margin-right: 100px;
        margin-left: 100px;
    }
    .right p{
        margin-right: 100px;
        margin-left: 100px;
    }
    .right ul{
        margin-right: 100px;
        margin-left: 100px;
    }
    .right table{
        margin-right: 100px;
        margin-left: 100px;
    }

    .initial {
        height: 100%;
        position: fixed;
        left: 550px;
        right: 100px;
        background-color: white;
        overflow-x: hidden;
        text-align: center;
    }

    .centered img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 850px;
    }


    centered {
        width: 100%;
        margin-left: 0;
    }

    table, td ,th {
        border: 0px solid black;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th {
        text-align: center;
    }

    td {

    }

    tr {
        height: 45px;
    }

    table.right_bot2{
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 20px;
        height: 100%;
    }

    td.right_bot2{
        height: 100px;
    }

    button.left{
        display: inline;
    }


    .pic1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-bottom:50px;
    }

    </style>
{% endblock %}

{% block content %}
{% if not failed %}

{% analytical_body_top %}
{{ form.subreq.errors }}
{{ form.CV_1.as_hidden}}
{{ form.CV_2.as_hidden}}
{{ form.CV_3.as_hidden}}
{{ form.CV_4.as_hidden}}
{{ form.CV_5.as_hidden}}
{{ form.CV_6.as_hidden}}
{{ form.CV_1_A.as_hidden}}
{{ form.CV_2_A.as_hidden}}
{{ form.CV_3_A.as_hidden}}
{{ form.CV_4_A.as_hidden}}
{{ form.CV_5_A.as_hidden}}
{{ form.CV_6_A.as_hidden}}
{{ form.CV_1_B.as_hidden}}
{{ form.CV_2_B.as_hidden}}
{{ form.CV_3_B.as_hidden}}
{{ form.CV_4_B.as_hidden}}
{{ form.CV_5_B.as_hidden}}
{{ form.CV_6_B.as_hidden}}
{{ form.CV_1_C.as_hidden}}
{{ form.CV_2_C.as_hidden}}
{{ form.CV_3_C.as_hidden}}
{{ form.CV_4_C.as_hidden}}
{{ form.CV_5_C.as_hidden}}
{{ form.CV_6_C.as_hidden}}
{{ form.Notes_1.as_hidden}}
{{ form.Notes_2.as_hidden}}
{{ form.Notes_3.as_hidden}}
{{ form.Notes_4.as_hidden}}
{{ form.Notes_5.as_hidden}}
{{ form.Notes_6.as_hidden}}

    <div>

        {% if not submitted1 %}

                Please score each Résumé out of 10. Please <b>score the worst résumé 0</b> and <b>score the best
        résumé 10</b>.

        {% elif not submitted2 %}

                Please give each Résumé a score out of ten for <b>Experience</b>: which candidates have the most experience?.

        {% elif not submitted3 %}

                Please give each Résumé a score out of ten for <b>Teamwork</b>: candidates who will fit well into our team.

        {% elif not submitted4 %}

                Please give each Résumé a score out of ten for <b>Customer Service</b>: candidates with strong social skills.

        {% elif not submitted_all %}

                Do you want to change any of your original scores?

        {% endif %}
        <div>
        {% if treated1 %}
        <button name="CV_to_view" value=21 class="btn btn-link btn-large">Click here to view job description / Instructions.</button>
        {% elif treated2 %}
        <button name="CV_to_view" value=22 class="btn btn-link btn-large">Click here to view job description / Instructions.</button>
        {% else %}
        <button  name="CV_to_view" value=0 class="btn btn-link btn-mini">Click here to view job description / Instructions.</button>
        {% endif %}
        </div>

        {% if not initial and not player.ins_viewing %}
        <div class="right">
            <div class="centered img">
                <img src="{% static image_path %}"  />
            </div>
        </div>

        {% elif not initial and player.ins_viewing %}
            <div class="right">

                <h4> <b> Instructions </b></h4>
                {% if treated1 == 1 %}
                    <p>
                        This is an <b> experiment conducted by the FAU university</b>, please read the instructions carefully.
                        Your task is to read six résumés and give each one a score out of ten.
                        You should give a score of 0 to the worst résumé and a score of 10 to the best résumé.
                        You should give each a unique score so you can always say that one is better or worse than another.

                    </p>


                {% elif treated2 == 1 %}

                    <p>
                        Your task to read six résumés and give each one a score out of ten.
                        Your scores will be <b>further evaluated by our HR team</b>.
                        You should give a score of 0 to the worst résumé and a score of 10 to the best résumé.
                        You should give each a unique score so you can always say that one is better or worse than another.
                    </p>


                {% else %}

                    <p>
                        Your task to read six résumés and give each one a score out of ten.
                        You should give a score of 0 to the worst résumé and a score of 10 to the best résumé.
                        You should give each a unique score so you can always say that one is better or worse than another.
                    </p>


                {% endif %}

                <img src="{% static "Picture21.jpg" %}"/ class="pic1" width=50% class="pic1" hspace="30">

                <h4> <b> Place of Work: </b>Luxury Retreat and Wellness Resort</h4>
                <p>
                    Our beach-side resort offers 100 luxury rooms nestled in tranquil surroundings allowing our guests to unwind and
                    get away from it all and enjoy the area. We offer a spa, a wellness center, yoga classes and our restaurant
                    offers a wide range of local and seasonal cuisine. Nearby beaches, trails, wine tastings, and golf opportunities
                    are all on our doorstep.
                 </p>


                <h4>  <b> Job Description: </b>Office Manager</h4>
                <p>
                    The Office Manager will be responsible for the daily management of all administrative and office support
                    operations. We are looking for an experienced manager with excellent customer service skills who will fit well
                    into our team. Candidates should be hard-working, organised and reliable.
                </p>

                <h4><b>Duties Include:</b></h4>
                    <ul>
                        <li>Overseeing office activities</li>
                        <li>Dealing with guests in courteous and timely manner</li>
                        <li>On-boarding of new employees</li>
                        <li>Coordinating and creating agenda for monthly staff meetings</li>
                        <li>Promoting a friendly and welcoming environment for guests</li>
                    </ul>

                <h4><b>Criteria:</b></h4>
                <table class="table" border="0px">
                    <tr>
                        <td ></td>
                        <td >We are looking for candidates who...</td>
                    </tr>
                    <tr>
                        <th>Experience</th>
                        <td>..have relevant hospitality experience.</td>
                    </tr>
                    <tr>
                        <th>Teamwork</th>
                        <td>..will fit into our team and have strong interaction skills.</td>
                    </tr>
                    <tr>
                        <th>Customer Service</th>
                        <td>..are professional and communicative.</td>
                    </tr>
                </table>


                <p style="margin-top:50px; margin-bottom:50px;">
                    You can view the résumés by clicking on the buttons on the left hand side. Please write the name of the
                    applicant in the box provided. Some information on the résumés may be blacked out to protect the privacy
                    of the applicant. When you are finished rating all six résumés, click the submit button.
                    Remember you have to give a score for each résumé to complete the task.
                </p>
                <img src="{% static "Picture1.jpg" %}" class="pic1" hspace="50" / width=30% >
            </div>


        {% elif not submitted1 %}
            <div class="initial">
            {% if treated1 %}
                <p> You can view the résumés by clicking on the links on the left hand side. Please write the name of
                    the applicant in the box provided.  If you have <b> any comments for the experimenter</b> please use the<b> box which
                    will appear in the bottom left</b> when you click on each résumé. Some information on the résumés may be blacked out to protect the privacy of the
                    applicant. When you are finished rating all six résumés, click the
                    submit button.</p>
            {% elif treated2 %}
                <p> You can view the résumés by clicking on the links on the left hand side. Please write the name of
                    the applicant in the box provided. If you have <b> any comments for the HR team</b> please use the<b> box which
                    will appear in the bottom left</b> when you click on each résumé. Some information on the résumés may be blacked out to protect the privacy of the
                    applicant.  When you are finished rating all six résumés, click the
                    submit button.</p>
            {% else %}
                <p> You can view the résumés by clicking on the links on the left hand side. Please write the name of
                    the applicant in the box provided. Some information on the résumés may be blacked out to protect the privacy of the
                    applicant. When you are finished rating all six résumés, click the submit button. </p>
            {% endif %}
            </div>

        {% elif not submitted2 %}
            <div class="initial">
                <p> Quickfire Round Part 1 of 3: Give each résumé an <b> Experience </b> score. </p>
            </div>
        {% elif not submitted3 %}
            <div class="initial">
                <p> Quickfire Round Part 2 of 3: Give each résumé a <b> Teamwork </b> score. </p>
            </div>
        {% elif not submitted4 %}
            <div class="initial">
                <p> Final Quickfire Round: Give each résumé a <b> Customer Service </b> score. After this you have
                    finished the main task. </p>
            </div>
        {% elif not submitted_all %}
            <div class="initial">
                <p> You have finished the main task. Do you want to change any of the original scores?</p>
                <p>Click submit once you are happy to go onto the survey.</p>
            </div>
        {% endif %}


        <div>
            <table>
                <tr>
                    <th>Resume Link</th>
                    <th>Name</th>
                    {% if not submitted1 %}
                    <th>Score</th>
                    {% elif not submitted2 %}
                    <th>Experience Score</th>
                    {% elif not submitted3 %}
                    <th>Teamwork Score</th>
                    {% elif not submitted4 %}
                    <th>Customer Service Score</th>
                    {% else %}
                    <th>Score</th>
                    {% endif %}
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=1 class="btn btn-link btn-large">Résumé 1</button></td>
                    <td>{{ form.Name_1 | attr:"placeholder:Applicant Name"}}</td>
                    {% if not submitted1 %}
                    <td>{{ form.CV_1 | attr:"placeholder:Score"}}</td>
                    {% elif not submitted2 %}
                    <td>{{ form.CV_1_A | attr:"placeholder:Score"}}</td>
                    {% elif not submitted3 %}
                    <td>{{ form.CV_1_B | attr:"placeholder:Score"}}</td>
                    {% elif not submitted4 %}
                    <td>{{ form.CV_1_C | attr:"placeholder:Score"}}</td>
                    {% else %}
                    <td>{{ form.CV_1 | attr:"placeholder:Score"}}</td>
                    {% endif %}
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=2 class="btn btn-link btn-large">Résumé 2</button></td>
                    <td>{{ form.Name_2 | attr:"placeholder:Applicant Name"}}</td>
                     {% if not submitted1 %}
                    <td>{{ form.CV_2 | attr:"placeholder:Score"}}</td>
                    {% elif not submitted2 %}
                    <td>{{ form.CV_2_A | attr:"placeholder:Score"}}</td>
                    {% elif not submitted3 %}
                    <td>{{ form.CV_2_B | attr:"placeholder:Score"}}</td>
                    {% elif not submitted4 %}
                    <td>{{ form.CV_2_C | attr:"placeholder:Score"}}</td>
                    {% else %}
                    <td>{{ form.CV_2 | attr:"placeholder:Score"}}</td>
                    {% endif %}
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=3 class="btn btn-link btn-large">Résumé 3</button></td>
                    <td>{{ form.Name_3 | attr:"placeholder:Applicant Name"}}</td>
                     {% if not submitted1 %}
                    <td>{{ form.CV_3 | attr:"placeholder:Score"}}</td>
                    {% elif not submitted2 %}
                    <td>{{ form.CV_3_A | attr:"placeholder:Score"}}</td>
                    {% elif not submitted3 %}
                    <td>{{ form.CV_3_B | attr:"placeholder:Score"}}</td>
                    {% elif not submitted4 %}
                    <td>{{ form.CV_3_C | attr:"placeholder:Score"}}</td>
                    {% else %}
                    <td>{{ form.CV_3 | attr:"placeholder:Score"}}</td>
                    {% endif %}
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=4 class="btn btn-link btn-large">Résumé 4</button></td>
                    <td>{{ form.Name_4 | attr:"placeholder:Applicant Name"}}</td>
                     {% if not submitted1 %}
                    <td>{{ form.CV_4 | attr:"placeholder:Score"}}</td>
                    {% elif not submitted2 %}
                    <td>{{ form.CV_4_A | attr:"placeholder:Score"}}</td>
                    {% elif not submitted3 %}
                    <td>{{ form.CV_4_B | attr:"placeholder:Score"}}</td>
                    {% elif not submitted4 %}
                    <td>{{ form.CV_4_C | attr:"placeholder:Score"}}</td>
                    {% else %}
                    <td>{{ form.CV_4 | attr:"placeholder:Score"}}</td>
                    {% endif %}
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=5 class="btn btn-link btn-large">Résumé 5</button></td>
                    <td>{{ form.Name_5 | attr:"placeholder:Applicant Name"}}</td>
                     {% if not submitted1 %}
                    <td>{{ form.CV_5 | attr:"placeholder:Score"}}</td>
                    {% elif not submitted2 %}
                    <td>{{ form.CV_5_A | attr:"placeholder:Score"}}</td>
                    {% elif not submitted3 %}
                    <td>{{ form.CV_5_B | attr:"placeholder:Score"}}</td>
                    {% elif not submitted4 %}
                    <td>{{ form.CV_5_C | attr:"placeholder:Score"}}</td>
                    {% else %}
                    <td>{{ form.CV_5 | attr:"placeholder:Score"}}</td>
                    {% endif %}
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=6 class="btn btn-link btn-large">Résumé 6</button></td>
                    <td>{{ form.Name_6 | attr:"placeholder:Applicant Name"}}</td>
                     {% if not submitted1 %}
                    <td>{{ form.CV_6 | attr:"placeholder:Score"}}</td>
                    {% elif not submitted2 %}
                    <td>{{ form.CV_6_A | attr:"placeholder:Score"}}</td>
                    {% elif not submitted3 %}
                    <td>{{ form.CV_6_B | attr:"placeholder:Score"}}</td>
                    {% elif not submitted4 %}
                    <td>{{ form.CV_6_C | attr:"placeholder:Score"}}</td>
                    {% else %}
                    <td>{{ form.CV_6 | attr:"placeholder:Score"}}</td>
                    {% endif %}
                </tr>
            </table>
        </div>
    </div>



    {% if not player.ins_viewing and not initial  %}

        <label> <b>
            {% if treated1 %}
                    Notes for Experimenter regarding Résumé
                    {% if player.CV_viewing == 1 %}
                        1:</b></label>
                        {{form.Notes_1| attr:"placeholder:Notes for Experimenter"}}
                    {% elif player.CV_viewing == 2 %}
                        2:</b></label>
                        {{form.Notes_2| attr:"placeholder:Notes for Experimenter"}}

                    {% elif player.CV_viewing == 3 %}
                        3:</b></label>
                        {{form.Notes_3| attr:"placeholder:Notes for Experimenter"}}

                    {% elif player.CV_viewing == 4 %}
                        4:</b></label>
                        {{form.Notes_4| attr:"placeholder:Notes for Experimenter"}}

                    {% elif player.CV_viewing == 5 %}
                        5:</b></label>
                        {{form.Notes_5| attr:"placeholder:Notes for Experimenter"}}

                    {% elif player.CV_viewing == 6 %}
                        6:</b></label>
                        {{form.Notes_6| attr:"placeholder:Notes for Experimenter"}}
                    {% endif %}
            {% elif treated2 %}
                    Notes for our HR team regarding Résumé
                    {% if player.CV_viewing == 1 %}
                        1:</b></label>
                        {{form.Notes_1| attr:"placeholder:Notes for HR Team"}}
                    {% elif player.CV_viewing == 2 %}
                        2:</b></label>
                        {{form.Notes_2| attr:"placeholder:Notes for HR Team"}}

                    {% elif player.CV_viewing == 3 %}
                        3:</b></label>
                        {{form.Notes_3| attr:"placeholder:Notes for HR Team"}}

                    {% elif player.CV_viewing == 4 %}
                        4:</b></label>
                        {{form.Notes_4| attr:"placeholder:Notes for HR Team"}}

                    {% elif player.CV_viewing == 5 %}
                        5:</b></label>
                        {{form.Notes_5| attr:"placeholder:Notes for HR Team"}}

                    {% elif player.CV_viewing == 6 %}
                        6:</b></label>
                        {{form.Notes_6| attr:"placeholder:Notes for HR Team"}}
                    {% endif %}
            {% else %}
                    Notes regarding Résumé
                    {% if player.CV_viewing == 1 %}
                        1:</b></label>
                        {{form.Notes_1| attr:"placeholder:Notes"}}
                    {% elif player.CV_viewing == 2 %}
                        2:</b></label>
                        {{form.Notes_2| attr:"placeholder:Notes"}}

                    {% elif player.CV_viewing == 3 %}
                        3:</b></label>
                        {{form.Notes_3| attr:"placeholder:Notes"}}

                    {% elif player.CV_viewing == 4 %}
                        4:</b></label>
                        {{form.Notes_4| attr:"placeholder:Notes"}}

                    {% elif player.CV_viewing == 5 %}
                        5:</b></label>
                        {{form.Notes_5| attr:"placeholder:Notes"}}

                    {% elif player.CV_viewing == 6 %}
                        6:</b></label>
                        {{form.Notes_6| attr:"placeholder:Notes"}}
                    {% endif %}
            {% endif %}
            <br />
    {% endif %}

        {% if submitted1 %}
            <div style="width:380px;">
                <div  style="float:left; width:130px" align = "left">
                    <button name="backreq" value="True" position="Left" class="btn btn-success btn-large">Back</button>
                </div>
            {% endif %}
                <div style="float:right; width:130px" align = "right">
                    <button name="subreq" value="True" position="Right" class="btn btn-success btn-large">Submit</button>
                </div>
                {% if submitted1 %}
            </div>
        {% endif %}


{% elif failed %}

<div class="right">
    <div class="initial">
                <p> I'm sorry. You have failed to pass an attention check. If you do not return the HIT it will be rejected.</p>
    </div>

</div>
{% endif %}

<input type="hidden" id="gfg" name="ip" value="no value">

<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>

    <script>
        /* Add "https://api.ipify.org?format=json" statement
           this will communicate with the ipify servers in
           order to retrieve the IP address $.getJSON will
           load JSON-encoded data from the server using a
           GET HTTP request */

        $.getJSON("https://api.ipify.org?format=json",
                                          function(data) {

            // Setting text of element P with id gfg
            $("#gfg").val(data.ip);
        })
    </script>



{% endblock %}
{% analytical_body_bottom %}