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

{{ block scripts }}
<script src="https://cdn.jsdelivr.net/npm/highcharts@11.4.8/highcharts.js"></script>
<script src="{{ static 'global/js/framing_chart.js' }}"></script>
{{ endblock }}

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

    <div class="intro-card">
        <h2>Choosing a shipping company</h2>
        <p>
            In this study, we ask you to imagine placing an online order at an online store. Since
            the store offers two shipping companies at checkout, your task is to choose the one you
            think is faster.
        </p>
        <p class="">
            As part of this task, you will be given a hypothetical budget of 10 points to help you
            decide. Even though these points will not be exchanged for real money,
            we still ask you to treat the budget as if it mattered, since
            this helps us understand how people naturally weigh information against cost.
        </p>
    </div>

    <div class="intro-card">
        <h2>How deliveries vary</h2>

        {{ if low }}
        <p>
            Importantly, the delivery times of the two available shipping companies are very
            <strong>inconsistent</strong>. The chart below is an example of what very uncertain and
            unpredictable shipping times across 8 orders can look like.
        </p>
        {{ else }}
        <p>
            Importantly, the delivery times of the two available shipping companies are very
            <strong>consistent</strong>. The chart below is an example of what very certain and
            predictable shipping times across 8 orders can look like.
        </p>
        {{ endif }}

        <div id="example-chart" class="delivery-chart"></div>

        {{ if low }}
        <p class="chart-caption">
            Note that this is just an example to illustrate what inconsistent shipping times
            (bouncing between 1 and 7 business days) look like in practice.
        </p>
        {{ else }}
        <p class="chart-caption">
            Note that this is just an example to illustrate what consistent shipping times
            (staying close to 4 business days) look like in practice.
        </p>
        {{ endif }}
    </div>

    <div class="intro-card">
        <h2>What happens next</h2>
        <ul class="step-list">
            <li><span class="step-num">1</span> Look at what little delivery history is available for each company.</li>
            <li><span class="step-num">2</span> Click which company you would choose.</li>
            <li><span class="step-num">3</span> Optionally spend points to reveal more delivery history, then click your final choice.</li>
        </ul>
    </div>

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