{% sw_extends '@Storefront/storefront/layout/footer/footer.html.twig' %}

{% block layout_footer_inner_container %}
<div class="footer-treukunde">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6 text-center font-secondary left-col">
                <div class="d-flex align-items-center h-100 flex-column justify-content-center">
                    <span class="claim first-line">{{ "footer.treukunde.claim-first"|trans }}</span>
                    <span class="claim second-line">{{ "footer.treukunde.claim-second"|trans }}</span>
                </div>
            </div>
            <div class="col-12 col-md-6 right-col align-self-center">
                <p>{{ "footer.treukunde.description"|trans|sw_sanitize }}</p>
                <p class="mt-3 mt-md-5 text-center">
                    <a href="{{ "footer.treukunde.url"|trans }}" class="btn btn-white">
                        {{ "footer.treukunde.button"|trans }}
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>

<div class="footer-newsletter py-5">
    <div class="container">
        <div class="row align-items-end g-md-5 gy-5">
            <div class="col-12 col-md-6">
                <h2>{{ "footer.newsletter.title"|trans }}</h2>
                <p>{{ "footer.newsletter.subtitle"|trans }}</p>
                <form class="mt-md-4" action="{{ "footer.newsletter.form.action"|trans }}" method="post" target="_blank">
                    <div id="8720591" rel="email" class="">
                        <div class="input-group">
                            <input class="form-control"
                                   required
                                   type="email"
                                   id="text8720591"
                                   name="email"
                                   value=""
                                   placeholder="{{ "footer.newsletter.placeholder"|trans }}"
                                   aria-label="{{ "footer.newsletter.input.aria-label"|trans }}">
                            <button type="submit"
                                    class="btn btn-primary"
                                    aria-label="{{ "footer.newsletter.button.aria-label"|trans }}">
                                {{ "footer.newsletter.button"|trans }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-12 col-md-6">
                <p>
                    {{ "footer.newsletter.benefits.title"|trans }}
                    <span class="d-block text-primary mt-1"> > {{ "footer.newsletter.benefits.line1"|trans }} </span>
                    <span class="d-block text-primary"> > {{ "footer.newsletter.benefits.line2"|trans }} </span>
                    <span class="d-block text-primary"> > {{ "footer.newsletter.benefits.line3"|trans }} </span>
                </p>
            </div>
        </div>
    </div>
</div>

<div class="footer-claim bg-dark text-white py-3">
    <div class="container">
        <div class="row align-items-center">
            <div class="col">
                <span class="fs-2 d-inline-block text-uppercase font-secondary">{{ "footer.claim.main"|trans }}</span>
                <span class="d-inline-block mt-2 mt-md-0 ms-md-4">{{ "footer.claim.sub"|trans }}</span>
            </div>
            <div class="col-auto">
                <a class="d-inline-block"
                   target="_blank"
                   href="{{ "footer.social.facebook.url"|trans }}"
                   title="{{ "footer.claim.facebook"|trans }}"
                   aria-label="{{ "footer.social.facebook.aria-label"|trans }}">
                    <i class="fa-kit fa-fb"></i>
                </a>
                <a target="_blank"
                   class="ms-2 d-inline-block"
                   href="{{ "footer.social.instagram.url"|trans }}"
                   title="{{ "footer.claim.instagram"|trans }}"
                   aria-label="{{ "footer.social.instagram.aria-label"|trans }}">
                    <i class="fa-kit fa-insta"></i>
                </a>
            </div>
        </div>
    </div>
</div>


    <div class="footer-content bg-primary text-white py-5">
        <div class="container">
            {% block layout_footer_navigation %}
                <div
                        id="footerColumns"
                        class="footer-columns d-flex justify-content-between"
                        {# @deprecated tag:v6.6.0 - Registering plugin on selector "data-collapse-footer" is deprecated. Use "data-collapse-footer-columns" instead #}
                        {% if feature('v6.6.0.0') %}
                            data-collapse-footer-columns="true"
                        {% else %}
                            data-collapse-footer="true"
                        {% endif %}
                        role="list"
                >
                    {% block layout_footer_navigation_hotline %}
                        <div class="footer-column js-footer-column" id="footer-hotline">
                            {% block layout_footer_navigation_hotline_headline %}
                                <div class="footer-column-headline mb-md-1 footer-headline js-footer-column-headline js-collapse-footer-column-trigger"
                                     id="collapseFooterHotlineTitle"
                                     data-bs-target="#collapseFooterHotline"
                                     aria-expanded="true"
                                     aria-controls="collapseFooterHotline"
                                     role="listitem">
                                    {{ 'footer.serviceHotlineHeadline'|trans|sw_sanitize }}
                                    {% block layout_footer_navigation_hotline_icons %}
                                        <div class="footer-column-toggle">
                                        <span class="footer-plus-icon">
                                            {% sw_icon 'plus' %}
                                        </span>
                                            <span class="footer-minus-icon">
                                            {% sw_icon 'minus' %}
                                        </span>
                                        </div>
                                    {% endblock %}
                                </div>
                            {% endblock %}

                            {% block layout_footer_navigation_hotline_content %}
                                <div id="collapseFooterHotline"
                                     class="footer-column-content collapse js-footer-column-content footer-contact"
                                     aria-labelledby="collapseFooterHotlineTitle">
                                    <div class="footer-column-content-inner">
                                        {{ 'footer.serviceHotline'|trans|sw_sanitize }}
                                    </div>
                                </div>
                            {% endblock %}
                        </div>
                    {% endblock %}

                    {% block layout_footer_navigation_columns %}
                        <div id="footer-menu">
                        {{ parent() }}
                        </div>
                    {% endblock %}
                </div>
            {% endblock %}
        </div>
    </div>


    {% block layout_footer_payment_shipping_logos %}
        {{ parent() }}
    {% endblock %}


    {% block layout_footer_copyright %}
        <div class="footer-copyright bg-dark text-white py-4">
            <div class="container">
                {{ 'footer.copyrightInfo'|trans|sw_sanitize }}
            </div>
        </div>
    {% endblock %}
{% endblock %}


{% block layout_footer_vat %}{% endblock %}

{% block layout_footer_bottom %}
    <!-- Not needed ?
    <div class="footer-bottom">
        {% block layout_footer_service_menu %}
            <div class="container">
                {% block layout_footer_service_menu_content %}
                    {% apply spaceless %}
                        <ul class="footer-service-menu-list list-unstyled">
                            {% for serviceMenuItem in page.header.serviceMenu %}
                                {% block layout_footer_service_menu_item %}
                                    <li class="footer-service-menu-item">
                                        <a class="footer-service-menu-link"
                                           href="{{ category_url(serviceMenuItem) }}"
                                           {% if category_linknewtab(serviceMenuItem) %}target="_blank"{% endif %}
                                           title="{{ serviceMenuItem.translated.name }}">
                                            {{ serviceMenuItem.translated.name }}
                                        </a>
                                    </li>
                                {% endblock %}
                            {% endfor %}
                        </ul>
                    {% endapply %}
                {% endblock %}
            </div>
        {% endblock %}
    </div>
    -->
{% endblock %}