<footer class="container-gray main-footer">
  <div class="container footer-upper-block">
    <div class="footer-content">
      <div class="footer-list-wrapper">
        <ul class="footer-list">
          <li>{{ 'invest.invest' | translate }}</li>
          <li><a ng-href="{{ nav.location.sages('why-invest') }}" target="_blank" class="footer-link">{{ 'invest.why-invest' | translate }}</a></li>
          <li><a ng-href="{{ nav.location.sages('how-it-works') }}" target="_blank" class="footer-link">{{ 'invest.how-it-works' | translate }}</a></li>
          <li><a ng-href="{{ nav.location.sages('plan') }}" target="_blank" class="footer-link">{{ 'invest.make-a-plan' | translate }}</a></li>
          <li><a ng-href="{{ nav.location.sages('funds/IEFA') }}" target="_blank" class="footer-link">{{ 'invest.our-funds' | translate }}</a></li>
          <li><a ng-href="{{ nav.location.sages('investing-101') }}" target="_blank" class="footer-link">{{ 'invest.investing-101' | translate }}</a></li>
          <li><a ng-href="{{ nav.location.sages('socially-responsible-investing') }}" target="_blank" class="footer-link">{{ 'invest.responsible-investing' | translate }}</a></li>
        </ul>
      </div>
      <div class="footer-list-wrapper">
        <ul class="footer-list">
          <li>{{ 'about.about-us' | translate }}</li>
          <li><a ng-href="{{ nav.location.sages('mission') }}" target="_blank" class="footer-link">{{ 'about.our-mission' | translate }}</a></li>
          <li><a ng-href="{{ nav.location.sages('team') }}" target="_blank" class="footer-link">{{ 'about.our-team' | translate }}</a></li>
          <li><a ng-href="{{ nav.location.sages('jobs') }}" target="_blank" class="footer-link">{{ 'about.jobs' | translate }}</a></li>
          <li><a ng-href="{{ nav.location.sages('press') }}" target="_blank" class="footer-link">{{ 'about.press' | translate }}</a></li>
        </ul>
      </div>
      <div class="footer-list-wrapper">
        <ul class="footer-list">
          <li>{{ 'legal.legal' | translate }}</li>
          <li><a ng-href="{{ nav.location.sages('legal/terms') }}" target="_blank" class="footer-link">{{ 'legal.terms-of-use' | translate }}</a></li>
          <li><a ng-href="{{ nav.location.sages('legal/privacy') }}" target="_blank" class="footer-link">{{ 'legal.privacy-policy' | translate }}</a></li>
          <li><a ng-href="{{ nav.location.sages('legal/disclosure') }}" target="_blank" class="footer-link">{{ 'legal.full-disclosure' | translate }}</a></li>
          <li><a ng-href="{{ nav.location.sages('legal/file-complaint') }}" target="_blank" class="footer-link">{{ 'legal.file-a-complaint' | translate }}</a></li>
        </ul>
      </div>
      <div class="footer-list-wrapper">
        <ul class="footer-list">
          <li>{{ 'more.learn-more' | translate }}</li>
          <li><a ng-href="{{ nav.location.blog('') }}" class="footer-link" target="_blank">{{ 'more.blog' | translate }}</a></li>
          <li><a ng-href="{{ nav.location.faqs }}" target="_blank" class="footer-link">{{ 'more.help' | translate }}</a></li>
        </ul>
      </div>
      <div class="footer-list-wrapper">
        <ul class="footer-list">
          <li>{{ 'download-the-app' | translate }}</li>
          <li class="footer-app-badge-wrapper">
            <a ng-href="{{ nav.location.itunes }}"  target="_blank">
              <span class="app-badge ios-badge"></span>
            </a>
          </li>
          <li class="footer-app-badge-wrapper">
            <a ng-href="{{ nav.location.play }}" target="_blank">
              <span class="app-badge google-play-badge"></span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="footer-divider"></div>

  <div class="container footer-lower-block">
    <div class="footer-content">
      <div class="footer-list-wrapper footer-list-wrapper-contact">
        <ul class="footer-list">
          <li>{{ 'contact-us' | translate }}</li>
          <li class="footer-list-item-faded">
            <a href="mailto:{{ nav.contact.supportEmail }}" class="footer-link">{{ nav.contact.supportEmail }}</a>
          </li>
        </ul>
      </div>
      <div class="footer-list-wrapper footer-list-wrapper-contact-address">
        <ul class="footer-list">
          <li>&nbsp;</li>
          <li class="footer-list-item-faded">{{ nav.contact.addressLine1 }}</li>
          <li class="footer-list-item-faded">{{ nav.contact.addressLine2 }}</li>
          <li></li>
        </ul>
      </div>
      <div class="footer-list-wrapper">
        <ul class="footer-list">
          <li>{{ 'language' | translate }}</li>
          <li ng-repeat="(code, language) in languages">
            <span ng-switch="code === currentLanguage" class="footer-language-toggle">
              <span ng-switch-when="true" class="active">{{ language }}</span>
              <a ng-switch-when="false" ng-click="setLanguage(code)" class="inactive footer-link">
                {{ language }}
              </a>
            </span>
          </li>
        </ul>
      </div>
      <div class="footer-list-wrapper">
        <ul class="footer-list">
          <li>{{ 'social' | translate }}</li>
          <li class="footer-social-icon">
            <a ng-href="{{ nav.location.facebook }}" class="footer-link" target="_blank">
              <i class="ss-icon">facebook</i>
            </a>
          </li>
          <li class="footer-social-icon">
            <a ng-href="{{ nav.location.twitter }}" class="footer-link" target="_blank">
              <i class="ss-icon">twitter</i>
            </a>
          </li>
          <li class="footer-social-icon">
            <a ng-href="{{ nav.location.linkedin }}" class="footer-link" target="_blank">
              <i class="ss-icon">linkedin</i>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <div class="footer-content footer-copyright">
      <p translate="copyright.paragraph-1" translate-compile translate-values="{currentYear: nav.currentYear, urlCipf: nav.location.cipf }"></p>
      <p translate="copyright.paragraph-2" translate-compile translate-values="{urlFullDisclosure: nav.location.sages('legal/disclosure')}"></p>
    </div>
  </div>
</footer>
