{{ block title }}
    Bargaining
{{ endblock }}
{{ block content }}

	<div id="timer_wrapper" class="alert alert-info">
		<p>Time spent bargaining:
			<span style="font-weight: bold">
				<span id="timer">0:00</span>
			</span>
			<span id="time" hidden>0</span>
		</p>
		<span>A breakdown can happen anytime between 1:00 and 7:00.</span>
	</div>

	<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>

	{{ if player.replaced_by_bot == 1 }}
		<div class="alert alert-danger">
			<p>You were not able to answer in time. A bot will play in your place.</p>
		</div>
	{{ endif }}

	<table id="bargain_table" class="table table-bordered bargaining-card">
		<th colspan="7">Your offer panel</th>
		<tr class="opponent-note-row">
			<td colspan="7">
				<div class="opponent-note">
					Please enter at least one offer below.
				</div>
			</td>
		</tr>
		<tr>
			<th width="4%">Offer</th>
			<th width="36%">Points for you</th>
			<th width="36%">Points for your opponent</th>
			<th width="24%" colspan="2">Actions</th>
		</tr>
		<tr>
			<th>1</th>
			<td><input type="number" class="form-control" inputmode="numeric" id="panel_self_offer_1_objects_A" min="0" max="{{ player.subsession.objects_A }}" value="{{ self_offer_1_objects_A }}"></td>
			<td><input type="number" class="form-control" inputmode="numeric" id="panel_comp_offer_1_objects_A" min="0" max="{{ player.subsession.objects_A }}" value="{{ match_offer_1_objects_A }}"></td>
			<td colspan="2">{{ if player.replaced_by_bot == 0 }}<button id="Update_1" type="button" class="otree-btn-next btn btn-primary" onclick="btn_update_1(this)" style="display: none;">Update</button>{{ endif }}</td>
		</tr>
		<tr>
			<th>2</th>
			<td><input type="number" class="form-control" inputmode="numeric" id="panel_self_offer_2_objects_A" min="0" max="{{ player.subsession.objects_A }}" value="{{ self_offer_2_objects_A }}"></td>
			<td><input type="number" class="form-control" inputmode="numeric" id="panel_comp_offer_2_objects_A" min="0" max="{{ player.subsession.objects_A }}" value="{{ match_offer_2_objects_A }}"></td>
			<td colspan="2">{{ if player.replaced_by_bot == 0 }}<button id="Update_2" type="button" class="otree-btn-next btn btn-primary" onclick="btn_update_2(this)" style="display: none;">Update</button>{{ endif }}</td>
		</tr>
		<th colspan="7">Your active offers</th>
		<tr>
			<th>Offer</th>
			<th>Points for you</th>
			<th>Points for your opponent</th>
			<th colspan="2">Actions</th>
		</tr>
		<tr>
			<th>1</th>
			<td><span id="active_self_offer_1_objects_A">{{ self_offer_1_objects_A }}</span></td>
			<td><span id="active_comp_offer_1_objects_A">{{ match_offer_1_objects_A }}</span></td>
			<td colspan="2">{{ if player.replaced_by_bot == 0 }}<button id="Cancel_1" type="button" class="otree-btn-next btn btn-primary" onclick="btn_cancel_1(this)" style="display: none;">Cancel</button>{{ endif }}</td>
		</tr>
		<tr>
			<th>2</th>
			<td><span id="active_self_offer_2_objects_A">{{ self_offer_2_objects_A }}</span></td>
			<td><span id="active_comp_offer_2_objects_A">{{ match_offer_2_objects_A }}</span></td>
			<td colspan="2">{{ if player.replaced_by_bot == 0 }}<button id="Cancel_2" type="button" class="otree-btn-next btn btn-primary" onclick="btn_cancel_2(this)" style="display: none;">Cancel</button>{{ endif }}</td>
		</tr>
		<th colspan="7">Your opponent offers</th>
		<tr class="opponent-note-row">
			<td colspan="7">
				<div class="opponent-note">
					The action buttons will only be displayed if both you and your opponent have at least one offer provided.
				</div>
			</td>
		</tr>
		<tr>
			<th>Offer</th>
			<th>Points for you</th>
			<th>Points for your opponent</th>
			<th colspan="2">Actions</th>
		</tr>
		<tr>
			<th>1</th>
			<td><span id="match_self_offer_1_objects_A">{{ self_offer_3_objects_A }}</span></td>
			<td><span id="match_comp_offer_1_objects_A">{{ match_offer_3_objects_A }}</span></td>
			<td>{{ if player.replaced_by_bot == 0 }}<button id="Accept_1" type="button" class="otree-btn-next btn btn-primary" onclick="btn_accept_1(this)" style="display: none;">Accept</button>{{ endif }}</td>
			<td>{{ if player.replaced_by_bot == 0 }}<button id="Reject_1" type="button" class="otree-btn-next btn btn-primary" onclick="btn_reject_1(this)" style="display: none;">Reject</button>{{ endif }}</td>
		</tr>
		<tr>
			<th>2</th>
			<td><span id="match_self_offer_2_objects_A">{{ self_offer_4_objects_A }}</td>
			<td><span id="match_comp_offer_2_objects_A">{{ match_offer_4_objects_A }}</td>
			<td>{{ if player.replaced_by_bot == 0 }}<button id="Accept_2" type="button" class="otree-btn-next btn btn-primary" onclick="btn_accept_2(this)" style="display: none;">Accept</button>{{ endif }}</td>
			<td>{{ if player.replaced_by_bot == 0 }}<button id="Reject_2" type="button" class="otree-btn-next btn btn-primary" onclick="btn_reject_2(this)" style="display: none;">Reject</button>{{ endif }}</td>
		</tr>
	</table>

	{{ if player.replaced_by_bot == 0 }}<button id="Abandon" type="button" class="otree-btn-next btn btn-primary abandon-btn" onclick="btn_abandon(this)">Abandon negotiations</button>{{ endif }}

