{{ block styles }}
<link rel="stylesheet" href="{{ static 'global/css/shipping.css' }}">
{{ endblock }}

{{ block content }}
<div class="r-page">

    {{ if coded }}

    <div class="r-card">
        <h2>Your decision</h2>
        <p>You chose <strong>Company {{ choice }}</strong>.</p>
        {{ if won }}
        <p>Company {{ faster_company }} was in fact faster on average, and that is the company you
        chose.</p>
        {{ else }}
        <p>Company {{ faster_company }} was in fact faster on average, so choosing Company
        {{ choice }} would not have earned the bonus.</p>
        {{ endif }}
    </div>

    {{ if resolved }}
    <div class="r-card">
        <h2>Your guaranteed-bonus question</h2>
        <p>You said you would accept a guaranteed bonus of <strong>{{ bdm_value }}</strong> instead
        of the risky $2.00 bonus.</p>
        <p>A random guaranteed price of <strong>{{ draw }}</strong> was then drawn.</p>
        {{ if branch == "guaranteed" }}
        <p>Since the drawn price was at least what you said you would accept, you are paid the
        guaranteed price instead of the risky bonus.</p>
        {{ else }}
        <p>Since the drawn price was below what you said you would accept, your risky bonus applies
        instead: the $2.00 bonus if Company {{ choice }} was in fact faster, otherwise $0.</p>
        {{ endif }}
    </div>

    <div class="r-card">
        <h2>Your bonus</h2>
        <div class="payoff">
            <div class="payoff-row total">
                <span>Your bonus</span>
                <span class="amount">{{ net_bonus }}</span>
            </div>
        </div>
        <p class="payoff-note">This bonus will be paid through Prolific after the study is complete.</p>
    </div>
    {{ else }}
    <div class="r-card">
        <h2>Thank you for your answers!</h2>
        <p>We could not automatically read your spoken guaranteed-bonus answer from the recording.
        Your responses have been saved, and your bonus will be reviewed and paid manually through
        Prolific after the study.</p>
    </div>
    {{ endif }}

    {{ else }}

    <div class="r-card">
        <h2>Thank you for your choice!</h2>
        <p>We could not automatically read your spoken choice from the recording. Your
        responses have been saved, and your bonus will be reviewed and paid manually through
        Prolific after the study.</p>
    </div>

    {{ endif }}

    <div class="r-card">
        <p>A few short questions follow on the next screens.</p>
    </div>

    <div class="btn-center">
        {{ next_button }}
    </div>
</div>
{{ endblock }}