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

{{ block styles }}
    <link href="{% static 'global/css/decision.css' %}" rel="stylesheet">
    <style>
        .results-text, ul {
            font-size: x-large;
            max-width: 50vw;
        }
        
        h1 {
            margin-bottom: 1em;
        }
        .results-text {
            line-height: 1.5em;
            text-align: justify;
        }

        .table-container.results-table {
            position: relative;
            top: 0;
            left: 0;
            transform: translate(0,0);
        }
        .columns {
            display: flex;
            width: 90vw;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }

        ul li {
            margin-top: 0.5em;
        }
    </style>
{{ endblock }}

{{ block scripts }}

    <script>
        function submitAnswer() {
            window.location.href = js_vars.SubmitLink;
        }
    </script>
{{ endblock }}



{{ block PageContent }}

<h1>Thank you for participating!</h1>

<div class="columns">
    <div class="table-results" >
        <div class="row top"> 
            <div class="table-item right">  </div>
            <div class="table-item"> <img src="{{ static C.imgCandidate }}" class="img-top"> </div>
            <div class="table-item"> <img src="{{ static C.imgCandidate }}" class="img-top"> </div>
        </div>
        <div class="row top">
            <div class="table-item right">  </div>
            <div class="table-item col-A"> Your <br> Candidate </div>
            <div class="table-item col-B"> Other <br> Candidate </div>
        </div>
        {{ for attr in lAttr }}
        <div class="row MT" id="{{ attr.id }}">
            <div class="table-item right"> {{ attr.name }} </div>
            <div class="table-item mt-tgt"> <img src="{{ static attr.valueA }}" class="img-button"> </div>
            <div class="table-item mt-tgt"> <img src="{{ static attr.valueB }}" class="img-button"> </div>
        </div>
        {{ endfor }}

    </div>
    <div>
        <p class="results-text"> 
            We have reached the end of the experiment. 
            We would like to thank you for your participantion. 
            To determine your bonus payment, we selected one random round. 
            The outcomes of the round are the following: 
        </p>
        <ul>
            <li> The selected round was number {{ RV.trial }} </li>
            <li> Your employer compared your chosen candidate {{ sChosen }} (left) and the randomly selected candidate (right). </li>
            <li> They gave a rating of {{ decChosen }} to your candidate and {{ decOpponent }} to the other candidate. This means: {{ if bWin }} The employer selected your candidate! You get a bonus of 2 pounds! {{ else }} The employer selected the other candidate. You do not get a bonus. {{ endif }}</li>
            <li> You get {{ dBonusQ }} pounds from the questionnaire. </li>
        </ul>

    </div>    
</div>
<button type="button" class="continue-btn" onclick="submitAnswer()"> Back to Prolific </button>
{{ endblock }}