{{ 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="r-card emphasis">
        {{ if low }}
        <p><strong>REMINDER:</strong> the two shipping companies have
        <u>inconsistent delivery times</u>. Their shipping times are
        <u>uncertain and unpredictable</u>.</p>
        {{ else }}
        <p><strong>REMINDER:</strong> the two shipping companies have
        <u>consistent delivery times</u>. Their shipping times are
        <u>certain and predictable</u>.</p>
        {{ endif }}
        <div id="example-chart-mini" class="example-mini"></div>
        <p class="chart-caption">
            Example only. It does not show Company A or Company B.
        </p>
    </div>

    <div class="r-card">
        <div class="r-card-label">
            Delivery history, with {{ reveal_count }} extra delivery time(s) revealed per company
        </div>

        <table class="delivery-table">
            <caption>Recent delivery times. Revealed values are shown in green.</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>

    <p class="say-this-quiet text-center">Click which of the two companies you would go with this time.</p>

    <input type="hidden" name="final_choice" id="dec-choice" value="">
    <input type="hidden" name="final_ts_page_load" id="dec-ts-page-load" value="">
    <input type="hidden" name="final_ts_choice" id="dec-ts-choice" value="">

</div>

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

{{ endblock }}