{{ block title }}
    {# Your chosen Ranking#}
{{ endblock }}



{% block styles %}
<style>
body {
  background-color: white;
  text-align: center;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
}

.left {
  background-color: white;
  text-align: left;
  color: black;
  font-family: Arial, Helvetica, sans-serif;}

.green {
 background-color: #90ee90;
}

.orange {
 background-color: #ff8800;
}

</style>


<style>
.underline {
  width: 100%;
  border-bottom: 1px solid 	#d3d3d3;
  margin-bottom: 20px;
    text-align: left;
  position: relative;
}
</style>

<style>

    table {
  width:80%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}

th, td {
  padding: 10px;
  text-align: center;
}

#gray {
 background-color: #eee;
}

#green {
 background-color: #90ee90;
}
}
</style>
<link href="{% static 'instruction_tabs/custom.css' %}" rel="stylesheet">
{% 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>

</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">


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold"> General Questions
 </h3>
  </div>
<br>

        <table class="table">
        <tr>
            <td>
                {{ form.age.label }}
            </td>
            <td>
                {{ form.age}}
            </td>
        </tr>
                    <tr>
            <td>
                {{ form.country.label }}
            </td>
            <td>
                {{ form.country}}
            </td>
        </tr>
                                <tr>
            <td>
                {{ form.gender.label }}
            </td>
            <td>
                {{ form.gender}}
            </td>
        </tr>
            <tr>
            <td>
                {{ form.gender_type.label }}
            </td>
            <td>
                {{ form.gender_type}}
            </td>
                                            <tr>
            <td>
                {{ form.profession.label }}
            </td>
            <td>
                {{ form.profession}}
            </td>
        </tr>

        </tr>
            </table>

            <table class="table">
                                        <tr>
            <td>
                {{ formfield 'control' }}
            </td>
        </tr>
            <tr>
            <td>
                <p>In political matters, people talk of “the left” and
                    “the right”. Generally speaking,
                    how would you place your views on this scale? </p>
                    <p>
                        Left &nbsp;
                        {{ for choice in form.politics }}
                            {{ choice }}
                        {{ endfor }}
                        &nbsp; Right
                    </p>
            </td>
    </table>

    <hr>
    {% next_button %}

    </div>
    </div>

{% endblock %}

{% block scripts %}
<script src="{% static 'instruction_tabs/prev_next_button.js' %}"></script>
{% endblock %}