{% extends "global/Page.html" %}
{% block title %}{% endblock %}
{% block content %}
{% include "shaping_social_norms/_block_badge.html" with block_label="Bloc D" %}
<style>
  .assoc-benefit-grid {
    max-width: 980px;
    margin: 0 auto 14px;
  }

  .assoc-benefit-labels {
    margin: 10px 0 10px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    text-align: center;
  }

  .assoc-benefit-inputs {
    margin: 0 0 18px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

  .assoc-benefit-inputs .choice {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .assoc-benefit-inputs label {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
  }

  .assoc-benefit-inputs input[type="radio"] {
    margin: 0;
  }

  .assoc-benefit-poles {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
  }
</style>
<p>Sur une échelle de 1 (pas bénéfiques) à 5 (très bénéfiques), pensez-vous que les Associations Reconnues d’Utilité Publique (ARUP) sont généralement bénéfiques pour la société ?</p>
<div class="assoc-benefit-grid">
  <div class="assoc-benefit-labels">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>
  <div class="assoc-benefit-inputs">
    {% for v in '12345' %}
    <div class="choice">
      <label>
        <input
          type="radio"
          name="arup_beneficial"
          value="{{ v }}"
          {% if current_arup_beneficial == v %}checked{% endif %}
          required
        >
      </label>
    </div>
    {% endfor %}
  </div>
  <div class="assoc-benefit-poles">
    <span>(pas bénéfiques)</span>
    <span>(très bénéfiques)</span>
  </div>
</div>
{{ next_button }}
{% endblock %}