{{ block title }}

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> 7 / 7 </div>
</div>

<style>
    .progress-bar {
      width: 100%;
    }
</style>

<br>

About You
{{ endblock }}

{{ block content }}

<!-- <div class="row">
<div class="card bg-light m-3">
    <br>
    <h5>
        <u><strong>About you</strong></u>
    </h5>
</div>
</div> -->

<table class="table table-striped">

{{ for field in form }}
    <tr>
        <td>{{ field.label }}</td>
        <td>{{ field }}</td>
{{ endfor }}
    </tr>


</table>


<button class="btn btn-primary" style="float: right;">Next</button>

<script>
    // workaround needed until wtforms #615 is published
    for (let option of document.querySelectorAll('input[type=radio]')) {
        option.required = 'required';
    }
</script>

{{ endblock }}