{% 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 }}</p>
                <p class="mt-3 mt-md-5 text-center">
                    <a href="{{ "footer.treukunde.url"|trans }}" class="btn btn-outline-white">
                        {{ "footer.treukunde.button"|trans }}
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>

<div class="footer-newsletter bg-lighter 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="row footer-columns"
                        {# @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="col-md-4 footer-column js-footer-column">
                            {% 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 %}
                        {% for root in page.footer.navigation.tree %}
                            {% block layout_footer_navigation_column %}
                                <div class="ms-md-auto col-md-auto footer-column js-footer-column">
                                    {% block layout_footer_navigation_information_headline %}
                                        <div class="footer-column-headline footer-headline js-collapse-footer-column-trigger d-md-none"
                                             data-bs-target="#collapseFooterTitle{{ loop.index }}"
                                             aria-expanded="true"
                                             aria-controls="collapseFooter{{ loop.index }}">

                                            {% if root.category.type == 'folder' %}
                                                {{ root.category.translated.name }}
                                            {% else %}
                                                <a href="{{ category_url(root.category) }}"
                                                   {% if category_linknewtab(root.category) %}target="_blank"{% endif %}
                                                   title="{{ root.category.translated.name }}">
                                                    {{ root.category.translated.name }}
                                                </a>
                                            {% endif %}
                                            {% block layout_footer_navigation_information_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_information_content %}
                                        <div id="collapseFooter{{ loop.index }}"
                                             class="footer-column-content collapse js-footer-column-content"
                                             aria-labelledby="collapseFooterTitle{{ loop.index }}">
                                            <div class="footer-column-content-inner">
                                                {% block layout_footer_navigation_information_links %}
                                                    <ul class="list-unstyled">
                                                        {% for treeItem in root.children %}
                                                            {% set category = treeItem.category %}
                                                            {% set name = category.translated.name %}

                                                            {% block layout_footer_navigation_information_link_item %}
                                                                <li class="footer-link-item">
                                                                    {% block layout_footer_navigation_information_link %}
                                                                        {% if category.type == 'folder' %}
                                                                            <div>{{ name }}</div>
                                                                        {% else %}
                                                                            <a class="footer-link"
                                                                               href="{{ category_url(category) }}"
                                                                               {% if category_linknewtab(category) %}target="_blank"{% endif %}
                                                                               title="{{ name }}">
                                                                                {{ name }}
                                                                            </a>
                                                                        {% endif %}
                                                                    {% endblock %}
                                                                </li>
                                                            {% endblock %}
                                                        {% endfor %}
                                                    </ul>
                                                {% endblock %}
                                            </div>
                                        </div>
                                    {% endblock %}
                                </div>
                            {% endblock %}
                        {% endfor %}
                    {% endblock %}
                </div>
            {% endblock %}
        </div>
    </div>


    {% block layout_footer_payment_shipping_logos %}
        <div class="footer-logos bg-lighter py-4">
            <div class="container text-center">
                {% block layout_footer_payment_logos %}
                    {% for paymentMethod in page.salesChannelPaymentMethods %}
                        {% block layout_footer_payment_logo %}
                            {% if paymentMethod.media %}
                                <div class="footer-logo is-payment d-inline-flex my-0 mx-3">
                                    {% sw_thumbnails 'footer-payment-image-thumbnails' with {
                                        media: paymentMethod.media,
                                        sizes: {
                                            'default': '80px'
                                        },
                                        attributes: {
                                            'class': 'img-fluid footer-logo-image',
                                            'alt': (paymentMethod.media.translated.alt ?: paymentMethod.translated.name),
                                            'title': (paymentMethod.media.translated.title ?: paymentMethod.translated.name)
                                        }
                                    } %}
                                </div>
                            {% endif %}
                        {% endblock %}
                    {% endfor %}
                {% endblock %}

                {% block layout_footer_shipping_logos %}
                    {% for shippingMethod in page.salesChannelShippingMethods %}
                        {% block layout_footer_shipping_logo %}
                            {% if shippingMethod.media %}
                                <div class="footer-logo is-shipping d-inline-flex my-0 mx-3">
                                    {% sw_thumbnails 'footer-shipping-image-thumbnails' with {
                                        media: shippingMethod.media,
                                        sizes: {
                                            'default': '80px'
                                        },
                                        attributes: {
                                            'class': 'img-fluid footer-logo-image',
                                            'alt': (shippingMethod.media.translated.alt ?: shippingMethod.translated.name),
                                            'title': (shippingMethod.media.translated.title ?: shippingMethod.translated.name)
                                        }
                                    } %}
                                </div>
                            {% endif %}
                        {% endblock %}
                    {% endfor %}
                {% endblock %}
            </div>
        </div>
    {% 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 %}