{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
{% comment %} {{ 'wick--footer.css' | asset_url | stylesheet_tag }} {% endcomment %}

<link rel="stylesheet" href="{{ 'component-newsletter.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'disclosure.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'disclosure.css' | asset_url | stylesheet_tag }}</noscript>

{%- style -%}
  .footer-sub {
    margin-top: {{ section.settings.margin_top | times: 0.75 | round: 0 }}px;
  }

  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .footer-sub {
      margin-top: {{ section.settings.margin_top }}px;
    }

    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<footer class="footer-sub color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-padding">
  {%- if section.blocks.size > 0 or section.settings.newsletter_enable -%}
    <div class="footer__content-top page-width__padding">
      <div class="container-fluid">
        <div class="row">
          {% comment %}
          <div class="col-lg-12 col-logo">
            {%- if section.settings.svg_logo != blank and section.settings.svg_logo contains '.svg' -%}
              <img class="logo logo__footer" src="{{ section.settings.svg_logo }}" width="{{ section.settings.logo_width }}" alt="{{ shop.name }}" />
            {%- elsif section.settings.logo != blank -%}
              {%- liquid
                assign logo_alt = section.settings.logo.alt | default: shop.name | escape
                assign logo = section.settings.logo
                assign logo_url = section.settings.logo | image_url: width: section.settings.width
              -%}
              {{ logo_url | image_tag:
                class: 'header__heading-logo',
                widths: '50, 100, 150, 200, 250, 300, 400, 500',
                width: section.settings.logo_width,
                alt: logo_alt
              }}
            {%- else -%}
              <span class="h2">{{ shop.name }}</span>
            {%- endif -%}
          </div>
          {% endcomment %}
          <div class="col-lg-20 col-logo"></div>
          <div class="col-lg-20 mx-auto">
            <div class="footer-block--newsletter">
              {%- if section.settings.newsletter_enable -%}
                <div class="footer-block__newsletter">
                  {%- if section.settings.newsletter_heading != blank -%}
                    <h3 class="h4">{{ section.settings.newsletter_heading | escape }}</h3>
                  {%- endif -%}
                  {%- if section.settings.newsletter_intro != blank -%}
                    {{ section.settings.newsletter_intro }}
                  {%- endif -%}
                  {%- if section.settings.form_type == "klaviyo" -%}
                    <div class="klaviyo-form-Yrmre9"></div>
                  {%- else -%}
                    <div class="footer-block__newsletter">
                      {%- if block.settings.newsletter_heading != blank -%}
                        <h2 class="footer-block__heading inline-richtext">{{ block.settings.newsletter_heading }}</h2>
                      {%- endif -%}
                      {%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
                        <input type="hidden" name="contact[tags]" value="newsletter">
                        <div class="newsletter-form__field-wrapper">
                          <div class="field">
                            <input
                              id="NewsletterForm--{{ block.id }}"
                              type="email"
                              name="contact[email]"
                              class="field__input"
                              value="{{ form.email }}"
                              aria-label="{{ 'newsletter.label' | t }}"
                              aria-required="true"
                              autocorrect="off"
                              autocapitalize="off"
                              autocomplete="email"
                              {% if form.errors %}
                                autofocus
                                aria-invalid="true"
                                aria-describedby="ContactFooter-error"
                              {% elsif form.posted_successfully? %}
                                aria-describedby="ContactFooter-success"
                              {% endif %}
                              placeholder="{{ 'newsletter.label' | t }}"
                              required
                            >
                            <button
                              type="submit"
                              class="newsletter-form__button field__button button"
                              name="commit"
                              id="Subscribe"
                              aria-label="{{ 'newsletter.button_label' | t }}"
                            >
                              <span class="svg-wrapper">
                                {{ 'Subscribe' | upcase }}
                              </span>
                            </button>
                          </div>
                          {%- if form.errors -%}
                            <small class="newsletter-form__message form__message" id="ContactFooter-error">
                              <span class="svg-wrapper">
                                {{- 'icon-error.svg' | inline_asset_content -}}
                              </span>
                              {{- form.errors.translated_fields.email | capitalize }}
                              {{ form.errors.messages.email -}}
                            </small>
                          {%- endif -%}
                        </div>
                        {%- if form.posted_successfully? -%}
                          <h3
                            class="newsletter-form__message newsletter-form__message--success form__message"
                            id="ContactFooter-success"
                            tabindex="-1"
                            autofocus
                          >
                            <span class="svg-wrapper">
                              {{- 'icon-success.svg' | inline_asset_content -}}
                            </span>
                            {{- 'newsletter.success' | t }}
                          </h3>
                        {%- endif -%}
                      {%- endform -%}
                    </div>
                  {%- endif -%}
                </div>
              {%- endif -%}
            </div>
          </div>
          <div class="col-lg-24 align-self-end">
            {%- if section.blocks.size > 0 -%}
              <div class="d-flex justify-content-end footer__blocks-wrapper">
                {%- for block in section.blocks -%}
                  <div {{ block.shopify_attributes }}>
                    {%- if block.settings.heading != blank -%}
                      <h4>{{- block.settings.heading | escape -}}</h4>
                    {%- endif -%}

                    {%- case block.type -%}
                      {%- when 'text' -%}
                        <div class="rte">
                          {{ block.settings.subtext }}
                        </div>
                      {%- when 'image' -%}
                        <div class="footer-block__details-content footer-block-image {{ block.settings.alignment }}">
                          {%- if block.settings.image != blank -%}
                            {%- assign image_size_2x = block.settings.image_width | times: 2 | at_most: 5760 -%}
                            <img
                              srcset= "{{ block.settings.image | image_url: width: block.settings.image_width }}, {{ block.settings.image | image_url: width: image_size_2x }} 2x"
                              src="{{ block.settings.image | image_url: width: 400 }}"
                              alt="{{ block.settings.image.alt | escape }}"
                              loading="lazy"
                              width="{{ block.settings.image.width }}"
                              height="{{ block.settings.image.height }}"
                              style="max-width: min(100%, {{ block.settings.image_width }}px);"
                            >
                          {%- else -%}
                            {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                          {%- endif -%}
                        </div>
                      {%- endcase -%}
                  </div>
                {%- endfor -%}
              </div>
            {%- endif -%}
          </div>
        </div>
      </div>

    </div>
  {%- endif -%}

</footer>

{% schema %}
{
  "name": "Sub footer",
  "blocks": [
    {
      "type": "text",
      "name": "t:sections.footer.blocks.text.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Heading",
          "label": "t:sections.footer.blocks.text.settings.heading.label"
        },
        {
          "type": "html",
          "id": "subtext",
          "default": "<p>Share contact information, store details, and brand content with your customers.</p>",
          "label": "t:sections.footer.blocks.text.settings.subtext.label"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label"
    },
    {
      "type": "header",
      "content": "Logo"
    },
    {
      "type": "image_picker",
      "id": "logo",
      "label": "t:sections.header.settings.logo.label"
    },
    {
      "type": "text",
      "id": "svg_logo",
      "label": "SVG logo",
      "info": "Upload to [Files](/admin/settings/files) and paste the link here"
    },
    {
      "type": "range",
      "id": "logo_width",
      "min": 50,
      "max": 250,
      "step": 10,
      "default": 100,
      "unit": "t:sections.header.settings.logo_width.unit",
      "label": "t:sections.header.settings.logo_width.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__1.content",
      "info": "t:sections.footer.settings.header__1.info"
    },
    {
      "type": "checkbox",
      "id": "newsletter_enable",
      "default": true,
      "label": "t:sections.footer.settings.newsletter_enable.label"
    },
    {
      "type": "text",
      "id": "newsletter_heading",
      "default": "Subscribe to our emails",
      "label": "t:sections.footer.settings.newsletter_heading.label"
    },
    {
      "type": "richtext",
      "id": "newsletter_intro",
      "default": "<p>Get exlusive offers sent directly to your email, and find out about upcoming releases and any events. We respect your privacy!</p>",
      "label": "Description"
    },
    {
      "type": "select",
      "id": "form_type",
      "label": "Form type",
      "options": [
        {
          "value": "default",
          "label": "Default" 
        },
        {
          "value": "klaviyo",
          "label": "Klaviyo"
        }
      ],
      "default": "klaviyo"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__3.content",
      "info": "t:sections.footer.settings.header__4.info"
    },
    {
      "type": "checkbox",
      "id": "enable_country_selector",
      "default": true,
      "label": "t:sections.footer.settings.enable_country_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__5.content",
      "info": "t:sections.footer.settings.header__6.info"
    },
    {
      "type": "checkbox",
      "id": "enable_language_selector",
      "default": true,
      "label": "t:sections.footer.settings.enable_language_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.spacing"
    },
    {
      "type": "range",
      "id": "margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.footer.settings.margin_top.label",
      "default": 0
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "text"
      }
    ]
  }
}
{% endschema %}