notifications-admin/app/templates/components/radios.html

{% macro radios(
  field,
  hint=None,
  disable=[],
  option_hints={},
  hide_legend=False
) %}
  {% call radios_wrapper(
    field, hint, disable, option_hints, hide_legend
  ) %}
    {% for option in field %}
      {{ radio(option, disable, option_hints) }}
    {% endfor %}
  {% endcall %}
{% endmacro %}

{% macro radios_wrapper(field, hint=None, disable=[], option_hints={}, hide_legend=False) %}
  <div class="form-group {% if field.errors %} form-group-error{% endif %}">
    <fieldset>
      <legend class="{{ 'form-label' if not hide_legend else '' }}">
        {% if hide_legend %}<span class="visually-hidden">{% endif %}
          {{ field.label.text|safe }}
        {% if hide_legend %}</span>{% endif %}
        {% if field.errors %}
          <span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
            {{ field.errors[0] }}
          </span>
        {% endif %}
      </legend>
      {{ caller() }}
    </fieldset>
  </div>
{% endmacro %}

{% macro radio(option, disable=[], option_hints={}) %}
  <div class="multiple-choice">
    <input
      id="{{ option.id }}" name="{{ option.name }}" type="radio" value="{{ option.data }}"
      {% if option.data in disable %}
        disabled
      {% endif %}
      {% if option.checked %}
        checked
      {% endif %}
    >
    <label class="block-label" for="{{ option.id }}">
      {{ option.label.text }}
      {% if option_hints[option.data] %}
        <div class="block-label-hint">
          {{ option_hints[option.data] }}
        </div>
      {% endif %}
    </label>
  </div>
{% endmacro %}


{% macro radio_select(
 field,
 hint=None,
 wrapping_class='form-group'
) %}
 <div class="{{ wrapping_class }} {% if field.errors %} form-group-error{% endif %}">
   <fieldset>
     <legend class="form-label">
       {{ field.label.text }}
       {% if field.errors %}
         <span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
           {{ field.errors[0] }}
         </span>
       {% endif %}
     </legend>
     <div class="radio-select" data-module="radio-select" data-categories="{{ field.categories|join(',') }}">
       <div class="radio-select-column">
       {% for option in field %}
         <div class="multiple-choice">
           {{ option }}
           <label for="{{ option.id }}">
             {{ option.label.text }}
           </label>
         </div>
         {% if loop.first %}
       </div>
       <div class="radio-select-column">
         {% endif %}
       {% endfor %}
       </div>
     </div>
   </fieldset>
 </div>
{% endmacro %}


{% macro branding_radios(
  field,
  hint=None,
  branding_dict={},
  show_header=True
) %}
  <div class="form-group {% if field.errors %} form-group-error{% endif %}">
    <fieldset>
      <legend class="form-label">
        {% if show_header %}
          {{ field.label.text }}
        {% endif %}
        {% if field.errors %}
            <span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
              {{ field.errors[0] }}
            </span>
        {% endif %}
      </legend>
      {% for value, option, checked in field.iter_choices() %}
        <div class="multiple-choice branding-radio">
          <input
            type="radio"
            name="{{ field.name }}"
            id="{{ field.name }}-{{ loop.index }}"
            value="{{ value }}"
            {% if checked %}checked="checked"{% endif %}
          />
          <label class="block-label" for="{{ field.name }}-{{ loop.index }}">
            {% if branding_dict.get(value, {}).get('colour') %}
              <span style="background: {{ branding_dict[value].colour }}; display: inline-block; width: 3px; height: 27px;"></span>
            {% endif %}
            {% if branding_dict.get(value, {}).get('logo') %}
              <img
                src="{{ branding_dict[value].logo }}"
                height="27"
              />
            {% endif %}
            {{option}}
          </label>
        </div>
      {% endfor %}
    </fieldset>
  </div>
{% endmacro %}