{% block title %}
Feedback
{% endblock %}

{% block content %}

{{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
{{ endif }}

<div class="container">
    <p>The study is now complete. Thank you for your participation! If you earned a bonus payment, it will be paid to you shortly.</p>

    <p>Before you finish, we would appreciate your feedback.</p>

    <div class="mb-3">
        <label class="form-label fw-bold">How clear were the instructions? (1 = very unclear, 10 = very clear)</label>
        <div class="d-flex justify-content-between">
            {% for i in feedback_range %}
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="feedbackDifficulty" value="{{ i }}">
                <label class="form-check-label">{{ i }}</label>
            </div>
            {% endfor %}
        </div>
    </div>

    <div class="mb-3">
        <label class="form-label fw-bold">How well did you understand what you were asked to do? (1 = not at all, 10 = perfectly)</label>
        <div class="d-flex justify-content-between">
            {% for i in feedback_range %}
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="feedbackUnderstanding" value="{{ i }}">
                <label class="form-check-label">{{ i }}</label>
            </div>
            {% endfor %}
        </div>
    </div>

    <div class="mb-3">
        <label class="form-label fw-bold">How satisfied are you with this study overall? (1 = very unsatisfied, 10 = very satisfied)</label>
        <div class="d-flex justify-content-between">
            {% for i in feedback_range %}
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="feedbackSatisfied" value="{{ i }}">
                <label class="form-check-label">{{ i }}</label>
            </div>
            {% endfor %}
        </div>
    </div>

    <div class="mb-3">
        <label class="form-label fw-bold">How appropriate is the payment relative to other Prolific studies? (1 = very low, 10 = very high)</label>
        <div class="d-flex justify-content-between">
            {% for i in feedback_range %}
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="feedbackPay" value="{{ i }}">
                <label class="form-check-label">{{ i }}</label>
            </div>
            {% endfor %}
        </div>
    </div>

    <div class="mb-3">
        <label class="form-label fw-bold">Any additional feedback? (optional)</label>
        <textarea name="feedback" id="id_feedback" class="form-control" rows="4"
                  placeholder="Your feedback..."></textarea>
    </div>

    <input type="hidden" name="pasted_feedback" id="id_pasted_feedback" value="0">

    <div class="text-end"><button class="btn btn-primary btn-large">Next</button></div>
</div>

<script>
document.getElementById('id_feedback').addEventListener('paste', function() {
    document.getElementById('id_pasted_feedback').value = '1';
});
</script>

{% endblock %}