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

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

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

    <div class="voice-instruction animate-in mb-3">
        <p>The recorder starts on its own shortly.</p>
        <p class="say-this">Say which of the two companies you would choose, then press stop.</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>

    <input type="hidden" name="choice" id="dec-value" value="">
    <input type="hidden" name="choice_confirmed" id="dec-confirmed" value="">
    <input type="hidden" name="choice_record_start_ts" id="dec-record-start" value="">
    <input type="hidden" name="choice_voice_onset_ts" id="dec-voice-onset" value="">
    <input type="hidden" name="ts_page_load" id="dec-page-load" value="">

</div>

<div class="voice-pill is-pending">
    <div class="recording-indicator" id="dec-indicator"></div>
    <span class="status-text" id="dec-status">Starting…</span>
    <button type="button" class="pill-btn record-btn" id="dec-toggle" title="Stop recording">
        <svg id="dec-mic-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
            <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
            <line x1="12" y1="19" x2="12" y2="23"/>
            <line x1="8" y1="23" x2="16" y2="23"/>
        </svg>
        <svg id="dec-stop-icon" viewBox="0 0 24 24" fill="currentColor">
            <rect x="6" y="6" width="12" height="12" rx="2"/>
        </svg>
    </button>
</div>

<div id="approval-panel">
    <div class="approval-title">Confirm your choice</div>
    <p class="approval-transcript" id="approval-transcript"></p>
    <p class="approval-coded" id="approval-coded"></p>
    <div class="approval-actions">
        <button type="button" class="approval-btn primary" id="approval-btn-1"></button>
        <button type="button" class="approval-btn ghost" id="approval-btn-2"></button>
    </div>
</div>

<div id="dec-overlay" hidden>
    <div class="dec-spinner" role="status" aria-hidden="true"></div>
    <p class="dec-overlay-text">Processing your recording…</p>
</div>

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

{{ endblock }}