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

{% block stylesheets %}
{% if particle.particle_title_color or particle.particle_title_fontsize %}
<style>
{% if particle.particle_title_color or particle.particle_title_fontsize %}
#el-{{ id }}.g5-title { {% if particle.particle_title_color %}color: {{ particle.particle_title_color }};{% endif %}{% if particle.particle_title_fontsize %}font-size: {{particle.particle_title_fontsize}}px;{% endif %} }
{% endif %}
</style>
{% endif %}
{% endblock %}

{# Set Animation #}
{% set animation %}
{% if particle.animation != 'inherit' %} jl-scrollspy="cls: jl-animation-{{particle.animation|e}};{% if particle.animation_repeat == 'enabled' %} repeat: true;{% endif %}{% if particle.animation_delay %} delay: {{particle.animation_delay|e}};{% endif %}"{% endif %}
{% endset %}

{# Set Max-Width Content #}
{% set content_maxwidth %}
{% if particle.g_maxwidth != 'inherit' %} jl-width-{{particle.g_maxwidth}}{% if particle.g_maxwidth_breakpoint != 'always' %}@{{particle.g_maxwidth_breakpoint}}{% endif %}{% if particle.g_maxwidth_alignment == 'left' %}{% elseif particle.g_maxwidth_alignment == 'center' %} jl-margin-auto{% else %} jl-margin-auto-left{% endif %}{% endif %}
{% endset %}

{# Set Particle Alignment #}
{% set particle_alignment %}
{% if particle.align != 'inherit' %} jl-text-{{ particle.align|e }}{% if particle.breakpoint != 'always' %}@{{ particle.breakpoint|e }}{% if particle.fallback != 'inherit' %} jl-text-{{ particle.fallback|e }}{% endif %}{% endif %}{% endif %}
{% endset %}

{# set Particle Title Style #}
{% set particle_title_style %}
{% if particle.particle_title %}
<{{ particle.particle_title_element|e }} id="el-{{ id }}" class="g5-title{% if particle.particle_title_align != 'inherit' %} jl-text-{{particle.particle_title_align|e}}{% endif %}{% if particle.particle_predefined_color != 'default' %} jl-text-{{particle.particle_predefined_color|e}}{% endif %}{% if particle.particle_title_style != 'default' %} jl-{{particle.particle_title_style|e}}{% endif %}{% if particle.particle_title_decoration != 'none' %} jl-heading-{{particle.particle_title_decoration|e}}{% endif %}{% if particle.particle_title_text_transform %} jl-text-{{particle.particle_title_text_transform|e}}{% endif %}{% if particle.particle_title_font_weight %} jl-text-{{particle.particle_title_font_weight|e}}{% endif %}">
{% if particle.particle_title_decoration == 'line' %} <span>{{particle.particle_title|raw}}</span>
{% else %} {{particle.particle_title|raw}}
{% endif %}
</{{ particle.particle_title_element|e }}>
{% endif %}
{% endset %}

{% if particle.layout_settings == 'standard' %}
{% set datawidth = (particle.data_width ? ' data-width="'~ particle.data_width ~'"') %}
{% endif %}

{% block javascript_footer %}
   <script async defer crossorigin="anonymous" src="https://connect.facebook.net/{{ particle.locales|e }}/sdk.js#xfbml=1&version=v18.0" nonce="KBiYxdzR"></script>
{% endblock %}

{# Set Visibility #}
{% if particle.visibility != 'inherit' %}
{% set visibility = particle.visibility in ['s', 'm', 'l', 'xl'] ? ' jl-visible@' ~ particle.visibility|e : ' jl-' ~ particle.visibility|replace({'-': '@'}) %}
{% endif %}

{# Set Margin #}
{% if particle.margin != 'inherit' %}
{% set margin = particle.margin != 'default' ? ' jl-margin-' ~ particle.margin|e : ' jl-margin' %}
{% endif %}

{% set attr_extra = particle.extra|attribute_array %}

{% block particle %}
{% if particle.enabled %}
{{ particle_title_style }}
<div class="{{ id ~ content_maxwidth ~ particle_alignment ~ pa_z_index ~ margin ~ visibility }}{% if particle.class %} {{ particle.class }}{% endif %}"{{ animation }} {{- attr_extra|raw }}>
{% pageblock body_top %}
<div id="fb-root"></div>
{% endpageblock %}
<div class="fb-like" data-href="{{particle.url}}" data-layout="{{particle.layout_settings|e}}" data-action="{{particle.action_settings|e}}" data-colorscheme="{{particle.color_settings|e}}"{{datawidth|raw}}{% if particle.sharebutton %} data-share="true"{% endif %}{% if particle.button_settings == 'large' %} data-size="large"{% endif %} data-lazy="{{ particle.data_lazy ? 'true' : 'false' }}" data-kid-directed-site="{{ particle.kid_directed_site ? 'true' : 'false' }}">
</div>
</div>
{% endif %}
{% endblock %}