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

{% block base_footer %}
{{ parent() }}

{# check if product box layouts of plugin should be used #}
{% set configISEButton = config('C108InteractiveSideElement.config') %}
{% if configISEButton.c108isebool %}

{# get variables from app config #}
{% set buttonType = configISEButton.c108isebuttontype %}
{% set buttonImage = configISEButton.c108isebuttonimg %}

{% set buttonImageAlt = configISEButton.c108isebuttonimgalt %}
{% set titleAttribute = configISEButton.c108isetitleattribute %}
{% set buttonFunction = configISEButton.c108isebuttonfunction %}
{% set buttonSize = configISEButton.c108isebuttonsize %}
{% set buttonPosition = configISEButton.c108isebuttonposition %}
{% set buttonAnimation = configISEButton.c108iseanimationspeed %}
{% set buttonAlignment = configISEButton.c108isebuttonalignment %}
{% set buttonText = configISEButton.c108isebuttontext %}

{# second and third button bool #}
{% set secondButtonBool = configISEButton.c108isesecondelementbool %}
{% if secondButtonBool %}
{% set thirdButtonBool = configISEButton.c108isethirdelementbool %}
{% endif %}

{% if configISEButton.c108isehidecheckoutbool %}
<style>
.is-ctl-checkout .c108-ise-interactive-side-element {
    display: none;
}
</style>
{% endif %}
{# interactive side element #}
<section data-button-function="{{ buttonFunction }}" class="c108-ise-interactive-side-element c108-ise-block {{ buttonPosition }} {{ buttonSize }}-{{ buttonType }}{% if buttonFunction == "offcanvascontent" %} hideoffcanvas{% endif %}{% if buttonFunction == "modalcontent" %} c108-ise-hide{% endif %}{% if secondButtonBool and buttonFunction == "simplelink" %} c108-ise-multiple-buttons{% endif %}">
{# button #}
{% if buttonFunction == "simplelink" %}

{% set buttonUrl = configISEButton.c108isebuttonurl %}

{% if configISEButton.c108isebuttonurlbooladvanced %}
{% set buttonUrl = configISEButton.c108isebuttonurladvanced %}
{% endif %}

{% set sameWindow = configISEButton.c108isebuttonurlsamewindow %}
<a class="c108-ise-button" title="{{ titleAttribute }}" aria-label="{{ titleAttribute }}" {% if buttonUrl %} href="{{ buttonUrl }}"{% if not sameWindow %} rel="noopener" target="_blank"{% endif %}{% else %} href="#"{% endif %}>
{% else %}
<button id="c108-ise-buttonelement-1" type="button" class="c108-ise-button{% if buttonFunction == "offcanvascontent" %} {{ buttonAlignment }}{% endif %}" aria-label="{{ titleAttribute }}" title="{{ titleAttribute }}" aria-expanded="false" aria-controls="c108-ise-contentelement-1">
{% endif %}

{# button icon #}
{% if buttonType == "icon" %}
{% set buttonIcon = configISEButton.c108isebuttonicon %}

<span class="c108-ise-icon icon icon-{{ buttonIcon }}">
{{ source('@Storefront/assets/icon/default/'~ buttonIcon ~'.svg', ignore_missing = true) }}
</span>
{# button own image #}
{% elseif buttonType == "image" %}
<img src="{{ buttonImage }}" alt="{{ buttonImageAlt }}">
{# button text #}
{% elseif buttonType == "text" %}
<span class="c108-ise-text">{{ buttonText|u.truncate(30, '')}}</span>
{% else %}
{% endif %}

{% if buttonFunction == "simplelink" %}
</a>
{% else %}
</button>
{% endif %}
{# button end #}

{# second button #}
{% if secondButtonBool and buttonFunction == "simplelink" %}

{# get variables from app config #}
{% set secondButtonImage = configISEButton.c108isesecondbuttonimg %}

{% set secondButtonImageAlt = configISEButton.c108isesecondbuttonimgalt %}
{% set secondTitleAttribute = configISEButton.c108isesecondtitleattribute %}

{% set secondButtonText = configISEButton.c108isesecondbuttontext %}

{% set secondButtonMarginTop = configISEButton.c108isesecondelementmargintop %}
{# button #}
{% if buttonFunction == "simplelink" %}

{% set buttonUrl = configISEButton.c108isesecondbuttonurl %}

{% if configISEButton.c108isesecondbuttonurlbooladvanced %}
{% set buttonUrl = configISEButton.c108isesecondbuttonurladvanced %}
{% endif %}

{% set sameWindow = configISEButton.c108isesecondbuttonurlsamewindow %}
<a style="margin-top: {{ secondButtonMarginTop }};" class="c108-ise-button" title="{{ secondTitleAttribute }}" {% if buttonUrl %} href="{{ buttonUrl }}"{% if not sameWindow %} rel="noopener" target="_blank"{% endif %}{% else %} href="#"{% endif %}>
{% else %}
<button type="button" style="margin-top: {{ secondButtonMarginTop }};" class="c108-ise-button" aria-label="{{ secondTitleAttribute }}" title="{{ titleAttribute }}">
{% endif %}

{# button icon #}
{% if buttonType == "icon" %}
{% set secondButtonIcon = configISEButton.c108isesecondbuttonicon %}

<span class="c108-ise-icon icon icon-{{ secondButtonIcon }}">
{{ source('@Storefront/assets/icon/default/'~ secondButtonIcon ~'.svg', ignore_missing = true) }}
</span>
{# button own image #}
{% elseif buttonType == "image" %}
<img src="{{ secondButtonImage }}" alt="{{ secondButtonImageAlt }}">
{# button text #}
{% elseif buttonType == "text" %}
<span class="c108-ise-text">{{ secondButtonText|u.truncate(30, '')}}</span>
{% else %}
{% endif %}

{% if buttonFunction == "simplelink" %}
</a>
{% else %}
</button>
{% endif %}
{# button end #}
{% endif %}
{# second button end #}

{# third button #}
{% if secondButtonBool and thirdButtonBool and buttonFunction == "simplelink" %}

{# get variables from app config #}
{% set thirdButtonImage = configISEButton.c108isethirdbuttonimg %}

{% set thirdButtonImageAlt = configISEButton.c108isethirdbuttonimgalt %}
{% set thirdTitleAttribute = configISEButton.c108isethirdtitleattribute %}

{% set thirdButtonText = configISEButton.c108isethirdbuttontext %}

{% set thirdButtonMarginTop = configISEButton.c108isethirdelementmargintop %}
{# button #}
{% if buttonFunction == "simplelink" %}

{% set buttonUrl = configISEButton.c108isethirdbuttonurl %}

{% if configISEButton.c108isethirdbuttonurlbooladvanced %}
{% set buttonUrl = configISEButton.c108isethirdbuttonurladvanced %}
{% endif %}

{% set sameWindow = configISEButton.c108isethirdbuttonurlsamewindow %}
<a style="margin-top: {{ thirdButtonMarginTop }};" class="c108-ise-button" title="{{ thirdTitleAttribute }}" {% if buttonUrl %} href="{{ buttonUrl }}"{% if not sameWindow %} rel="noopener" target="_blank"{% endif %}{% else %} href="#"{% endif %}>
{% else %}
<button type="button" style="margin-top: {{ thirdButtonMarginTop }}0;" class="c108-ise-button" aria-label="{{ thirdTitleAttribute }}" title="{{ titleAttribute }}">
{% endif %}

{# button icon #}
{% if buttonType == "icon" %}
{% set thirdButtonIcon = configISEButton.c108isethirdbuttonicon %}

<span class="c108-ise-icon icon icon-{{ thirdButtonIcon }}">
{{ source('@Storefront/assets/icon/default/'~ thirdButtonIcon ~'.svg', ignore_missing = true) }}
</span>
{# button own image #}
{% elseif buttonType == "image" %}
<img src="{{ thirdButtonImage }}" alt="{{ thirdButtonImageAlt }}">
{# button text #}
{% elseif buttonType == "text" %}
<span class="c108-ise-text">{{ thirdButtonText|u.truncate(30, '')}}</span>
{% else %}
{% endif %}

{% if buttonFunction == "simplelink" %}
</a>
{% else %}
</button>
{% endif %}
{# button end #}
{% endif %}
{# third button end #}

{# content #}
{% if buttonFunction != "simplelink" %}

<div id="c108-ise-contentelement-1" class="c108-ise-content{% if buttonFunction == "offcanvascontent" %} c108-ise-offcanvas{% endif %}{% if buttonFunction == "modalcontent" %} c108-ise-modal{% endif %}" aria-labelledby="c108-ise-buttonelement-1">
<div class="c108-ise-content-inner">
<div class="c108-ise-content-inner-wrapper">
{% if configISEButton.c108isecontentbool %}
    {% if configISEButton.c108isecontentallowhtmlbool %}
	    {{ 'C108InteractiveSideElement.translated.content'|trans|raw }}
    {% else %}
        {{ 'C108InteractiveSideElement.translated.content'|trans }}
    {% endif %}
{% else %}
    {% set contentText = configISEButton.c108isecotenttext %}
    {% autoescape %}
        {{ contentText | raw }}
    {% endautoescape %}
{% endif %}
</div>
{% if buttonFunction == "modalcontent" %}
<button class="c108-ise-modal-close" aria-label="Close Modal" title="Close Modal">×</button>
{% endif %}
</div>
</div>
{% endif %}
{# content end #}
</section>
{# interactive side element end #}

{% endif %}
{% endblock %}