<div class="footer-content" style="background-color: {{ section.settings.background_color }};margin-top: {{ section.settings.margin_top }}px;">

    <div class="container">
    <div class="footer-columns {% if section.settings.hide_headlines %} footer-colums-hide-headlines{% endif %}">
        {%- for block in section.blocks -%}
        {% case block.type %}

            {% when "text" %}
                {%- capture text_logo_height -%}
                    height: {{ block.settings.logo_height }}px;

                    margin-top: {{ block.settings.logo_margin_top }}px;
                    margin-bottom: {{ block.settings.logo_margin_bottom }}px;
                {%- endcapture -%}

                <div class="footer-column-text {% if block.settings.mobile_center == true %} footer-column-text-centered{% endif %}" {% render 'overwrite-theme-style', settings: block.settings %}>
                    {%- if block.settings.show_logo -%}
                        {% render 'image', 
                            image: block.settings.logo, 
                            style: text_logo_height,
                            placeholder_padding_horizontal: 10,
                            placeholder_padding_vertical: 10 %}
                    {%- endif -%}

                    {{ block.settings.text }}
                </div>

            {% when "newsletter" %}
                {%- capture style -%}
                    {%- if block.settings.newsletter_text_color != blank -%}
                        {%- assign alpha = block.settings.newsletter_text_color | color_extract: 'alpha' -%}
                
                        {%- if alpha == 1 -%}
                            --color-newsletter-text: {{ block.settings.newsletter_text_color | color_to_hex }}; 
                            --color-newsletter-heading: {{ block.settings.newsletter_text_color | color_to_hex }}; 
                        {%- endif -%}
                    {%- endif -%}
                {%- endcapture -%}

                <div class="footer-column-newsletter" style="{{ style | strip_newlines }}">
                    <h2 class="h3">{{ 'footer.newsletter.title' | t }}</h2>
                    <p>{{ 'footer.newsletter.description' | t }}</p>
                
                    {%- assign formId = 'ContactFooter' -%}
                    {% form 'customer', id: formId, novalidate: 'novalidate' %}
                        {%- if form.posted_successfully? -%}
                        <p class="form-message form-message--success" tabindex="-1" data-form-status>
                            {{ 'footer.newsletter.success_message' | t }}
                        </p>
                        {%- endif -%}
                        <input type="hidden" name="contact[tags]" value="newsletter">
                        <div class="footer-column-newsletter-inputs">
                            {%- capture style -%}
                                {%- if block.settings.overwrite_theme_background_color != blank -%}
                                    {%- assign alpha = block.settings.overwrite_theme_background_color | color_extract: 'alpha' -%}
                            
                                    {%- if alpha == 1 -%}
                                        border-color: {{ block.settings.overwrite_theme_background_color | color_to_hex }}; 
                                    {%- endif -%}
                                {%- endif -%}
                            {%- endcapture -%}

                            <input type="email"
                                name="contact[email]"
                                id="{{ formId }}-email"
                                class="newsletter-input{% if form.errors %} input--error{% endif %}"
                                value="{{ form.email }}"
                                placeholder="{{ 'footer.newsletter.field_placeholder' | t }}"
                                aria-required="true"
                                required
                                style="{{ style | strip_newlines }}"
                                autocorrect="off"
                                autocapitalize="off"
                                {% if form.errors %}
                                    aria-invalid="true"
                                    aria-describedby="{{ formId }}-email-error"
                                    data-form-status
                                {% endif %}>
                            <button type="submit" class="btn newsletter-submit" name="commit" {% render 'overwrite-theme-style', settings: block.settings %}>{{ 'footer.newsletter.button' | t }}</button>
                        </div>
                        {% if form.errors contains 'email' %}
                        <span id="{{ formId }}-email-error" class="input-error-message">
                            <span class="visually-hidden">{{ 'footer.newsletter.error_message' | t }}</span>
                            <span class="site-footer__newsletter-error">{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
                        </span>
                        {% endif %}
                    {% endform %}
                
                    <p class="footer-column-newsletter-privacy-policy">{{ 'footer.newsletter.policy_text' | t }}<a href="/policies/privacy-policy">{{ 'footer.newsletter.policy_link' | t }}</a>.</p>
                </div>

            {% when "menu" %}
                <div class="footer-column-menu {% unless block.settings.mobile_collapsible %} footer-column-menu-keep-expanded{% endunless %} {% if section.settings.show_menu_centered %} footer-column-menu-show-centered{% endif %}">
                    <h2 class="h3 no-click-highlight" {% render 'overwrite-theme-style', settings: block.settings %}>
                        <span>
                            {%- if block.settings.headline != blank -%}
                                {{ block.settings.headline }}
                            {%- else -%}
                                {{ block.settings.menu.title }}
                            {%- endif -%}
                        </span>
                        <span {% render 'overwrite-theme-style', background_color: section.settings.header_button_color, text_color: section.settings.header_button_plus_sign_color %}>
                            <div>+</div>
                            {% render 'icon-arrow-right' %}
                        </span>
                    </h2>
                    <ul>
                        {%- assign menu = linklists[block.settings.menu] -%}
                        {%- if menu != blank and menu.links.size > 0 -%}
                            {%- for link in menu.links -%}
                                <li><a href="{{ link.url }}" {% render 'overwrite-theme-style', settings: block.settings %}>{{ link.title }}</a></li>
                            {%- endfor -%}
                        {%- endif -%}
                    </ul>
                </div>

        {% endcase %}
        {%- endfor -%}
    </div>
    </div>

    <div class="footer-bottom-misc">
    <div class="container">
        {%- if section.settings.show_social_networks -%}
            {%- capture style -%}
                {%- if section.settings.overwrite_theme_text_color != blank -%}
                    {%- assign alpha = section.settings.overwrite_theme_text_color | color_extract: 'alpha' -%}
            
                    {%- if alpha == 1 -%}
                        --color-social-networks: {{ section.settings.overwrite_theme_text_color | color_to_hex }}; 
                    {%- endif -%}
                {%- endif -%}
            {%- endcapture -%}

            <div class="footer-social-networks">{% render 'social-networks', style: style %}</div>
        {%- endif -%}

        <div class="footer-copyright" {% render 'overwrite-theme-style', settings: section.settings %}>
            {%- if section.settings.made_by != blank -%}
                {{ section.settings.made_by }}
            {%- endif -%}

            © {{ 'now' | date: "%Y" }} <b>{{ shop.name }}</b>
        </div>

        {%- if section.settings.show_payment_provider -%}
            <div class="footer-payment-providers">{% render 'payment-provider' %}</div>
        {%- endif -%}
    </div>
    </div>

</div>

{% comment %} ===== Section Help Video ===== {% endcomment %}
{%- if request.design_mode -%}
    <div 
        class="section-help-video-identifier" 
        data-title="{{ 'conrise.sectionHelpTitles.footer' | t }}", 
        data-video="aeb5fa87e7474755854051dca591a48a?sid=582a55a9-a770-41bf-98c0-a51153616260"
        data-padding-bottom="55.95854922279793%"
    ></div>
{%- endif -%}
{% comment %} ===== Section Help Video ===== {% endcomment %}

{% schema %}
{
    "name": "t:sections.footer.name",
    "settings": [
        {
            "type": "header",
            "content": "t:settings.general.section_help_video",
            "info": "[Video](https://www.loom.com/share/aeb5fa87e7474755854051dca591a48a?sid=582a55a9-a770-41bf-98c0-a51153616260)"
        },
        {
            "type": "richtext",
            "id": "made_by",
            "label": "t:sections.footer.settings.made_by",
            "info": "t:sections.footer.settings.made_by_info",
            "default": "<p>Made with ❤️ in Germany</p>"
        },
        {
            "type": "header",
            "content": "t:sections.general.settings"
        },
        {
            "type": "color",
            "id": "background_color",
            "label": "t:sections.footer.settings.background_color",
            "default": "#fbfbfb"
        },
        {
            "type": "color",
            "id": "header_button_color",
            "label": "t:sections.footer.settings.header_button_color",
            "default": "#DEDEDE"
        },
        {
            "type": "color",
            "id": "header_button_plus_sign_color",
            "label": "t:sections.footer.settings.header_button_plus_sign_color"
        },
        {
            "type": "checkbox",
            "id": "show_social_networks",
            "default": true,
            "label": "t:sections.footer.settings.show_social_networks"
        },
        {
            "type": "checkbox",
            "id": "show_payment_provider",
            "default": true,
            "label": "t:sections.footer.settings.show_payment_provider"
        },
        {
            "type": "checkbox",
            "id": "hide_headlines",
            "default": false,
            "label": "t:sections.footer.settings.hide_headlines"
        },
        {
            "type": "checkbox",
            "id": "show_menu_centered",
            "default": false,
            "label": "t:sections.footer.settings.show_menu_centered"
        },
        {
            "type": "range",
            "id": "margin_top",
            "label": "t:sections.footer.settings.margin_top",
            "min": -50,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "header",
            "content": "t:sections.general.theme-settings.content",
            "info": "t:sections.general.theme-settings.info"
        },
        {
            "type": "color",
            "id": "overwrite_theme_text_color",
            "label": "t:sections.footer.settings.overwrite_theme_text_color",
            "info": "t:sections.footer.settings.overwrite_theme_text_color_info"
        }
    ],
    "blocks": [
        {
            "type": "text",
            "name": "t:sections.footer.blocks.text.name",
            "limit": 1,
            "settings": [
                {
                    "type": "image_picker",
                    "id": "logo",
                    "label": "t:sections.footer.blocks.text.settings.logo"
                },
                {
                    "type": "checkbox",
                    "id": "show_logo",
                    "default": true,
                    "label": "t:sections.footer.blocks.text.settings.show_logo"
                },
                {
                    "type": "range",
                    "id": "logo_height",
                    "label": "t:sections.footer.blocks.text.settings.logo_height",
                    "min": 0,
                    "max": 100,
                    "step": 1,
                    "unit": "px",
                    "default": 25
                },
                {
                    "type": "range",
                    "id": "logo_margin_top",
                    "label": "t:sections.footer.blocks.text.settings.logo_margin_top",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "range",
                    "id": "logo_margin_bottom",
                    "label": "t:sections.footer.blocks.text.settings.logo_margin_bottom",
                    "min": -50,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 10
                },
                {
                    "type": "richtext",
                    "id": "text",
                    "label": "t:sections.footer.blocks.text.settings.text"
                },
                {
                    "type": "checkbox",
                    "id": "mobile_center",
                    "default": false,
                    "label": "t:sections.footer.blocks.text.settings.mobile_center"
                },
                {
                    "type": "header",
                    "content": "t:sections.general.theme-settings.content",
                    "info": "t:sections.general.theme-settings.info"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_text_color",
                    "label": "t:sections.footer.blocks.text.settings.overwrite_theme_text_color",
                    "info": "t:sections.footer.blocks.text.settings.overwrite_theme_text_color_info"
                }
            ]
        },
        {
            "type": "newsletter",
            "name": "t:sections.footer.blocks.newsletter.name",
            "limit": 1,
            "settings": [
                {
                    "type": "header",
                    "content": "t:sections.general.theme-settings.content",
                    "info": "t:sections.general.theme-settings.info"
                },
                {
                    "type": "color",
                    "id": "newsletter_text_color",
                    "label": "t:sections.footer.blocks.newsletter.settings.newsletter_text_color",
                    "info": "t:sections.footer.blocks.newsletter.settings.newsletter_text_color_info"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_background_color",
                    "label": "t:sections.footer.blocks.newsletter.settings.overwrite_theme_background_color",
                    "info": "t:sections.footer.blocks.newsletter.settings.overwrite_theme_background_color_info"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_text_color",
                    "label": "t:sections.footer.blocks.newsletter.settings.overwrite_theme_text_color",
                    "info": "t:sections.footer.blocks.newsletter.settings.overwrite_theme_text_color_info"
                }
            ]
        },
        {
            "type": "menu",
            "name": "t:sections.footer.blocks.menu.name",
            "settings": [
                {
                    "type": "link_list",
                    "id": "menu",
                    "label": "t:sections.footer.blocks.menu.settings.menu"
                },
                {
                    "type": "text",
                    "id": "headline",
                    "label": "t:sections.footer.blocks.menu.settings.headline",
                    "info": "t:sections.footer.blocks.menu.settings.headline_info"
                },
                {
                    "type": "header",
                    "content": "t:sections.general.settings"
                },
                {
                    "type": "checkbox",
                    "id": "mobile_collapsible",
                    "default": true,
                    "label": "t:sections.footer.blocks.menu.settings.mobile_collapsible"
                },
                {
                    "type": "header",
                    "content": "t:sections.general.theme-settings.content",
                    "info": "t:sections.general.theme-settings.info"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_text_color",
                    "label": "t:sections.footer.blocks.menu.settings.overwrite_theme_text_color",
                    "info": "t:sections.footer.blocks.menu.settings.overwrite_theme_text_color_info"
                }
            ]
        }
    ],
    "default": {
        "blocks": [
            {
                "type": "text",
                "settings": {
                    "text": "<p>Überzeuge dich von der Qualität unserer Produkte.<br /><br />Deutsches Startup 🇩🇪<br /><br />Powered by <a href=\"https://getconrise.com/\" target=\"_blank\" title=\"conrise\">conrise</a></p>",
                    "logo_margin_bottom": 15
                }
            },
            {
                "type": "menu",
                "settings": {
                    "menu": "main-menu",
                    "headline": "Brand"
                }
            },
            {
                "type": "menu",
                "settings": {
                    "menu": "main-menu",
                    "headline": "Links"
                }
            },
            {
                "type": "newsletter",
                "settings": {
                    "overwrite_theme_background_color": "#333333",
                    "overwrite_theme_text_color": "#ffffff"
                }
            }
        ]
    }
}
{% endschema %}