<%
// load footer options and contacts from content
const footer = _.cms('footer') || {}
const contacts = _.cms('contacts') || {}
const themeCustom = _.settings.theme.custom || ''
%>

<footer class="footer py-3 py-lg-4 py-xl-5">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-auto order-<%= themeCustom === 'ecom-beauty' ? '' : 'lg-'%>last pl-xl-4">
        <div class="footer__contacts">
          <% if (footer.contacts.title) { %>
            <div class="footer__title">
              <%= footer.contacts.title %>
            </div>
          <% } %>

          <ul class="list-unstyled">
            <% if (footer.contacts.phone_wpp) { %>
              <% if (contacts.whatsapp) { %>
                <li>
                  <span class="footer__list-icon">
                    <i class="i-whatsapp"></i>
                  </span>
                  <a
                    href="javascript:;"
                    target="_blank"
                    rel="noopener"
                    class="whatsapp-link"
                    data-tel="<%= contacts.whatsapp.replace(/\D/g, '') %>"
                  >
                    <%= contacts.whatsapp %>
                  </a>
                </li>
              <% } %>
              <% if (contacts.phone) { %>
                <li>
                  <span class="footer__list-icon">
                    <i class="i-phone"></i>
                  </span>
                  <a
                    href="tel:+<%= contacts.phone.replace(/\D/g, '') %>"
                    target="_blank"
                    rel="noopener"
                  >
                    <%= contacts.phone %>
                  </a>
                </li>
              <% } %>
            <% } %>
            <% if (footer.contacts.email) { %>
              <li>
                <a href="mailto:<%= contacts.email %>" target="_blank" rel="noopener">
                  <%= contacts.email %>
                </a>
              </li>
            <% } %>
            <% if (footer.contacts.address) { %>
              <li>
                <address>
                  <%= contacts.address %>
                </address>
              </li>
            <% } %>
          </ul>

          <% if (footer.contacts.socials) { %>
            <p class="footer__social">
              <%- await include('@/layout/inc/networks', { _, contacts }) %>
            </p>
          <% } %>
        </div>
      </div>

      <% if (footer.links_1.list_pages || footer.links_1.list.find(({ url }) => url)) { %>
        <div class="col-12 col-sm-6 col-lg col-xl-auto px-xl-4">
          <a
            class="footer__title"
            data-toggle="collapse"
            href="#footer-pages"
            role="button"
            aria-expanded="false"
            aria-controls="footer-pages"
          >
            <%= footer.links_1.title || _.dictionary('pages') %>
          </a>
          <div class="collapse" id="footer-pages">
            <% if (footer.links_1.list_pages) { %>
              <ul class="footer__links">
                <% (_.cms('pages') || []).forEach(slug => { %>
                  <% const { title } = _.cms(`pages/${slug}`) %>
                  <li>
                    <i class="i-chevron-right"></i>
                    <a href="/pages/<%= slug %>">
                      <%= title %>
                    </a>
                  </li>
                <% }) %>
              </ul>
            <% } else { %>
              <ul class="footer__links">
                <% footer.links_1.list.forEach(({ url, text }) => { %>
                  <li>
                    <i class="i-chevron-right"></i>
                    <a href="<%= url %>">
                      <%= text %>
                    </a>
                  </li>
                <% }) %>
              </ul>
            <% } %>
          </div>
        </div>
      <% } %>

      <% if (footer.links_2.list_categories || footer.links_2.list.find(({ url }) => url)) { %>
        <div class="col-12 col-sm-6 col-lg col-xl-auto px-xl-4">
          <a
            class="footer__title"
            data-toggle="collapse"
            href="#footer-categories"
            role="button"
            aria-expanded="false"
            aria-controls="footer-categories"
          >
            <%= footer.links_2.title || _.dictionary('categories') %>
          </a>
          <div class="collapse" id="footer-categories">
            <% if (footer.links_2.list_categories) { %>
              <ul class="footer__links">
                <% _.categories.forEach(({ name, slug, parent }) => { %>
                  <% if (!parent) { %>
                    <li>
                      <i class="i-chevron-right"></i>
                      <a href="/<%= slug %>">
                        <%= name %>
                      </a>
                    </li>
                  <% } %>
                <% }) %>
              </ul>
            <% } else { %>
              <ul class="footer__links">
                <% footer.links_2.list.forEach(({ url, text }) => { %>
                  <li>
                    <i class="i-chevron-right"></i>
                    <a href="<%= url %>">
                      <%= text %>
                    </a>
                  </li>
                <% }) %>
              </ul>
            <% } %>
          </div>
        </div>
      <% } %>

      <div class="col-12 col-xl order-<%= themeCustom === 'ecom-beauty' ? '' : 'lg-'%>first">
        <h2 class="footer__title footer__store">
          <%= footer.description.title || _.settings.name %>
        </h2>
        <p><%- footer.description.text || _.settings.description %></p>

        <div class="mt-4 mb-3">
          <p class="footer__payment-methods">
            <% Object.keys(footer.payment_methods).forEach(method => { %>
              <% if (footer.payment_methods[method]) { %>
                <i class="pay-icon pay-icon--<%= method %>"></i>
              <% } %>
            <% }) %>
          </p>
          <div class="footer__stamps">
            <%- await include(`@/sections/stamps`, { _, opt: { stamps: footer.stamps } }) %>
          </div>
        </div>
      </div>
    </div>

    <div class="footer__credits">
      <span>
        <%= footer.credits || `© ${_.store.name} / ${contacts.address} / ${contacts.doc_number}` %>
      </span>
      <% if (themeCustom === 'ecom-beauty') { %>
        <div class="ecom-credits-container">
          <div class="ecom-credits">
            <a href="https://e-com.plus" target="_blank" rel="noopener">
              <img
                src="https://ecom.nyc3.cdn.digitaloceanspaces.com/storefront/ecom-credits-white.png"
                alt="E-Com Plus"
                width="125.42"
                height="20"
              >
            </a>
          </div>
        </div>
      <% } %>
      <button
        id="go-to-top"
        class="btn btn-primary ml-3"
        type="button"
        aria-label="<%= _.dictionary('goToTop') %>"
      >
        <i class="i-chevron-up"></i>
      </button>
    </div>
  </div>  
</footer>

<%- await include('@/layout/inc/ecom-credits') %>
