{{ extends "global/Page.html" }}
{{ block title }}Questions{{ endblock }}

{{ block content }}

<div style="max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; border-radius: 8px;">
  <h6 style="text-align: center; margin-bottom: 20px;">Please indicate how much you agree with each of the following statements.</h6>

  <p><b>Scale:</b> 1 = Completely agree, 5 = Completely disagree.</p>

  <div style="padding: 10px; background-color: #ffffff; border-radius: 6px; margin-bottom: 10px;">
    {{ formfield 'policy_science' }}
  </div>
  <div style="padding: 10px; background-color: #ffffff; border-radius: 6px; margin-bottom: 10px;">
    {{ formfield 'policy_trade' }}
  </div>
  <div style="padding: 10px; background-color: #ffffff; border-radius: 6px; margin-bottom: 10px;">
    {{ formfield 'policy_climate' }}
  </div>
</div>

<button type="submit" class="submit-btn">Next</button>

<style>
    .submit-btn {
        display: block;
        width: 100%;
        max-width: 600px;
        margin: 10px auto 0 auto;
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        font-size: 1.2em;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .submit-btn:hover {
        background-color: #45a049;
    }
</style>

{{ endblock }}