{% set feature_one %}
  {% block feature_one %}
  {% endblock %}
{% endset %}

{% set feature_two %}
  {% block feature_two %}
  {% endblock %}
{% endset %}

{% set legal %}
  {% block legal %}
    <p class="c-ground-nav__legal">
      © {{ organization.founding_date|date('Y') }}–{{ 'now'|date('Y') }}
      {{ organization.name }}
    </p>
  {% endblock %}
{% endset %}

<footer
  class="c-ground-nav
         {% if alternate %}c-ground-nav--alternate{% endif %}
         {% if feature_count == 1 %}c-ground-nav--single-feature{% endif %}"
>

  {#
    A note to future devs:
    Looking at this code, you may be tempted to simplify. You may think,
    surely `c-ground-nav__features-inner` could move up a level to save a div,
    or similar changes. Trust me, I've tried. The three outer containers are
    needed to keep the layout in alignment with other containers on the page.
    The features and their wrapper need to be nested inside so they can be
    centered and behave appropriately when there's only one feature.
    Modify at your own risk, and test thoroughly.
  #}
  {% if feature_count > 0 %}
    <div class="c-ground-nav__features o-container o-container--pad-inline">
      <div class="o-container__content">
        <div class="o-container__fill">
          <div class="c-ground-nav__features-inner t-dark">
            <div class="c-ground-nav__feature {% if feature_count > 1 %}t-alternate{% endif %}">
              {{ feature_one }}
            </div>
            {% if feature_count > 1 %}
              <div class="c-ground-nav__feature">
                {{ feature_two }}
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  {% endif %}

  {#
    Ground Nav Content:
    1. Usage of the `address` element
      @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address
    2. Format phone numbers for click-to-call
      @see https://web.dev/click-to-call/
    3. Prefer `aria-labelledby` to `aria-label` for translation
      @see https://heydonworks.com/article/aria-label-is-a-xenophobe/
    4. We want different text for screenreaders than sighted users.
      For sighted users "Explore" is a better label, but for screenreaders,
      who may be navigating by roles or headings, indicating that this menu
      contains the main menu contents plus some links is more meaningful.
    5. Add `role="list"` to list elements to retain screenreader semantics
      @see https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
    6. Add `focusable="false"` to SVGs to retain screenreader semantics
      @see https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html#svgs-that-are-decorative
  #}

  <div class="c-ground-nav__content o-container o-container--pad">
    <div class="c-ground-nav__content-inner o-container__content">

      {% with organization|default({}) %}
        <div class="c-ground-nav__address">
          <h2 id="contact-info-label" hidden>
            Contact info
          </h2>
          <address aria-labelledby="contact-info-label">{# 1, 3 #}
            <a href="{{ url }}" class="c-heading c-heading--medium">
              {{ name }}
            </a><br>
            {% with address|default({}) %}
              {{ street_address }}<br>
              {{ address_locality }},
              {{ address_region }}
              {{ postal_code }}
              {{ address_country }}<br>
            {% endwith %}
            <a
              class="c-ground-nav__address-section"
              href="mailto:{{ email }}"
            >{{ email }}</a><br>
            <a href="tel:{{ telephone|replace({
              '.': '-',
              '(': '-',
              ')': '-',
              ' ': ''
            }) }}">{{ telephone }}</a>{# 2 #}
          </address>
        </div>
      {% endwith %}

      <nav class="c-ground-nav__menu" aria-labelledby="explore-menu-label">{# 3 #}
        <h2 id="explore-menu-label" class="c-heading c-heading--medium">
          <span aria-hidden="true">Explore</span>{# 4 #}
          <span class="u-hidden-visually">Extended Menu</span>{# 4 #}
        </h2>
        <ul class="c-ground-nav__menu-items o-list" role="list">{# 5 #}
          {% for item in menu.items %}
            <li class="c-ground-nav__menu-item">
              <a class="c-ground-nav__menu-action"
                href="{{ item.link }}"
                {% if item.current %}
                  aria-current="page"
                {% endif %}>
                {{ item.title }}
              </a>
            </li>
          {% endfor %}
        </ul>
      </nav>

      <nav class="c-ground-nav__topics" aria-labelledby="topics-menu-label">{# 3 #}
        <h2 id="topics-menu-label" class="c-heading c-heading--medium">
          Topics
        </h2>
        <ul class="c-ground-nav__menu-items o-list" role="list">{# 5 #}
          {% for item in topics.items %}
            <li class="c-ground-nav__menu-item">
              <a class="c-ground-nav__menu-action"
                href="{{ item.link }}"
                {% if item.current %}
                  aria-current="page"
                {% endif %}>
                {{ item.title }}
              </a>
            </li>
          {% endfor %}
        </ul>
      </nav>

      <div class="c-ground-nav__social">
        <h2 id="social-links-label" hidden>
          Social Links
        </h2>
        <ul
          aria-labelledby="social-links-label"
          class="c-ground-nav__social-list o-list o-list--inline"
          role="list">{# 5 #}
          {% for item in social.items %}
            <li class="c-ground-nav__social-item">
              <a class="c-ground-nav__social-action" href="{{ item.link }}">
                <span class="u-hidden-visually">{{ item.title }}</span>
                {% include '@cloudfour/components/icon/icon.twig' with {
                  name: item.icon,
                  fallback: 'link',
                  focusable: 'false',
                  class: 'c-ground-nav__social-icon'
                } only %}{# 6 #}
              </a>
            </li>
          {% endfor %}
        </ul>
      </div>

      {% if legal %}
        {{ legal }}
      {% endif %}

    </div>
  </div>
</footer>