{% extends "mainTemplate.html" %}

{% block title %}Survey Individual{% endblock %}

{% load crispy_forms_tags %}

{% block content %}
    <!--Conditional formatting with CSS-->
    <style>
      .conditional_form_part {
        display: none;
      }

      .conditional_form_part_activator:checked + .conditional_form_part {
        display: block;
      }
    </style>

    <!--Main Container-->
    <div class="container-fluid">
        <div style="padding-top: 100px; padding-left: 10px">
        <div class="card">
            <div class="card-body">

    <h2 style="text-align: center">Survey Individual</h2>

        <div class="container">
            <hr>

            <form method="POST" class="post-form">
                    {% csrf_token %}

                    {{ form|crispy }}

                    <hr>
                    <p>Is the individual over 18?</p>
                    <input class="conditional_form_part_activator" type="checkbox" id="over18Check">

                    <div class="conditional_form_part">
                        <div style="padding-top: 15px">
                            <h4 style="padding-bottom: 15px">Only proceed if the individual is over 18:</h4>

                            {{ form_extra|crispy }}
                        </div>
                    </div>

                <div class="d-flex justify-content-center">
                        <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>


        </div>
    


            </div>
        </div>
        </div>
    </div>
{% endblock %}