{% 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 Social Grid Alignment #}
{% set grid_alignment %}
{% if particle.align != 'inherit' %} jl-flex jl-flex-{{particle.align|e}}{% if particle.breakpoint != 'always' %}@{{particle.breakpoint|e}}{% endif %}{% endif %}{% if particle.align != 'inherit' and particle.breakpoint != 'always' %}{% if particle.fallback != 'inherit' %} jl-flex-{{particle.fallback|e}}{% 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 %}

{# Set Image #}
{% set image_width = particle.image_width ? ' width="' ~ particle.image_width ~ '"' %}
{% set image_height = particle.image_height ? ' height="' ~ particle.image_height ~ '"' %}
{% set image_size = particle.image_width is empty and particle.image_height is empty ? ' ' ~ particle.image|imagesize : '' %}

{% set image_loading = particle.image_loading == false ? ' loading="lazy"' %}

{# Set Social Class #}
{% set socials_cls %}
{% if particle.social_style and particle.social_style != 'button' %} jl-link-{{ particle.social_style|e }}{% endif %}
{% endset %}

{% if particle.social_target %}
    {% set targetAttrib = ' target="' ~ particle.social_target|e ~ '"' %}
    {% set targetAttrib = (particle.social_target == '_blank') ? targetAttrib ~ ' rel="noopener noreferrer"' : targetAttrib %}
{% endif %}

{# Set Social Items #}
{% set socials %}
<div class="jl-child-width-auto jl-grid-{{particle.social_gutter}}{% if particle.social_margin_top == 'default' %} jl-margin-top{% else %} jl-margin-{{ particle.social_margin_top|e }}-top{% endif %}{{ grid_alignment }}" jl-grid>
{% for item in particle.items %}
    {% set title = (item.title is not empty) ? item.title|e : item.text|e %}
    {% set titleAttrib = (title is not empty) ? ' title="' ~ title ~ '" aria-label="' ~ title ~ '"' : '' %}
    <div class="tm-item">
        <a class="tm-link{{ socials_cls }}{{ particle.social_style == 'button' and particle.display in ['both', 'icons_only'] ? ' jl-icon-button' : '' }}" href="{{ item.link|e }}"{{ targetAttrib|raw }}{{ titleAttrib|raw }}>
            {% if particle.display in ['both', 'icons_only'] %}<span class="{{ item.icon|e }}"></span>{% endif %}
            {% if particle.display in ['both', 'text_only'] %}<span class="g-social-text">{{ item.text|e }}</span>{% endif %}
        </a>
    </div>
{% endfor %}
</div>
{% endset %}

{# 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 id="{{ id }}" class="{{ id ~ content_maxwidth ~ particle_alignment ~ visibility ~ pa_z_index ~ margin }}{% if particle.class %} {{ particle.class }}{% endif %}"{{ animation }} {{- attr_extra|raw }}>
{% if particle.image %}
<a class="jl-logo jl-link-reset{{ grid_alignment }}" href="{{ url }}" target="{{ particle.target|default('_self') }}" aria-label="Back to the homepage">
  <img src="{{ url(particle.image) }}"{{ image_width|raw }}{{ image_height|raw }}{{ image_size|raw }} alt="{{ particle.image_alt }}"{{ image_loading|raw }}>
</a>
{% endif %}

{% if particle.content %}
<div class="tm-content jl-panel{% if particle.content_margin_top == 'default' %} jl-margin-top{% else %} jl-margin-{{ particle.content_margin_top|e }}-top{% endif %}">
  {{ particle.content|raw }}
</div>
{% endif %}

{% if particle.html %}
<div class="jl-margin-top">
    {% set html = particle.twig ? gantry.theme.compile(particle.html) : particle.html %}
    {{ (particle.filter ? gantry.platform.filter(html) : html)|html|raw }}
</div>
{% endif %}

{% if particle.module_id %}
<div class="jl-margin-top">
    {{ gantry.platform.displayModule(particle.module_id, {'style': particle.chrome|default('gantry'), 'position': 'particle'})|raw }}
</div>
{% endif %}

{% if particle.items %}
  {{ socials }}
{% endif %}
</div>
{% endif %}
{% endblock %}