<footer class="main-footer">
  <div class="container">

    <section class="footer-left">

      {{#if social_media.length}}
        <div class="footer-navigation">
          <h3 class="footer-section-title">{{lang 'footer.headings.social_media'}}</h3>
          <ul>
            {{#each social_media}}
              <li class="footer-navigation-list-item">
                {{#compare display_name 'google+' operator='==='}}
                  <a href="{{url}}" class="google" target="_blank">
                    <i class="icon-google"></i> Google+
                  </a>
                {{else}}
                  <a href="{{url}}" class="{{display_name}}" target="_blank">
                    <i class="icon-{{display_name}}"></i> {{display_name}}
                  </a>
                {{/compare}}
              </li>
            {{/each}}
          </ul>
        </div>
      {{/if}}

      {{#if theme_settings.footer_menu '===' 'footer-show-pages' }}
        {{#if pages.length}}
          {{> components/footer-navigation nav_items=pages}}
        {{/if}}
      {{else if theme_settings.footer_menu '===' 'footer-show-categories'}}
        {{> components/footer-navigation nav_items=categories view_all=false}}
      {{else}}
        {{> components/footer-navigation nav_items=shop_by_brand view_all=true}}
      {{/if}}

      <div class="footer-navigation">
        <h3 class="footer-section-title">{{lang 'footer.headings.user_links'}}</h3>
        <ul>
          {{#if settings.gift_certificates_enabled}}
            <li class="footer-navigation-list-item">
              <a href="{{urls.gift_certificate.purchase}}">{{lang 'footer.gift_certificate'}}</a>
            </li>
          {{/if}}

          {{#if settings.show_wishlist}}
            {{#if customer}}
              <li class="footer-navigation-list-item">
                <a href="{{urls.account.wishlists.all}}">{{lang 'footer.wishlist'}}</a>
              </li>
            {{/if}}
          {{/if}}

          {{#if settings.account_creation_enabled}}
            {{#if customer}}
              <li class="footer-navigation-list-item">
                <a href="{{urls.account.index}}">{{lang 'footer.your_account'}}</a>
              </li>
              <li class="footer-navigation-list-item">
                <a href="{{urls.auth.logout}}">{{lang 'footer.log_out'}}</a>
              </li>
            {{else}}
              <li class="footer-navigation-list-item">
                <a href="{{urls.auth.login}}">{{lang 'footer.log_in'}}</a>
              </li>
              <li class="footer-navigation-list-item">
                <a href="{{urls.auth.create_account}}">{{lang 'footer.sign_up'}}</a>
              </li>
            {{/if}}
          {{/if}}
        </ul>
      </div>

    </section>

    <div class="footer-currency-selector">
      <p class="footer-currency-selector-title show-for-sr">{{lang 'footer.headings.select_currency'}}</p>
      {{> components/currency-selector is-mobile=true}}
    </div>

    <section class="footer-right">

      {{#if settings.show_newsletter_box}}
        <div class="footer-newsletter">
          <h3 class="footer-section-title">{{lang 'newsletter.heading'}}</h3>
          <form class="footer-newsletter-form form" action="{{urls.subscribe.action}}" method="post">
            <input type="hidden" name="action" value="subscribe">
            <input type="hidden" name="nl_first_name" value="bc">
            <input type="hidden" name="check" value="1">
            <label class="form-label show-for-sr" for="nl_email">{{lang 'newsletter.email'}}</label>
            <input class="newsletter-signup-email form-input" id="nl_email" name="nl_email" type="email" value="{{customer.email}}" placeholder="{{lang 'newsletter.email'}}">
            <div class="newsletter-signup-submit">
              <input class="submit button" type="submit" value="{{lang 'newsletter.subscribe'}}">
            </div>
          </form>
        </div>
      {{/if}}

      <div class="footer-payment-icons">
        <ul class="footer-payment-icons-list">
          {{#if theme_settings.payment_visa}}
            <li><i class="icon-visa"></i></li>
          {{/if}}

          {{#if theme_settings.payment_mastercard}}
            <li><i class="icon-mastercard"></i></li>
          {{/if}}

          {{#if theme_settings.payment_american_express}}
            <li><i class="icon-americanexpress"></i></li>
          {{/if}}

          {{#if theme_settings.payment_discover}}
            <li><i class="icon-discover"></i></li>
          {{/if}}

          {{#if theme_settings.payment_paypal}}
            <li><i class="icon-paypal"></i></li>
          {{/if}}

          {{#if theme_settings.payment_apple_pay}}
            <li><i class="icon-apple-pay"></i></li>
          {{/if}}
        </ul>
      </div>

      {{#if theme_settings.theme_credits}}
        <div class="footer-attribution">
          <p>Foundry {{lang 'footer.credits.theme_by'}} <a href="http://pixelunion.net" target="_blank" rel="nofollow">Pixel Union</a>, {{lang 'footer.credits.powered_by'}} <a href="http://www.bigcommerce.com/" target="_blank" rel="nofollow">BigCommerce</a></p>
        </div>
      {{/if}}

      {{#if theme_settings.theme_copyright}}
        <div class="footer-copyright">
          <p>{{lang 'footer.credits.copyright' name=settings.store_name}} &copy; <script>document.write(new Date().getFullYear())</script></p>
        </div>
      {{/if}}
    </section>

  </div>

  <div class="footer-contact">
    {{#if settings.address.length}}
      <p>
        {{ settings.address }}
      </p>
    {{/if}}

    {{#if settings.phone_number.length}}
      <p>
        {{ settings.phone_number }}
      </p>
    {{/if}}
  </div>
</footer>
