<div{{ attributes.addClass('fr-consent-manager') }}>
  <div class="fr-consent-service fr-consent-manager__header">
    <fieldset class="fr-fieldset fr-fieldset--inline">
      {% if title %}
        <legend id="finality-legend" class="fr-consent-service__title">{{ title }}</legend>
      {% endif %}
      <div class="fr-consent-service__radios">
        <div class="fr-radio-group">
          <input type="radio" id="consent-all-accept" name="consent-all">
          <label class="fr-label" for="consent-all-accept">{{ 'Accept all'|t }}</label>
        </div>
        <div class="fr-radio-group">
          <input type="radio" id="consent-all-refuse" name="consent-all">
          <label class="fr-label" for="consent-all-refuse">{{ 'Refuse all'|t }}</label>
        </div>
      </div>
    </fieldset>
  </div>
  {% for service in services %}
    <div class="fr-consent-service">
      <fieldset aria-labelledby="{{ service.attributes.id }}-legend {{ service.attributes.id }}-desc" role="group" class="fr-fieldset fr-fieldset--inline">
    <legend id="{{ service.attributes.id }}-legend" class="fr-consent-service__title">{{ service.title }}</legend>
    <div class="fr-consent-service__radios">
      <div class="fr-radio-group">
        <input type="radio" id="consent-{{ service.attributes.id }}-accept" name="consent-{{ service.attributes.id }}">
        <label class="fr-label" for="consent-{{ service.attributes.id }}-accept">{{ 'Accept'|t }}</label>
      </div>
      <div class="fr-radio-group">
        <input type="radio" id="consent-{{ service.attributes.id }}-refuse" name="consent-{{ service.attributes.id }}">
        <label class="fr-label" for="consent-{{ service.attributes.id }}-refuse">{{ 'Refuse'|t }}</label>
      </div>
    </div>
    {% if service.attributes.title %}
      <p id="{{ service.attributes.id }}-desc" class="fr-consent-service__desc">{{ service.attributes.title }}</p>
    {% endif %}
    {% if service.below %}
      <div class="fr-consent-service__collapse">
        <button class="fr-consent-service__collapse-btn" aria-expanded="false" aria-describedby="{{ service.attributes.id }}-legend" aria-controls="{{ service.attributes.id }}-collapse">{{ 'See more details'|t }}</button>
      </div>
      <div class="fr-consent-services fr-collapse" id="{{ service.attributes.id }}-collapse">
        {% for sub_service in service.below %}
          {% set sub_id = sub_service.attributes.id|default('') %}
          <div class="fr-consent-service">
            <fieldset class="fr-fieldset fr-fieldset--inline">
              <legend id="{{ service.attributes.id }}-{{ sub_id }}-legend" class="fr-consent-service__title">{{ sub_service.title|default('') }}</legend>
              <div class="fr-consent-service__radios fr-fieldset--inline">
                <div class="fr-radio-group">
                  <input type="radio" id="consent-{{ service.attributes.id }}-{{ sub_id }}-accept" name="consent-{{ service.attributes.id }}-{{ sub_id }}">
                  <label class="fr-label" for="consent-{{ service.attributes.id }}-{{ sub_id }}-accept">{{ 'Accept'|t }}</label>
                </div>
                <div class="fr-radio-group">
                  <input type="radio" id="consent-{{ service.attributes.id }}-{{ sub_id }}-refuse" name="consent-{{ service.attributes.id }}-{{ sub_id }}">
                  <label class="fr-label" for="consent-{{ service.attributes.id }}-{{ sub_id }}-refuse">{{ 'Refuse'|t }}</label>
                </div>
              </div>
            </fieldset>
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </fieldset>
    </div>
  {% endfor %}
  {{ pattern('button_group', {
    attributes: {class: ['fr-consent-manager__buttons', 'fr-btns-group--inline-sm']},
    buttons: [pattern('button', {label: 'Confirm my choices'|t})]
  }, 'right') }}
</div>
