{{ 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>
<script src="{{ static 'global/js/click_choice.js' }}"></script>
{{ endblock }}

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

    <div class="action-banner animate-in">
        <p>Time to decide.</p>
        <p class="say-this">Click which of the two companies you would choose.</p>
    </div>

    <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">
            Example only. It does not show Company A or Company B and is unrelated to the table below.
        </p>
    </div>

    <div class="r-card reveal-delayed">
        <div class="r-card-label">Your order: pick a shipping company</div>
        <p>
            Below you can see what is on record for each company. Only
            <strong>{{ n_visible }} of the {{ n_total }} recent delivery times</strong> per company
            are available. The rest is missing and marked as &ldquo;?&rdquo;.
        </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 class="choice-buttons">
            <button type="button" class="choice-btn" id="choice-a">Company A</button>
            <button type="button" class="choice-btn" id="choice-b">Company B</button>
        </div>
    </div>

    <input type="hidden" name="prelim_choice" id="dec-choice" value="">
    <input type="hidden" name="prelim_ts_page_load" id="dec-ts-page-load" value="">
    <input type="hidden" name="prelim_ts_choice" id="dec-ts-choice" value="">
    <input type="hidden" name="rating_confidence" id="dec-rating-confidence" value="">

</div>

<div id="ratings-panel">
    <div class="ratings-progress"><div class="ratings-progress-fill" id="ratings-progress-fill"></div></div>
    <div class="ratings-question" id="ratings-question"></div>
    <div class="ratings-anchors">
        <span id="ratings-anchor-lo"></span>
        <span id="ratings-anchor-hi"></span>
    </div>
    <div class="ratings-scale" id="ratings-scale">
        <button type="button" class="rating-btn" data-val="1">1</button>
        <button type="button" class="rating-btn" data-val="2">2</button>
        <button type="button" class="rating-btn" data-val="3">3</button>
        <button type="button" class="rating-btn" data-val="4">4</button>
        <button type="button" class="rating-btn" data-val="5">5</button>
        <button type="button" class="rating-btn" data-val="6">6</button>
        <button type="button" class="rating-btn" data-val="7">7</button>
    </div>
</div>

<button type="submit" id="submit_button" hidden></button>

{{ endblock }}