{{ block title }}
<!--    Page title-->
{{ endblock }}
{{ block content }}

<!-- Tab navigation -->
<ul class="nav nav-tabs   fixed-top navbar-light bg-light justify-content-center" id="myTab" role="tablist">
    <li class="nav-item">
       <a class="nav-link active" id="part1-tab" data-toggle="tab" href="#part1" role="tab" aria-controls="part1" onclick="topFunction()"> Tab 1</a>
    </li>
    <li class="nav-item">
       <a class="nav-link" id="part2-tab" data-toggle="tab" href="#part2" role="tab" aria-controls="part2" onclick="topFunction()">Tab 2</a>
    </li>
    <li class="nav-item">
       <a class="nav-link" id="part3-tab" data-toggle="tab" href="#part3" role="tab" aria-controls="part3" onclick="topFunction()">Tab 3</a>
    </li>
    <li class="nav-item">
       <a class="nav-link" id="part4-tab" data-toggle="tab" href="#part4" role="tab" aria-controls="part4" onclick="topFunction()">Tab 4</a>
    </li>
    <li class="nav-item">
       <a class="nav-link" id="part5-tab" data-toggle="tab" href="#part5" role="tab" aria-controls="part5" onclick="topFunction()">Tab 5</a>
    </li>
    <li class="nav-item">
       <a class="nav-link" id="part6-tab" data-toggle="tab" href="#part6" role="tab" aria-controls="part6" onclick="topFunction()">Tab 6</a>
    </li>
 </ul>
 <br>
 <br>
 <!-- Tab content -->
 <div class="tab-content" id="myTabContent">
    <div class="tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">
       Page 1
       <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
    </div>
    <div class="tab-pane" id="part2" role="tabpanel" aria-labelledby="part2-tab">
       Page 2
       <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
       <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
    </div>
    <div class="tab-pane" id="part3" role="tabpanel" aria-labelledby="part3-tab">
       Page 3
       <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
       <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
    </div>
    <div class="tab-pane" id="part4" role="tabpanel" aria-labelledby="part4-tab">
       Page 4
       <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
       <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
    </div>
    <div class="tab-pane" id="part5" role="tabpanel" aria-labelledby="part5-tab">
       Page 5
       <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
       <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
    </div>
    <div class="tab-pane" id="part6" role="tabpanel" aria-labelledby="part6-tab">
       Page 6
       <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
       <button class="nexttab btn-primary btn next">Next</button>
    </div>
 </div>
 </body>


    {{ formfields }}

    <br>
    <div align="right">{{ next_button }}</div>


{{ endblock }}