{{ 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="r-card emphasis">
        <div class="r-card-label">How delivery times vary in this study</div>
        <div id="example-chart-mini" class="example-mini"></div>
        <p class="chart-caption">
            This is only an example, to show the kind of variability you can expect. It does
            <strong>not</strong> show Company A or Company B and is unrelated to the table below.
        </p>
    </div>

    <div class="r-card">
        <div class="r-card-label">Your order: pick a shipping company</div>
        <p>
            Before you choose a shipping company, you can look at each company's most recent
            {{ n_total }} deliveries to get a better sense of how quickly they have actually been
            arriving. Unfortunately, only <strong>{{ n_visible }} delivery times</strong> per
            company can be retrieved at this time. So you will have to make assumptions about what
            the missing deliveries might look like.
        </p>
        <p>
            When you continue, the {{ n_visible }} delivery times we do have for each company will
            be filled in.
        </p>
        <p class="say-this">
            You will then be asked to click which of the two companies you would choose.
        </p>

        <table class="delivery-table">
            <caption>Recent delivery times</caption>
            <thead>
                <tr>
                    <th>Delivery</th>
                    <th class="company-a">Company A</th>
                    <th class="company-b">Company B</th>
                </tr>
            </thead>
            <tbody>
                {{ for row in rows }}
                <tr>
                    <th>{{ row.n }}</th>
                    <td class="{{ row.a_class }}">{{ row.a_display }}</td>
                    <td class="{{ row.b_class }}">{{ row.b_display }}</td>
                </tr>
                {{ endfor }}
            </tbody>
        </table>
    </div>

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