{{ endblock }}
{{ block styles }}
    <style>
        :root {
            --bg-page: #eef3f7;
            --bg-card: #fbfdff;
            --bg-soft: #f4f7fa;
            --bg-muted: #e7edf3;
            --text-main: #24313d;
            --text-soft: #5c6b79;
            --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;
        }

        .otree-timer,
        .otree-title {
            display: none;
        }

        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            padding: 14px 18px;
            margin-bottom: 18px;
            background: var(--bg-card);
            border: 1px solid var(--line-soft);
            border-left: 5px solid var(--accent);
            border-radius: 10px;
            box-shadow: var(--shadow-soft);
        }

        .status-main {
            display: flex;
            align-items: baseline;
            gap: 12px;
        }

        .status-label {
            font-weight: 600;
            color: var(--text-soft);
        }

        .status-time {
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--accent-dark);
            letter-spacing: 0.02em;
        }

        .status-note {
            color: var(--text-soft);
            font-size: 0.95rem;
        }

        .info-card,
        .bargaining-card {
            background: var(--bg-card);
            border: 1px solid var(--line-soft);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow-soft);
        }

        #info_table {
            margin-bottom: 18px;
        }

        #info_table th {
            width: 18%;
            background: var(--bg-muted);
            color: var(--text-main);
            font-weight: 700;
            vertical-align: middle;
        }

        #info_table td {
            background: var(--bg-card);
            vertical-align: middle;
            color: var(--text-main);
        }

        .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;
        }

        #bargain_table {
            margin-bottom: 18px;
        }

        #bargain_table th[colspan="7"] {
            background: var(--bg-muted);
            color: var(--text-main);
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 0.01em;
        }

        #bargain_table td,
        #bargain_table th {
            border-color: var(--line-soft);
            vertical-align: middle;
        }

        #bargain_table tr:nth-child(odd) td {
            background: var(--bg-card);
        }

        #bargain_table tr:nth-child(even) td {
            background: var(--bg-soft);
        }

        #bargain_table td {
            height: 55px;
        }

        #bargain_table input.form-control {
			width: 140px;
			max-width: 100%;
			margin: 0 auto;
			display: block;
			border-radius: 8px;
			border: 1px solid #c5d1dc;
			background: #ffffff;
			text-align: center;
			font-weight: 600;
			color: var(--text-main);
		}


        #bargain_table input.form-control:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 0.15rem rgba(78, 111, 140, 0.15);
        }

		#info_table,
		#bargain_table {
				width: 100%;
			}

        .btn.btn-primary {
            background: var(--accent);
            border-color: var(--accent);
            border-radius: 8px;
            font-weight: 600;
            padding: 7px 16px;
            box-shadow: none;
        }

        .btn.btn-primary:hover,
        .btn.btn-primary:focus {
            background: var(--accent-dark);
            border-color: var(--accent-dark);
        }

        .abandon-btn {
            background: #7e6763 !important;
            border-color: #7e6763 !important;
            margin-top: 4px;
        }

        .abandon-btn:hover,
        .abandon-btn:focus {
            background: #68534f !important;
            border-color: #68534f !important;
        }

        .opponent-note-row td {
            background: var(--bg-card) !important;
            padding: 10px 12px;
        }

        .opponent-note-cell {
			text-align: center;
			background: #eef4f9;
			padding: 10px 12px;
		}
		.opponent-note {
			display: inline-block;
			padding: 8px 12px;
			background: #edf4fa;
			border-left: 4px solid #4e6f8c;
			border-radius: 6px;
			color: #355066;
			font-size: 0.95rem;
			font-weight: 600;
		}

        .alert-danger {
            border-radius: 10px;
            border: 1px solid #d9c4c1;
            background: var(--warn-bg);
            color: #7c4f48;
        }

        @media (max-width: 768px) {
            .status-bar {
                flex-direction: column;
                align-items: flex-start;
            }

            .status-main {
                flex-wrap: wrap;
            }

            .status-time {
                font-size: 1.15rem;
            }

            #bargain_table {
                font-size: 0.92rem;
            }

            .btn.btn-primary {
                width: 100%;
            }
        }
    </style>
{{ endblock }}


