notifications-admin/app/templates/components/list-entry.html

{% from "components/components/fieldset/macro.njk" import govukFieldset %}
{% from "components/components/error-message/macro.njk" import usaErrorMessage %}

{% macro list_entry(
  field,
  item_name,
  hint='',
  autocomplete=True
) %}

  <div class="usa-form-group">
    {% if hint %}
      {% set attributes = {"aria-describedby": field.name + '-hint'} %}
    {% else %}
      {% set attributes = {} %}
    {% endif %}
    {% call govukFieldset({
        "legend": {
          "text": field.label.text,
          "isPageHeading": False
        },
        "attributes": attributes
      })
    %}
    {% if hint %}
      <div id="{{ field.name }}-hint" class="usa-hint">
        {{ hint }}
      </div>
    {% endif %}
    <div class="input-list" data-module="list-entry" data-list-item-name="{{ item_name }}" id="list-entry-{{ field.name }}">
      {% for entry in field.entries %}
        <div class="list-entry">
          {% if not autocomplete %}
            {% set autocomplete = "off" %}
          {% else %}
            {% set autocomplete = "" %}
          {% endif %}
          {% if entry.errors %}
            {% set label_classes = "usa-input--numbered__label usa-input--numbered__label--error" %}
          {% else %}
            {% set label_classes = "usa-input--numbered__label" %}
          {% endif %}
          {% set field_name = field.name + "-" + loop.index|string %}
          {{ entry(param_extensions={
            "id": "input-" + field_name,
            "name": field_name,
            "label": {
              "html": '<span class="usa-sr-only">' + item_name + ' number </span>' + loop.index|string + '.',
              "classes": label_classes
            },
            "classes": "usa-input--numbered ",
            "value": field.data[loop.index0],
            "autocomplete": autocomplete
          }) }}
        </div>
      {% endfor %}
    </div>
  {% endcall %}

{% endmacro %}