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

{% block title %}
<div class="row align-items-center">
    <div class="col-9">
        &nbsp;
    </div>
    <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" style="padding: 0;">
                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>
</div>
{% endblock %}


{% block content %}
<div class="row">
    <div class="col rounded border alert alert-info">
        <h2 style="text-align: center;">The experiment starts now.</h2>
        
        {{if showVerify}}
        </br>
        <strong>
            Remember that you can verify that your bonus 
            is determined fairly, exactly as described. 
        </strong>
        
        <ul>
            <li>
                The option pair in your Envelope {{player.participant.type}}
                was
                selected fairly. Verification.pdf shows the option pair 
                that belongs to each 
                envelope that you could have selected. 
            </li>
            <li>
                The outcome of the risk is determined fairly. 
                Verification.pdf shows the 
                lifted shells, such that you can be sure that 
                the outcomes are indeed equally likely.
            </li>
        </ul>
        Because you could download Verification.pdf before 
        selecting an envelope, before giving instructions, 
        and before lifting a shell, its content 
        cannot depend on your envelope, on your instructions,
        or on the shell that you select.
        
        {{endif}}    
    <div class="center center-align text-center" width="100%">
        <button id="next_page_btn" class="btn btn-primary px-3">Start</button>
    </div>
    
</div>

</div>

{% endblock %}