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

  .moral-scale-inputs {
    max-width: none;
    margin: 0 auto 18px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }

  .moral-scale-inputs .choice {
    margin: 0;
  }

  .moral-scale-inputs label {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
  }

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

  .moral-choice-head {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .moral-choice-stars {
    line-height: 1;
  }

  .moral-choice-text {
    font-weight: 400;
  }
</style>
{% if observed_choice == 'donate' %}
<p>Ce participant a décidé de renoncer à {{ endowment }} euros pour aider l’Association Reconnue d’Utilité Publique en nous demandant de réaliser un don de {{ don }} euros en leur nom.</p>
{% else %}
<p>Ce participant a décidé de conserver la somme de {{ endowment }} euros.</p>
{% endif %}
<p>Pour réaliser votre évaluation de cette décision, veuillez sélectionner l’une des 5 options suivantes :</p>
<div class="eval-moral-grid">
  <div class="moral-scale-inputs">
    {% for v in '12345' %}
    <div class="choice">
      <label>
        <span class="moral-choice-head">
          <input
            type="radio"
            name="moral_rating"
            value="{{ v }}"
            {% if current_moral_rating == v %}checked{% endif %}
            required
          >
          {% if v == '1' %}<span class="moral-choice-stars">★☆☆☆☆</span>{% endif %}
          {% if v == '2' %}<span class="moral-choice-stars">★★☆☆☆</span>{% endif %}
          {% if v == '3' %}<span class="moral-choice-stars">★★★☆☆</span>{% endif %}
          {% if v == '4' %}<span class="moral-choice-stars">★★★★☆</span>{% endif %}
          {% if v == '5' %}<span class="moral-choice-stars">★★★★★</span>{% endif %}
        </span>
        {% if v == '1' %}<span class="moral-choice-text">très immoral</span>{% endif %}
        {% if v == '2' %}<span class="moral-choice-text">assez immoral</span>{% endif %}
        {% if v == '3' %}<span class="moral-choice-text">neutre</span>{% endif %}
        {% if v == '4' %}<span class="moral-choice-text">assez moral</span>{% endif %}
        {% if v == '5' %}<span class="moral-choice-text">très moral</span>{% endif %}
      </label>
    </div>
    {% endfor %}
  </div>
</div>
<p>Vous pouvez également laisser un court commentaire (en restant courtois) à propos de ce choix, qui sera également transmis au participant qui a fait ce choix.</p>
{{ form.moral_comment }}
{{ next_button }}
{% endblock %}