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

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

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

    <div class="r-card">
        <div class="r-card-label">What is on record so far</div>
        <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="r-card">
        <div class="r-card-label">Request more delivery records</div>
        <p>
            To help you decide, you can pull more delivery records, up to {{ n_hidden }} additional
            delivery times per company.
        </p>
        <p>
            Each additional delivery time you retrieve is pulled <strong>for both companies at
            once</strong> and costs <strong>1 point</strong>, deducted from your 10-point budget.
        </p>
        <p>
            How many missing delivery records would you like to retrieve for both shipping companies
            before making your final choice?
        </p>

        <div class="reveal-options">
            {{ for n in options }}
            <label class="reveal-option">
                <input type="radio" name="reveal_count" value="{{ n }}">
                <span class="reveal-option-box">{{ n }}</span>
            </label>
            {{ endfor }}
        </div>

        <div class="running-bonus">
            Remaining budget:
            <strong id="running-budget-value">10 points</strong>
        </div>
        <p class="chart-caption">
            This budget is hypothetical and does not affect your pay for this study.
        </p>
    </div>

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