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

{{ block title }}
Trust Ratings
{{ endblock }}

{{ block content }}

<p style="text-align:center; color:#888; font-size:14px; margin-bottom:4px;">Round {{ player.round_number }} of {{ C.NUM_ROUNDS }}</p>

<style>
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}
.card {
    background-color: #f8f9fa;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    line-height: 1.6;
    font-size: 16px;
}
.warning-box {
    background-color: #fff3f3;
    border-left: 4px solid #d9534f;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    color: #a94442;
    font-weight: bold;
}
.section {
    margin-bottom: 20px;
}
</style>

<div class="container">
    <div class="card">

        <p class="section">
            Please rate your level of trust in the group members.
        </p>

        <div class="warning-box">
            You have 2 minutes to complete this page. If you do not confirm that you are still here, you will be exited from the study.
        </div>

        {{ if member_left }}
            <div class="warning-box">
                {{ member_dropout_count }} group member(s) left the game. Your group now has {{ active_member_count }} member(s) remaining.
            </div>
        {{ endif }}

        <p>
            On a scale from <strong>0 (No trust at all)</strong> to <strong>10 (Complete trust)</strong>:
        </p>

        {{ formfield 'trust_members' }}

        <div class="section">
            {{ formfield 'still_here' }}
        </div>

        {{ next_button }}

    </div>
</div>

{{ endblock }}