{%- from "nationalarchives/components/fieldset/macro.njk" import tnaFieldset -%}

{%- call tnaFieldset({
  headingLevel: params.headingLevel,
  headingSize: params.headingSize,
  id: params.id,
  legend: params.label,
  hint: params.hint,
  smallerHint: true,
  error: params.error,
  classes: params.formItemClasses,
  attributes: params.formItemAttributes,
  fieldsetClasses: params.fieldsetClasses,
  fieldsetAttributes: params.fieldsetAttributes
}) %}
  <div class="tna-radios{% if params.small or params.inline %} tna-radios--small{% endif %}{% if params.inline %} tna-radios--inline{% endif %}" id="{{ params.id }}">
    {%- for item in params.items %}
    <div class="tna-radios__item">
      <input type="radio" id="{{ item.id or (params.id ~ '-' ~ item.value) }}"{% if params.classes %} class="{{ params.classes }}"{% endif %} value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}{% if params.selected and item.value === params.selected %} checked{% endif %}>
      <label for="{{ item.id or (params.id ~ '-' ~ item.value) }}" class="tna-radios__item-label">
        {{ item.text }}
        {%- if item.hint %}
        <span class="tna-radios__item-hint"><span class="tna-visually-hidden">(</span>{{ item.hint }}<span class="tna-visually-hidden">)</span></span>
        {%- endif %}
      </label>
    </div>
    {%- endfor %}
  </div>
{%- endcall %}