{% extends "global/Page.html" %}
{% load otree static %}

{% block scripts %}
    <script>
        $(function () {
            var term1 = $('input[name=pfeg_term1]'),
                term2 = $('input[name=pfeg_term2]'),
                term3 = $('input[name=pfeg_term3]');
            term1.prop('required', true);
            term2.prop('required', true);
            term3.prop('required', true);
            $('[name=pfeg_no]').change(function () {
                if ($(this).is(':checked')) {
                    term1.prop('required', false);
                    term2.prop('required', false);
                    term3.prop('required', false);
                } else {
                    term1.prop('required', true);
                    term2.prop('required', true);
                    term3.prop('required', true);
                    term1.val('');
                    term2.val('');
                    term3.val('');
                }
            });
        })
    </script>
{% endblock %}

{% block styles %}
    <style>
        .form-inline {
            margin-bottom: 20px;
        }
    </style>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}
    <div class="wrapper">
        <div align="center">
            <p>{{ Constants.miscellaneous_questions.3.label|safe  }}</p>
            <div class="container-fluid">
                <div class="row justify-content-center mt-3 align-items-center">
                    <div class="col-4 text-right">{{ form.pfeg_term1.label }}</div><div class="col-3">{{ form.pfeg_term1 }}</div>
                </div>
                <div class="row justify-content-center mt-3 align-items-center">
                    <div class="col-4 text-right">{{ form.pfeg_term2.label }}</div><div class="col-3">{{ form.pfeg_term2 }}</div>
                </div>
                <div class="row justify-content-center mt-3 align-items-center">
                    <div class="col-4 text-right">{{ form.pfeg_term3.label }}</div><div class="col-3">{{ form.pfeg_term3 }}</div>
                </div>
                <div class="row justify-content-center mt-3">
                    <div class="col">{% formfield player.pfeg_no %}</div>
                </div>
            </div>
        </div>
        <button class="otree-btn-next btn btn-primary">Confirm</button>
    </div>
{% endblock %}