{% extends "global/Page.html" %}

{% block content %}
<h3>Observe and Predict:</h3>
<p>Below are the decisions made by senders. Predict how much you think each responder will return.</p>

<form method="post">
    <table class="table">
        <thead>
            <tr>
                <th>Pair</th>
                <th>Amount Sent</th>
                <th>Tripled Amount</th>
                {% if show_rank %}
                <th>Responder Performance</th>
                {% endif %}
                <th>Your Prediction</th>
            </tr>
        </thead>
        <tbody>
            {% for pair in pairs %}
            <tr>
                <td>Pair {{ pair.pair_id }}</td>
                <td>${{ pair.amount_sent }}</td>
                <td>${{ pair.tripled_amount }}</td>
                {% if show_rank %}
                <td>{{ pair.responder_rank }}</td>
                {% endif %}
                <td>
                    <input type="number" name="prediction_{{ pair.pair_id }}" class="form-control" min="0" step="0.01" required>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <input type="hidden" name="predictions" id="predictions_field">
    <button type="submit" class="btn btn-primary" onclick="compilePredictions()">Submit Predictions</button>
</form>

<script>
    function compilePredictions() {
        const inputs = document.querySelectorAll('input[type=number]');
        const predictions = {};
        inputs.forEach(input => {
            const pairId = input.name.replace('prediction_', '');
            predictions[pairId] = parseFloat(input.value);
        });
        document.getElementById('predictions_field').value = JSON.stringify(predictions);
    }
</script>
{% endblock %}