{% extends "global/Page.html" %}
{% block content %}

<style>
  table.car-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
  }
  table.car-table th, table.car-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    vertical-align: bottom;
  }
  table.car-table th:first-child,
  table.car-table td:first-child {
    text-align: left;
    font-weight: bold;
    background-color: #f9f9f9;
  }
</style>



<h4>Please indicate how important each of the following is to <em>you</em>:</h4>
<table class="car-table">
  <tr>
    <th></th>
    <th>Very Unimportant</th>
    <th>Unimportant</th>
    <th>Somewhat Unimportant</th>
    <th>Neutral</th>
    <th>Somewhat Important</th>
    <th>Important</th>
    <th>Very Important</th>
  </tr>
  {% for field in form %}
    {% if field.name == 'car_you_financial' or field.name == 'car_you_environment' %}
    <tr>
      <td>{{ field.label }}</td>
      {% for i in range(1, 8) %}
        <td><input type="radio" name="{{ field.name }}" value="{{ i }}" required></td>
      {% endfor %}
    </tr>
    {% endif %}
  {% endfor %}
</table>

<br><hr><br>

<h4>Please indicate how important it is that <em>companies in general</em> value each of the following:</h4>
<table class="car-table">
  <tr>
    <th></th>
    <th>Very Unimportant</th>
    <th>Unimportant</th>
    <th>Somewhat Unimportant</th>
    <th>Neutral</th>
    <th>Somewhat Important</th>
    <th>Important</th>
    <th>Very Important</th>
  </tr>
  {% for field in form %}
    {% if field.name == 'car_firm_financial' or field.name == 'car_firm_environment' %}
    <tr>
      <td>{{ field.label }}</td>
      {% for i in range(1, 8) %}
        <td><input type="radio" name="{{ field.name }}" value="{{ i }}" required></td>
      {% endfor %}
    </tr>
    {% endif %}
  {% endfor %}
</table>

{% next_button %}
{% endblock %}