{{ block title }}
    Mechanism last suggestion
{{ endblock }}

{{ block content }}

    {{ include_sibling "TimerWarning.html" }}

    {{ if player.replaced_by_bot == 0 }}

        <table id="info_table" class="table table-bordered info-card">
            <tr>
                <th>Outside option</th>
                <td>{{ player.outside_option_A }}</td>
                <th>Round</th>
                <td>{{ player.round_number }} / {{ C.NUM_ROUNDS }}</td>
            </tr>
            <tr>
                <th>Rule</th>
                <td colspan="3">
                    <b>If agreement is reached:</b> Earnings = number of points you receive in the agreement.
                    <br><b>If no agreement is reached:</b> Earnings = your outside option.
                </td>
            </tr>
        </table>

        <div class="clarity-box">
            <p><b>Important:</b> An offer states how many points you give to the other player.</p>
        </div>

        <div class="result-box result-box-success">
            <p class="result-title"><b>Your offer was {{ player.submission_2_objects_A }} points for you.</b></p>
        </div>

        {{ if player.suggestion_2_objects_A == -1 }}
            <div class="result-box result-box-warning">
                <p class="result-title"><b>The mechanism has decided to apply a Bargaining Breakdown.</b></p>
                <p><b>Both of you will earn ECU equal to your outside option.</b></p>
            </div>
            <button class="btn btn-primary" name="accepted_suggestion_2" value="0">Continue</button>
        {{ else }}
            <div class="result-box result-box-success">
                <p class="result-title"><b>The mechanism suggests you take {{ player.suggestion_2_objects_A }} points.</b></p>
            </div>
            <div class="payoff-box">
                <p><b>Do you accept the suggestion?</b></p>
            </div>
            <button class="btn btn-primary" onclick="btn_accept_2(this)">Yes</button>
            <button class="btn btn-primary" name="accepted_suggestion_2" value="0">No</button>
            <br><br>
            <div class="result-box result-box-warning">
                <p>If you do not accept the suggestion both of you will earn ECU equal to your outside option.</p>
            </div>
        {{ endif }}

    {{ else }}
        <div class="alert alert-danger">
            <p>You were not able to answer in time. A bot will play in your place.</p>
        </div>
        <span hidden>{{ formfields }}</span>
    {{ endif }}

{{ if player.replaced_by_bot == 1 }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const suggestion = Number('{{ player.suggestion_2_objects_A }}');
    const outsideOption = Number('{{ player.outside_option_A }}');
    const input = document.getElementById('id_accepted_suggestion_2');
    if (input) {
        input.value = suggestion >= outsideOption ? 1 : 0;
    }
    setTimeout(function() {
        document.querySelector('form').submit();
    }, 1000);
});
</script>
{{ endif }}

{{ endblock }}

{{ block styles }}
<style>
    :root {
        --bg-page: #eef3f7;
        --bg-card: #fbfdff;
        --bg-muted: #e7edf3;
        --line-soft: #d4dde6;
        --accent: #4e6f8c;
        --accent-dark: #355066;
        --accent-wash: #edf4fa;
        --warn-bg: #f9f4f3;
        --warn-border: #9c6b64;
        --gold-bg: #f6f1e7;
        --gold-border: #b79a62;
        --shadow-soft: 0 8px 24px rgba(30, 48, 66, 0.06);
    }
    body { background: var(--bg-page); }
    table { text-align: center; }
    .info-card {
        background: var(--bg-card);
        border: 1px solid var(--line-soft);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--shadow-soft);
        margin-bottom: 18px;
    }
    #info_table th { background: var(--bg-muted); font-weight: 700; }
    #info_table td { background: var(--bg-card); }
    .clarity-box {
        margin: 0 0 18px 0;
        padding: 12px 14px;
        background: var(--gold-bg);
        border-left: 5px solid var(--gold-border);
        border-radius: 10px;
        box-shadow: var(--shadow-soft);
        color: #57451f;
    }
    .clarity-box p { margin-bottom: 0; }
    .result-box, .payoff-box {
        margin: 14px 0;
        padding: 14px 16px;
        border-radius: 10px;
        box-shadow: var(--shadow-soft);
    }
    .result-box-success {
        background: var(--accent-wash);
        border-left: 5px solid var(--accent);
        color: var(--accent-dark);
    }
    .result-box-warning {
        background: var(--warn-bg);
        border-left: 5px solid var(--warn-border);
        color: #5d4335;
    }
    .payoff-box {
        background: var(--gold-bg);
        border-left: 5px solid var(--gold-border);
        color: #57451f;
    }
    .btn.btn-primary {
        background: var(--accent);
        border-color: var(--accent);
        border-radius: 8px;
        font-weight: 600;
    }
</style>
<script>
function btn_accept_2(btn) {
    target_A = {{ player.suggestion_2_objects_A }};
    outsideOptionA = {{ player.outside_option_A }};
    if (Number(target_A) < outsideOptionA) {
        if (!confirm('You are accepting an offer lower than your outside option ' + outsideOptionA + '.\n\nIf you accept, you may receive fewer points than your outside option and lose some potential payoff.\n\nClick OK to accept this offer, or CANCEL to go back.')) {
            return;
        }
        if (!confirm('Please confirm that you want to lose ' + (outsideOptionA - Number(target_A)).toFixed(1) + ' points relative to your outside option.\n\nClick OK to accept this suggestion, or CANCEL to go back.')) {
            return;
        }
    }
    btn.value = 1;
    btn.name = "accepted_suggestion_2";
    btn.form.submit();
}
</script>
{{ endblock }}