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

{{ block scripts }}
<script src="{{ static 'global/js/bdm_slider.js' }}"></script>
{{ endblock }}

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

    <div class="r-card emphasis">
        <div class="r-card-label">Your bonus so far is uncertain</div>
        <p>
            You chose Company {{ choice }}. If Company {{ choice }} turns out to be the faster
            company, you get a $2.00 bonus. If it doesn't, you get $0.00. We now give you the
            chance to trade this uncertain bonus for a guaranteed amount instead.
        </p>
    </div>

    <div class="r-card">
        <div class="r-card-label">How the guaranteed offer works</div>
        <ul class="step-list">
            <li><span class="step-num">1</span> Using the slider below, tell us the smallest guaranteed amount you would accept instead of your uncertain bonus.</li>
            <li><span class="step-num">2</span> The computer then randomly draws an offer between {{ bdm_min_label }} and {{ bdm_max_label }}.</li>
            <li><span class="step-num">3</span> If that random offer is at least as much as the amount you named, you are paid the random offer for sure.</li>
            <li><span class="step-num">4</span> If the random offer is less than the amount you named, your original bonus applies instead: $2.00 if Company {{ choice }} is the faster company, otherwise $0.00.</li>
        </ul>
        <p>
            Because the random offer is decided only after you answer, your best strategy is to
            name the amount you would genuinely find just as good as the uncertain bonus. Naming a
            higher amount risks losing out on a guaranteed offer you would have been happy to take;
            naming a lower amount risks accepting less than the uncertain bonus is really worth to
            you.
        </p>
    </div>

    <div class="r-card">
        <div class="r-card-label">Your answer</div>
        <p>What is the smallest guaranteed bonus you would accept instead of the uncertain bonus?</p>

        <div class="bdm-slider-wrap">
            <div class="bdm-slider-value" id="bdm-slider-value">Click the slider to answer</div>
            <input type="range" class="bdm-slider" id="bdm-slider" name="bdm_value"
                   min="{{ bdm_min_cents }}" max="{{ bdm_max_cents }}" step="{{ bdm_step_cents }}"
                   value="{{ bdm_default_cents }}">
            <div class="bdm-slider-ticks">
                <span>{{ bdm_min_label }}</span>
                <span>{{ bdm_max_label }}</span>
            </div>
        </div>

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