{{ block title }}
    Results
{{ endblock }}
{{ block content }}

    <div class="result-shell">
        <div class="result-card">
            <div class="result-box result-box-info">
                {{ if player.id_in_group == 1 }}
                    <p>You were selected as the <b>proposer</b>.</p>
                    <p>You decided to keep {{ player.group.proposer_amount|to2 }} points and give your opponent {{ matching_amount|to2 }} points.</p>
                    <p>Your opponent decided that he or she would not accept less than {{ player.group.responder_minimum|to2 }} points.</p>
                {{ endif }}
                {{ if player.id_in_group == 2 }}
                    <p>You were selected as the <b>receiver</b>.</p>
                    <p>Your opponent decided to keep {{ player.group.proposer_amount|to2 }} points and give you {{ matching_amount|to2 }} points.</p>
                    <p>You decided that you would not accept less than {{ player.group.responder_minimum|to2 }} points.</p>
                {{ endif }}
            </div>

            {{ if player.agreement == 1 }}
                <div class="result-box result-box-info">
                    <p><b>The offer was accepted.</b></p>
                </div>
            {{ endif }}
            {{ if player.agreement == 0 }}
                <div class="result-box result-box-warning">
                    <p><b>The offer was rejected.</b></p>
                </div>
            {{ endif }}

            <div class="result-box result-box-highlight">
                <p><b>Your recorded outcome for this task is {{ player.ultimatum_earnings|to2 }} points.</b></p>
            </div>

            <div class="result-actions">
                <button class="otree-btn-next btn btn-primary">Continue</button>
            </div>
        </div>
    </div>

{{ endblock }}

{{ block styles }}
    <style>
        body {
            background: #eef3f7;
        }

        .result-shell {
            max-width: 860px;
            margin: 0 auto;
        }

        .result-card {
            background: #fbfdff;
            border: 1px solid #d4dde6;
            border-radius: 14px;
            box-shadow: 0 8px 24px rgba(30, 48, 66, 0.06);
            padding: 22px 24px;
        }

        .result-box {
            margin: 14px 0;
            padding: 12px 14px;
            border-radius: 8px;
        }

        .result-box p {
            margin-bottom: 0;
            line-height: 1.7;
            text-align: justify;
        }

        .result-box-info {
            background: #edf4fa;
            border-left: 4px solid #4e6f8c;
            color: #355066;
        }

        .result-box-highlight {
            background: #f6f1e7;
            border-left: 4px solid #b79a62;
            color: #57451f;
        }

        .result-box-warning {
            background: #fff1ef;
            border-left: 4px solid #c64b3c;
            color: #7c4f48;
        }

        .result-actions {
            margin-top: 20px;
        }
    </style>
{{ endblock }}

{{ block scripts }}
    <script>
        $( "input" ).on( "change", function() {
            var raw_value = $( this ).val();
            var rounded = parseFloat( raw_value ).toFixed(2)
            if ( rounded > 5 ) { rounded = 5.0; };
            if ( rounded < 0 ) { rounded = 0.0; };
            $( this ).val( rounded );
        } );
    </script>
{{ endblock }}