{% extends "look-and-feel/layouts/question.html" %}
{% from "look-and-feel/components/fields.njk" import formSection, errorClass, errorsFor %}
{% from "look-and-feel/components/header.njk" import header %}

{% set defaultContent = {
  addAnotherLink: pageContent.addAnotherLink if pageContent.addAnotherLink else 'Add another item',
  itemLabel: pageContent.itemLabel if pageContent.itemLabel else 'item',
  noItemsMessage: pageContent.noItemsMessage if pageContent.noItemsMessage else 'No items added yet',
  itemsListLabel: pageContent.itemsListLabel if pageContent.itemsListLabel else 'Items',
  hideItemsListLabel: pageContent.hideItemsListLabel if pageContent.hideItemsListLabel else false,
  editItemLabel: pageContent.editItemLabel if pageContent.editItemLabel else 'Add another item'
}
%}

{% block fields %}

{% if isListMode %}

  {% block listItems %}
  {% call formSection() %}

    {% if not defaultContent.hideItemsListLabel %}
      {{ header(defaultContent.itemsListLabel, size='m') }}
    {% endif %}

    <dl class="add-another-list">
      {% for fieldName, item in fields.items.fields %}
        {% call addAnotherItem(item, deleteUrl(loop.index0), editUrl(loop.index0), loop.index) %}
          {% block item %}{{ item.value }}{% endblock %}
        {% endcall %}
      {% else %}
        {% call addAnotherItem(noItems=true) %}
          {% block noItems %}
            {{ defaultContent.noItemsMessage }}
          {% endblock %}
        {% endcall %}
      {% endfor %}
    </dl>
  {% endcall %}

  {% call formSection() %}
    <a href="{{ addAnotherUrl }}" class="add-another-add-link" role="button">
      {{ defaultContent.addAnotherLink }}
    </a>
  {% endcall %}

  {% endblock %}

{% endif %}

{% if isEditMode %}
  {% block editItem %}
    <p class="govuk-body">This is a placeholder block.</p>
    <p class="govuk-body">Replace it with form controls to edit the item, e.g.</p>
    <pre>
    {% raw %}
    {% block editItem %}
      {{ textbox(this.fields.item, 'Item label') }}
    {% endblock %}
    {% endraw %}
    </pre>
  {% endblock %}
{% endif %}

{% endblock %}


{# Macro specific to this layout #}
{% macro addAnotherItem(field, deleteUrl, editUrl, itemNumber, noItems=false) %}
  <dt class="visually-hidden">{% if field %} {{ safeId(field.id) }} {% endif %}</dt>
  <dd {% if field %} id="add-another-list-{{ safeId(field.id) }}" {% endif %} class="add-another-list-item {{ errorClass(field) }} {% if noItems %}noItems{% endif %}">
    {{ errorsFor(field) }}
    {{ caller() }}
  </dd>
  {% if deleteUrl or editUrl %}
    <dd class="add-another-list-controls">
      {% if editUrl %}
        <a href="{{ editUrl }}" class="add-another-edit-link">Edit<span class="visually-hidden">{{ defaultContent.itemLabel }} {{ itemNumber }}</span></a>
      {% endif %}
      {% if deleteUrl %}
        <a href="{{ deleteUrl }}" class="add-another-delete-link">Delete<span class="visually-hidden">{{ defaultContent.itemLabel }} {{ itemNumber }}</span></a>
      {% endif %}
    </dd>
  {% endif %}
{% endmacro %}