{% from "partials/components.html" import componentList %}
{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
{% from "govuk/components/hint/macro.njk" import govukHint %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}

{% macro UkAddressField(component) %}
  {% set fieldset = component.model.fieldset %}
  {% set usePostcodeLookup = component.model.usePostcodeLookup %}

  {% set addressFieldHtml %}
    <div {{"hidden" if usePostcodeLookup }}>
      {{ componentList(component.model.components) }}
    </div>
  {% endset %}

  {% if component.model.hint %}
    {% set addressHintHtml %}
      {{ govukHint({
        id: component.model.name + "-hint",
        text: component.model.hint.text
      } if fieldset else component.model.hint) }}
    {% endset %}

    {% set addressFieldHtml = addressHintHtml + addressFieldHtml %}
  {% endif %}

  <div id="{{component.model.name}}" class="govuk-form-group{{ ' govuk-form-group--error' if usePostcodeLookup and component.model.errors | length }}">
    {{ govukFieldset({
      legend: fieldset.legend,
      attributes: fieldset.attributes,
      html: addressFieldHtml
    }) if fieldset else addressFieldHtml }}

    {% if usePostcodeLookup %}
      {% set value = component.model.value %}

        {% if value %}
          {% set insetHtml %}
            <strong>Selected address:</strong>
            <br><br>
            {{ value }}
            <br><br>
            <p class="govuk-body">
              <button class="govuk-link govuk-button--link govuk-!-margin-right-1" name="action"
                value="external-{{component.model.name}}">Use a different address</button>
            </p>
          {% endset %}

          {{ govukInsetText({
            html: insetHtml,
            classes: "govuk-!-margin-top-2"
          }) }}
        {% else %}
          <div class="govuk-button-group govuk-!-margin-bottom-0">
            {{ govukButton({
              text: "Find an address",
              attributes: {
                name: "action",
                value: "external-" + component.model.name
              },
              classes: "govuk-button--secondary govuk-!-margin-right-1 govuk-!-margin-bottom-0"
            }) }}
            <p class="govuk-body govuk-!-margin-bottom-0">or <button class="govuk-link govuk-button--link govuk-!-margin-right-1 govuk-!-margin-bottom-0" name="action" value="external-{{component.model.name}}--step:manual">enter address manually</button></p>
          </div>
          {# Include a line break if this is the last component #}
          {% if components[components.length - 1] == component %}
            <hr class="govuk-section-break govuk-section-break--l govuk-section-break--visible">
          {% endif %}
        {% endif %}
    {% endif %}
  </div>
{% endmacro %}