{{ block scripts }}
    <script>
		var anyOfferSubmitted = false;                                                                                        // newnew 0525

		function checkAndUpdateOfferSubmission() {
			anyOfferSubmitted = $("#active_self_offer_1_objects_A").text() || $("#active_self_offer_2_objects_A").text();
			refresh_btn_accept_reject_1();
			refresh_btn_accept_reject_2();
		}
	</script>
	<script>
		// Management of numeric inputs
		function update_offer_1_objects_A( target ) {
			if ( target < 0 ) { target = 0 };
			if ( target > {{ player.subsession.objects_A }} ) { target = {{ player.subsession.objects_A }} };
			$( "#panel_self_offer_1_objects_A" ).val( target );
			$( "#panel_comp_offer_1_objects_A" ).val( {{ player.subsession.objects_A }} - target );
		}

		function update_offer_2_objects_A( target ) {
			if ( target < 0 ) { target = 0 };
			if ( target > {{ player.subsession.objects_A }} ) { target = {{ player.subsession.objects_A }} };
			$( "#panel_self_offer_2_objects_A" ).val( target );
			$( "#panel_comp_offer_2_objects_A" ).val( {{ player.subsession.objects_A }} - target );
		}

	</script>
	<script>
		// Handling of input changes

		$( "#panel_self_offer_1_objects_A" ).on( "change", function() {
			target = $( "#panel_self_offer_1_objects_A" ).val();
			update_offer_1_objects_A( target );
			refresh_btn_update_1();
		} );

		$( "#panel_self_offer_2_objects_A" ).on( "change", function() {
			target = $( "#panel_self_offer_2_objects_A" ).val();
			update_offer_2_objects_A( target );
			refresh_btn_update_2();
		} );

		$( "#panel_comp_offer_1_objects_A" ).on( "change", function() {
			target = {{ player.subsession.objects_A }} - $( "#panel_comp_offer_1_objects_A" ).val();
			update_offer_1_objects_A( target );
			refresh_btn_update_1();
		} );

		$( "#panel_comp_offer_2_objects_A" ).on( "change", function() {
			target = {{ player.subsession.objects_A }} - $( "#panel_comp_offer_2_objects_A" ).val();
			update_offer_2_objects_A( target );
			refresh_btn_update_2();
		} );

	</script>
	<script>
		// Handling buttons

		function btn_update_1( btn ) {
			target_A = $( "#panel_self_offer_1_objects_A" ).val();
			outsideOptionA = {{ player.outside_option_A }};                                                                             // newnew 0528
			if (parseInt(target_A) < outsideOptionA) {
				// if (!confirm('You are submitting an offer lower than your outside option '+ outsideOptionA + '. This means you will earn zero if the offer is accepted. Are you sure you want to submit this offer?\n\nClick OK to submit this offer, or CANCEL to change it')) {
				if (!confirm(
						'You are submitting an offer lower than your outside option ' + outsideOptionA + '.\n\nIf accepted, you may receive fewer points than your outside option and lose some potential payoff.\n\nClick OK to submit this offer, or CANCEL to change it.'
				)) {
					return;  // If user clicks 'Cancel', abort the function
				}
				if (!confirm('Please confirm that you want to lose ' + (outsideOptionA - parseInt(target_A, 10)) + ' points relative to your outside option.\n\nClick OK to submit this offer, or CANCEL to change it.')) {
					return;
				}                                                                                                                       // newnew 0528
			}
			if ( target_A ) {
				liveSend({ message: "update", slot: 1, objects_A: target_A, objects_B: -1, time: get_timer() });
			$( "#active_self_offer_1_objects_A" ).text( target_A );
			// $( "#active_comp_offer_1_objects_A").text($("#subsession.objects_A").val() - target_A);                                  // newnew 0525
			$( "#active_comp_offer_1_objects_A" ).text( {{ player.subsession.objects_A }} - target_A );
			}
			refresh_btn_cancel_1();
			cooldown_btn_update_1();
			checkAndUpdateOfferSubmission();                                                                                            // newnew 0525
		};


		function btn_update_2( btn ) {
			target_A = $( "#panel_self_offer_2_objects_A" ).val();
			outsideOptionA = {{ player.outside_option_A }};                                                                             // newnew 0528
			if (parseInt(target_A) < outsideOptionA) {
				// if (!confirm('You are submitting an offer lower than your outside option '+ outsideOptionA + '. This means you will earn zero if the offer is accepted. Are you sure you want to submit this offer?\n\nClick OK to submit this offer, or CANCEL to change it')) {
				if (!confirm(
						'You are submitting an offer lower than your outside option ' + outsideOptionA + '.\n\nIf accepted, you may receive fewer points than your outside option and lose some potential payoff.\n\nClick OK to submit this offer, or CANCEL to change it.'
				)) {
					return;
				}
				if (!confirm('Please confirm that you want to lose ' + (outsideOptionA - parseInt(target_A, 10)) + ' points relative to your outside option.\n\nClick OK to submit this offer, or CANCEL to change it.')) {
					return;
				}                                                                                                                       // newnew 0528
			 }

			if ( target_A ) {
				liveSend({ message: "update", slot: 2, objects_A: target_A, objects_B: -1, time: get_timer() });
			}
			$( "#active_self_offer_2_objects_A" ).text( target_A );
			$( "#active_comp_offer_2_objects_A" ).text( {{ player.subsession.objects_A }} - target_A );
			refresh_btn_cancel_2();
			cooldown_btn_update_2();
			checkAndUpdateOfferSubmission();                                                                                         // newnew 0525
			// player2OfferSubmitted = true;                                                                                         // new 0525
			// checkBothPlayersSubmitted();                                                                                          // new 0525
		};

		function btn_cancel_1( btn ) {
			liveSend({ message: "cancel", slot: 1, objects_A: -1, objects_B: -1, time: get_timer() });
			$( "#active_self_offer_1_objects_A" ).text( "" );
			$( "#active_comp_offer_1_objects_A" ).text( "" );
			refresh_btn_cancel_1();
			checkAndUpdateOfferSubmission();                                                                                         // newnew 0525
		};

		function btn_cancel_2( btn ) {
			liveSend({ message: "cancel", slot: 2, objects_A: -1, objects_B: -1, time: get_timer() });
			$( "#active_self_offer_2_objects_A" ).text( "" );
			$( "#active_comp_offer_2_objects_A" ).text( "" );
			refresh_btn_cancel_2();
			checkAndUpdateOfferSubmission();                                                                                         // newnew 0525
		};

		function btn_reject_1( btn ) {
			liveSend({ message: "reject", slot: 1, objects_A: -1, objects_B: -1, time: get_timer() });
			$( "#match_self_offer_1_objects_A" ).text( "" );
			$( "#match_comp_offer_1_objects_A" ).text( "" );
			$( "#Accept_1" ).hide();
			$( "#Reject_1" ).hide();
		};

		function btn_reject_2( btn ) {
			liveSend({ message: "reject", slot: 2, objects_A: -1, objects_B: -1, time: get_timer() });
			$( "#match_self_offer_2_objects_A" ).text( "" );
			$( "#match_comp_offer_2_objects_A" ).text( "" );
			$( "#Accept_2" ).hide();
			$( "#Reject_2" ).hide();
		};

		function btn_accept_1( btn ) {
			target_A = $( "#match_self_offer_1_objects_A" ).text();
			outsideOptionA = {{ player.outside_option_A }};
			if (parseInt(target_A) < outsideOptionA) {                                                                      // newnew 0528
				// if (!confirm('You are accepting an offer lower than your outside option '+outsideOptionA+'. This means you will earn zero. Are you sure you want to accept this offer?\n\nClick OK to accept this offer, or CANCEL to change it.')) {
				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 user clicks 'Cancel', abort the function
				}
				if (!confirm('Please confirm that you want to lose ' + (outsideOptionA - parseInt(target_A, 10)) + ' points relative to your outside option.\n\nClick OK to accept this offer, or CANCEL to go back.')) {
					return;
				}                                                                                                           // newnew 0528
			}
			liveSend({ message: "accept", slot: 1, objects_A: target_A, objects_B: -1, time: get_timer() });
			cooldown_btn_accept_1();
		}

		function btn_accept_2( btn ) {
			target_A = $( "#match_self_offer_2_objects_A" ).text();
			outsideOptionA = {{ player.outside_option_A }};
			if (parseInt(target_A) < outsideOptionA) {                                                                      // newnew 0528
				// if (!confirm('You are accepting an offer lower than your outside option '+outsideOptionA+'. This means you will earn zero. Are you sure you want to accept this offer?\n\nClick OK to accept this offer, or CANCEL to change it.')) {
				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 user clicks 'Cancel', abort the function
				}
				if (!confirm('Please confirm that you want to lose ' + (outsideOptionA - parseInt(target_A, 10)) + ' points relative to your outside option.\n\nClick OK to accept this offer, or CANCEL to go back.')) {
					return;
				}                                                                                                           // newnew 0528
			}
			liveSend({ message: "accept", slot: 2, objects_A: target_A, objects_B: -1, time: get_timer() });
			cooldown_btn_accept_2();
		}

		function btn_abandon( btn ) {
			liveSend({ message: "abandon", slot: 0, objects_A: -1, objects_B: -1, time: get_timer() });
			cooldown_btn_abandon();
		}

	</script>
	<script>
		// Showing and hiding buttons

		function refresh_btn_update_1() {
			if ( $( "#panel_self_offer_1_objects_A" ).val() &&
				 $( "#panel_comp_offer_1_objects_A" ).val() ) {
					$( "#Update_1" ).show();
			} else {
					$( "#Update_1" ).hide();
			}
		}

		function refresh_btn_update_2() {
			if ( $( "#panel_self_offer_2_objects_A" ).val() &&
				 $( "#panel_comp_offer_2_objects_A" ).val() ) {
					$( "#Update_2" ).show();
			} else {
					$( "#Update_2" ).hide();
			}
		}

		function refresh_btn_cancel_1() {
			if ( $( "#active_self_offer_1_objects_A" ).text() &&
				 $( "#active_comp_offer_1_objects_A" ).text() ) {
					$( "#Cancel_1" ).show();
			} else {
					$( "#Cancel_1" ).hide();
			}
		}

		function refresh_btn_cancel_2() {
			if ( $( "#active_self_offer_2_objects_A" ).text() &&
				 $( "#active_comp_offer_2_objects_A" ).text() ) {
					$( "#Cancel_2" ).show();
			} else {
					$( "#Cancel_2" ).hide();
			}
		}

		function refresh_btn_accept_reject_1() {
			if (anyOfferSubmitted && $("#match_self_offer_1_objects_A").text() && $("#match_comp_offer_1_objects_A").text()) {
			// if ($("#match_self_offer_1_objects_A").text() && $("#match_comp_offer_1_objects_A").text()) {
			// if (player1OfferSubmitted && player2OfferSubmitted) {
					$( "#Accept_1" ).show();
					$( "#Reject_1" ).show();
			} else {
					$( "#Accept_1" ).hide();
					$( "#Reject_1" ).hide();
			}
		}

		function refresh_btn_accept_reject_2() {
			if (anyOfferSubmitted && $("#match_self_offer_2_objects_A").text() && $("#match_comp_offer_2_objects_A").text()) {
			// if ($("#match_self_offer_2_objects_A").text() && $("#match_comp_offer_2_objects_A").text()) {
			// if (player1OfferSubmitted && player2OfferSubmitted) {
					$( "#Accept_2" ).show();
					$( "#Reject_2" ).show();
			} else {
					$( "#Accept_2" ).hide();
					$( "#Reject_2" ).hide();
			}
		}

	</script>
	<script>
		// Hide buttons for a cooldown time

		function cooldown_btn_update_1() {
			$( "#Update_1" ).hide();
			setTimeout(function() {
				$( "#Update_1" ).show();
			}, {{ C.BTN_COOLDOWN }});
		}

		function cooldown_btn_update_2() {
			$( "#Update_2" ).hide();
			setTimeout(function() {
				$( "#Update_2" ).show();
			}, {{ C.BTN_COOLDOWN }});
		}

		function cooldown_btn_accept_1() {
			$( "#Accept_1" ).hide();
			$( "#Reject_1" ).hide();
			setTimeout(function() {
				$( "#Accept_1" ).show();
				$( "#Reject_1" ).show();
			}, {{ C.BTN_COOLDOWN }});
		}

		function cooldown_btn_accept_2() {
			$( "#Accept_2" ).hide();
			$( "#Reject_2" ).hide();
			setTimeout(function() {
				$( "#Accept_2" ).show();
				$( "#Reject_2" ).show();
			}, {{ C.BTN_COOLDOWN }});
		}

		function cooldown_btn_abandon() {
			$( "#Abandon" ).hide();
			setTimeout(function() {
				$( "#Abandon" ).show();
			}, {{ C.BTN_COOLDOWN }});
		}
	</script>

	<script>
		// Receive offers from matching

		function liveRecv( data ) {
			if ( data["message"] == "update" ) {
				if ( data["slot"] == 1 ) {
					target_A = data.objects_A;
					// flip self and comp
					$( "#match_comp_offer_1_objects_A" ).text( target_A );
					$( "#match_self_offer_1_objects_A" ).text( {{ player.subsession.objects_A }} - target_A );
					refresh_btn_accept_reject_1();
					// BOT BEHAVIOUR //
					{{ if player.replaced_by_bot == 1 }}
						setTimeout( function() {
							if ( parseInt( $( "#match_self_offer_1_objects_A" ).text() ) >= {{ player.outside_option_A }} ) {
								btn_accept_1();
							} else {
								btn_reject_1();
							}
						}, 7000);
					{{ endif }}
					// BOT BEHAVIOUR //
				}
				if ( data["slot"] == 2 ) {
					target_A = data.objects_A;
					// flip self and comp
					$( "#match_comp_offer_2_objects_A" ).text( target_A );
					$( "#match_self_offer_2_objects_A" ).text( {{ player.subsession.objects_A }} - target_A );
					refresh_btn_accept_reject_2();
					// BOT BEHAVIOUR //
					{{ if player.replaced_by_bot == 1 }}
						setTimeout( function() {
							if ( parseInt( $( "#match_self_offer_2_objects_A" ).text() ) >= {{ player.outside_option_A }} ) {
								btn_accept_2();
							} else {
								btn_reject_2();
							}
						}, 7000);
					{{ endif }}
					// BOT BEHAVIOUR //
				}
			}
			if ( data["message"] == "cancel" ) {
				if ( data["slot"] == 1 ) {
					$( "#match_comp_offer_1_objects_A" ).text( "" );
					$( "#match_self_offer_1_objects_A" ).text( "" );
					refresh_btn_accept_reject_1();
				}
				if ( data["slot"] == 2 ) {
					$( "#match_comp_offer_2_objects_A" ).text( "" );
					$( "#match_self_offer_2_objects_A" ).text( "" );
					refresh_btn_accept_reject_2();
				}
			}
			if ( data["message"] == "reject" ) {
				if ( data["slot"] == 1 ) {
					$( "#active_comp_offer_1_objects_A" ).text( "" );
					$( "#active_self_offer_1_objects_A" ).text( "" );
					refresh_btn_cancel_1();
				}
				if ( data["slot"] == 2 ) {
					$( "#active_comp_offer_2_objects_A" ).text( "" );
					$( "#active_self_offer_2_objects_A" ).text( "" );
					refresh_btn_cancel_2();
				}
			}
			if ( data["message"] == "accept" ) {
				document.getElementById("form").submit();
			}
			if ( data["message"] == "abandon" ) {
				document.getElementById("form").submit();
			}
		}

	</script>
	<script>
		// Update timer

		document.addEventListener("DOMContentLoaded", function (event) {
			$( ".otree-timer__time-left" ).on('update.countdown', function (event) {
				var time_pased = {{ subsession.bargaining_breakdown }} - event.offset.totalSeconds;
				var minutes = Math.floor( time_pased / 60 );
				var seconds = time_pased - minutes * 60;
				if ( seconds < 10 ) {
					seconds = "0" + seconds.toString();
				}
				$("#timer").text( minutes + ":" + seconds );
				if ( time_pased > 60 ) {
					$( "#timer_wrapper" ).removeClass( "alert-info" );
					$( "#timer_wrapper" ).addClass( "alert-warning" );
				}
				// BOT BEHAVIOUR //
				{{ if player.replaced_by_bot == 1 }}
					if ( time_pased > 70 ) {
						if ( parseInt( $( "#match_self_offer_1_objects_A" ).text() ) >= {{ player.outside_option_A }} ) {
							btn_accept_1();
						} else {
							if ( parseInt( $( "#match_self_offer_2_objects_A" ).text() ) >= {{ player.outside_option_A }} ) {
								btn_accept_2();
							} else {
								btn_abandon();
							}
						}
					}
				{{ endif }}
				// BOT BEHAVIOUR //
				$("#time").text( time_pased );
			});
		});

		function get_timer() {
			return $("#time").text();
		}
	</script>
	<script>
		// Check buttons on page load

		$( document ).ready(function() {
			refresh_btn_update_1();
			refresh_btn_update_2();
			refresh_btn_cancel_1();
			refresh_btn_cancel_2();
			refresh_btn_accept_reject_1();
			refresh_btn_accept_reject_2();
			checkAndUpdateOfferSubmission();                                                                                   // newnew 0528
		});

	</script>
{{ endblock }}