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

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

    {{ if coded }}

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

    <div class="r-card">
        <h2>Your hypothetical outcome</h2>
        <div class="payoff">
            <div class="payoff-row">
                <span>Starting hypothetical budget</span>
                <span class="amount">{{ base_points }}</span>
            </div>
            <div class="payoff-row">
                <span>Points spent on revealed delivery times ({{ reveal_count }} &times; 1 point)</span>
                <span class="amount">{{ reveal_cost_points_neg }}</span>
            </div>
            <div class="payoff-row total">
                <span>Hypothetical result</span>
                <span class="amount">{{ net_points }}</span>
            </div>
        </div>
        <p class="payoff-note">This is a hypothetical outcome for illustration only. It is not real
        money and does not affect your payment for this study, which is fixed.</p>
    </div>

    {{ else }}

    <div class="r-card">
        <h2>Thank you for your choice!</h2>
        <p>Your responses have been saved.</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 }}