{{#
/**
 * @name footer
 * @description A partial for the footer
 * @todo Document property vars
 */
#}}

<footer class="bg-slate pb-10 xl--pb-0">
  <nav class="mw-grid mx-auto pt-10 pb-4 px-4 grid g-cols gap-s">
    <div class="mb-4 g-col-6 s--g-col-4 m--g-col-3 m--g-row-2 l--g-col-2 l--g-row-1">
      <a href="{{ homepage }}" class="inline-block dim">
        <img src="{{ theme:asset src='images/ac-mark.svg' }}" alt="ActiveCampaign logo mark">
      </a>
    </div>

    {{ nav_footer }}
    {{ nav_list }}
    <div class="mb-4 g-col-6 s--g-col-4 m--g-col-3 l--g-col-2">
      <h6 class="white title lh-2 tt-upper m-0 mb-4 fs-3 ls">
        {{ heading }}
      </h6>

      <ul class="list m-0 p-0">
        {{ nav_list_items }}
        <li class="mb-1">
          <a href="{{ url }}" class="link body fs-3 slate-40 hover-white lh-3 inline-block">
            {{ text }}
            {{ if url | contains:careers }}
            <strong class="white ws-no-wrap bg-mint fs-1 tt-upper py-1 px-2 br-1 ml-1">{{ hiring_text }}</strong>
            {{ /if }}
            {{ if url | contains:machine-learning }}
            <strong class="ocean ws-no-wrap bg-ocean-60 fs-1 tt-upper py-1 px-1 br-1 ml-1">ML</strong>
            {{ /if }}
          </a>
        </li>
        {{ /nav_list_items }}
      </ul>
    </div>
    {{ /nav_list }}
    {{ /nav_footer }}
  </nav>

  <nav class="mw-grid mx-auto bt bw-1 bc-slate-80 language-picker">
    <ul class="list ta-center m-0 p-5 slate-40">
    {{ locales sort="name" }}
      {{ unless locale:full == "en_AU" || locale:full == "en_CA" }}
      <li class="inline-block">
        <a href="{{ url }}" class="link inline-block body fs-3 lh-2 hover-white language-option" data-language-tag="{{ locale:full }}">
          {{ locale:name }}
        </a>
      </li>
      {{ /unless }}
    {{ /locales }}
    </ul>
  </nav>

  <div class="mw-grid mx-auto slate-40 bt bw-1 bc-slate-80 mx-4 p-4 fs-2 s--flex s-ai-center">
    {{ search_form }}
    <form class="flex flex-auto jc-center s--jc-flex-end w-100 w-auto-ns s--mw-20 m-0 s--ml-4 mb-4 s--mb-0 search-form s--order-2" data-search-form>
      <div class="flex ai-center w-100 br-left-1 px-4 py-2 form-group">
        <i class="inline-block pr-2 icon icon-xs lh-1 pt-1">{{ theme:output src='images/magnifying-glass.svg' }}</i>
        <input type="search" class="input-reset w-100 fs-4 lh-4 bs-none lh-copy bg-transparent" placeholder="{{ placeholder }}" data-search-input>
      </div>

      <button type="submit" class="flex-shrink-0 pointer fs-4 lh-4 px-4 slate-60 fw-500 br-right-1 bs-none ml-1">
        {{ button }}
      </button>
    </form>
    {{ /search_form }}

    <ul class="list flex-auto w-100 m-0 p-0 flex ai-center order-2 jc-center s--order-0 s--jc-flex-start" data-main-footer-social>
      {{ nav_footer }}
      {{ social_icons }}
      <li>
        <a href="{{ url }}" class="inline-block dim {{ if !last }}mr-4{{ /if }}" target="_blank" rel="noopener nofollow">
          <svg class="svg-style" aria-labelledby="{{ social_icon }}Title" role="img">
              <title id="{{ social_icon }}Title">{{ title }}</title>
              <use xlink:href="{{ theme:images src='canstyle/sprite.svg#{ social_icon }' }}"></use>
          </svg>
        </a>
      </li>
      {{ /social_icons }}
      {{ /nav_footer }}
    </ul>
  </div>
</footer>