{% extends '@nucleus/partials/particle.html.twig' %}

{% set attr_extra = '' %}
{% if particle.extra %}
    {% for attributes in particle.extra %}
        {% for key, value in attributes %}
            {% set attr_extra = attr_extra ~ ' ' ~ key|e ~ '="' ~ value|e('html_attr') ~ '"' %}
        {% endfor %}
    {% endfor %}
{% endif %}

{% set attr_extra_left = '' %}
{% if particle.extra_left %}
    {% for attributes in particle.extra_left %}
        {% for key, value in attributes %}
            {% set attr_extra_left = attr_extra_left ~ ' ' ~ key|e ~ '="' ~ value|e('html_attr') ~ '"' %}
        {% endfor %}
    {% endfor %}
{% endif %}

{% set attr_extra_right = '' %}
{% if particle.extra_right %}
    {% for attributes in particle.extra_right %}
        {% for key, value in attributes %}
            {% set attr_extra_right = attr_extra_right ~ ' ' ~ key|e ~ '="' ~ value|e('html_attr') ~ '"' %}
        {% endfor %}
    {% endfor %}
{% endif %}

{% set indentifier = random() %}

{% block stylesheets %}
	{% if particle.enabled %}
		{{ parent() }}
		<style type="text/css">
			.g-ba-{{ indentifier|e }} .twentytwenty-before-label:before {
				content: "{{ particle.beforetext|default('Before')|e }}";
			}

			.g-ba-{{ indentifier|e }} .twentytwenty-after-label:before {
				content: "{{ particle.aftertext|default('After')|e }}";
			}

			{% if particle.overlay|default('enabled')|e == 'disabled' %}
				.g-ba-{{ indentifier|e }} .twentytwenty-overlay {
					pointer-events: none;
				}
			{% endif %}
		</style>
	{% endif %}
{% endblock %}

{% set particleheading %}
	<div class="g-particle-intro">
		{% if particle.mainheading %}
			<h3 class="g-title g-main-title">{{ particle.mainheading|raw }}</h3>
			<div class="g-title-separator {% if particle.introtext == false %}no-intro-text{% endif %}"></div>
		{% endif %}	
		{% if particle.introtext %}<p class="g-introtext">{{ particle.introtext|raw }}</p>{% endif %}
	</div>
{% endset %}

{% set textcontent %}
    {% if particle.title %}
        <h3 class="g-ba-feature-title">
            {{- particle.title|raw -}}
        </h3>
    {% endif %}

    {% if particle.description %}
        <p class="g-ba-feature-desc">
            {{- particle.description|raw -}}
        </p>
    {% endif %}

    {% if particle.link %}
        <a class="button g-ba-feature-link" href="{{ particle.link|e }}" target="{{ particle.target|default('_blank')|e }}">
            {%- if particle.buttonicon -%}
                <i class="{{ particle.buttonicon|e }}"></i>
            {%- endif -%}
            {{- particle.buttontext|raw -}}
        </a>
    {% endif %}
{% endset %}

{% set bacontent %}
	<div class="twentytwenty-container"{% if particle.layout_ba|default('horizontal')|e == 'vertical' %} data-orientation="vertical"{% endif %}>
		{%- if particle.beforeimage -%}
			<img alt="{{ particle.beforealt|e }}" src="{{ url(particle.beforeimage) }}" {{ particle.beforeimage|imagesize|raw }}>
		{%- endif -%}

		{%- if particle.afterimage -%}
			<img alt="{{ particle.afteralt|e }}" src="{{ url(particle.afterimage) }}" {{ particle.afterimage|imagesize|raw }}>
		{%- endif -%}
	</div>
{% endset %}

{% block particle %}
	<div class="g-before-after g-ba-{{ indentifier|e }}{% if particle.css.class %} {{ particle.css.class|e }}{% endif %}" {% if particle.extra %}{{ attr_extra|raw }}{% endif %} >
		{% if particle.mainheading or particle.introtext %}
			{{ particleheading }}
		{% endif %}

		{% if particle.featuremode|default(0) == 0 %}
			{{- bacontent -}}
		{% else %}
			<div class="g-grid">
				<div class="g-block g-ba-feature-left{% if particle.css.left %} {{ particle.css.left|e }}{% endif %}{% if particle.layout|default('right')|e == 'left' %} ba-image-block size-{{ particle.imagewidth|default(50)|e }}{% endif %}" {% if particle.extra_left %}{{ attr_extra_left|raw }}{% endif %}>
					<div class="g-content">
						{% if particle.layout|default('right')|e == 'right' %}{{ textcontent }}{% endif %}
						{% if particle.layout|default('right')|e == 'left' %}{{ bacontent }}{% endif %}
					</div>
				</div>

				<div class="g-block g-ba-feature-right{% if particle.css.right %} {{ particle.css.right|e }}{% endif %}{% if particle.layout|default('right')|e == 'right' %} align-right ba-image-block size-{{ particle.imagewidth|default(50)|e }}{% endif %}" {% if particle.extra_right %}{{ attr_extra_right|raw }}{% endif %}>
					<div class="g-content">
						{% if particle.layout|default('right')|e == 'right' %}{{ bacontent }}{% endif %}
						{% if particle.layout|default('right')|e == 'left' %}{{ textcontent }}{% endif %}
					</div>
				</div>
			</div>
		{% endif %}
	</div>
{% endblock %}

{% block javascript_footer %}
	{% if particle.enabled %}
		{% do gantry.load('jquery') %}
		{{ parent() }}
		<script type="text/javascript" src="{{ url('gantry-theme://js/jquery.event.move.js') }}"></script>
		<script type="text/javascript" src="{{ url('gantry-theme://js/jquery.twentytwenty.js') }}"></script>
		<script type="text/javascript">
			(function($) {
				$(window).load(function(){
					$(".twentytwenty-container{% if particle.layout_ba|default('horizontal')|e == 'vertical' %}[data-orientation='vertical']{% endif %}").twentytwenty({default_offset_pct: {{ particle.offset|default('0.5') }}{% if particle.layout_ba|default('horizontal')|e == 'vertical' %}, orientation: 'vertical'{% endif %}});
				});
			})(jQuery);
		</script>
	{% endif %}
{% endblock %}