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

{% block title %}
<div class="row align-items-center">
    <div class="col-9">
        Thank you for completing the experiment!
    </div>
    {{ if player.participant.color != '#ffffff00'}}
    <div class="col-3 d-flex justify-content-center align-items-center">
        <div id="chosenColorText" style="font-size: 16px; font-weight: normal; margin:3%;">
            Your selected color:
        </div>
        <div id="selectedColor"
        style="background-color:{{player.participant.color}};
            height: 30px; width: 30px;margin:3%;">
        </div>
    </div>
    {{endif}}
    {{ if studyName == "priceList_new" }}
    <div id="selectedEveTxt" class="col-3 d-flex justify-content-center align-items-right"
        style="font-size: 16px; font-weight: normal;">
        
        <div class="row">
            <div class="col-6 d-flex align-items-center justify-content-center">
                You selected
            </div>
            <div class="col-6 d-flex justify-content-center align-items-right">
                <svg class="envelopeHeader"
                    viewBox="0 0 200 100" 
                    stroke="rgb(86,86,86)" stroke-width="2">

                    <!--Outer frame-->
                    <polyline 
                        points="0,0 0,100 200,100 200,0 0,0"
                        style="fill: #fff8ef;"/>

                    <!--Inner lines-->
                    <line x1="0" y1="0" x2="100" y2="35"/>
                    <line x1="200" y1="0" x2="100" y2="35"/>
                    
                    <text 
                        font-size="1.8em"
                        text-anchor="end" 
                        x="95%" y="90%" 
                        fill="black">
                        {{player.participant.type}}
                    </text>
                </svg>
            </div>
        </div>  
    </div>
    {{endif}}
</div>
{% endblock %}

{% block content %}

<div class="row"></div>
<div class="my-3 bg-light px-3 py-3 rounded border">
    <div class="row">

            <div class="col">
                <div class="container">
                    {% if bonusFiles %}
                    <p>
                        On the next screen, you will receive the password to your bonus file. Before that, we kindly ask you to respond to
                        the following questions. 
                    </p>
                    {% else %}
                    <p>
                        On the next screen, you will 
                        receive your bonus. Before that, we kindly ask you to respond to
                        the following questions. 
                    </p>
                    {% endif %}

                    {% formfield 'feedback_understanding' %}
                    {% formfield 'feedback_certain' %}
                    {% formfield 'feedback_trust' %}
                    {% formfield 'feedback_WVS' %}
                    {% formfield 'feedback_final_remarks' %}
                    </p>
                </div>
            </div>
    </div>



<button class="btn btn-primary" id="next_page_btn" disabled>OK</button>
</div>

<script>
    let min_time_on_page = js_vars.min_time_on_page
    // Enables the next button after set time
    setTimeout(
        function () {
            document.getElementById("next_page_btn").removeAttribute("disabled")
            // document.getElementById("next_btn_info").style.display = "none"
        },
        min_time_on_page * 1000
    );
</script>


{% endblock %}