{{ block title }}
    Questionnaire
{{ endblock }}
{{ block content }}

	<div class="questionnaire-shell">
		<div class="questionnaire-card">
			<div class="questionnaire-intro">
				<p>For the next question, you and your opponent will agree to distribute an amount of {{ C.AMOUNT|to2 }} points. You will play the role of either the <b>proposer</b> or the <b>receiver</b>.</p>
				<p>The <b>proposer</b> is responsible for making an offer, and the <b>receiver</b> can choose a minimum amount he or she will accept. If the <b>proposer</b> offers a bigger amount than the <b>receiver</b>'s minimum amount, the money will be divided as specified by the <b>proposer</b>. If the <b>proposer</b> offers a smaller amount than the <b>receiver</b>'s minimum amount, both players will earn 0.00 points in this task.</p>
			</div>

	    	{{ formfields }}

			<div class="questionnaire-actions">
	    		<button class="otree-btn-next btn btn-primary">Confirm</button>
			</div>
		</div>
	</div>

{{ endblock }}

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

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

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

		.questionnaire-intro {
			margin-bottom: 18px;
			padding: 14px 16px;
			background: #edf4fa;
			border-left: 4px solid #4e6f8c;
			border-radius: 6px;
			color: #355066;
		}

		.questionnaire-intro p,
		.questionnaire-card p {
			line-height: 1.7;
			text-align: justify;
		}

		.questionnaire-card .form-group,
		.questionnaire-card .mb-3,
		.questionnaire-card .otree-form-errors {
			margin-bottom: 18px;
		}

		.questionnaire-card label,
		.questionnaire-card .col-form-label {
			font-weight: 600;
			color: #24313d;
			margin-bottom: 8px;
		}

		.questionnaire-card input,
		.questionnaire-card select {
			border-radius: 8px;
			border: 1px solid #c8d4de;
		}

		.questionnaire-card input:focus,
		.questionnaire-card select:focus {
			border-color: #4e6f8c;
			box-shadow: 0 0 0 0.15rem rgba(78, 111, 140, 0.15);
		}

		.questionnaire-actions {
			margin-top: 18px;
		}

		.btn.btn-primary {
			background: #4e6f8c;
			border-color: #4e6f8c;
			border-radius: 8px;
			font-weight: 600;
			padding: 8px 18px;
		}

		.btn.btn-primary:hover,
		.btn.btn-primary:focus {
			background: #355066;
			border-color: #355066;
		}
	</style>
{{ endblock }}

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