{% 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 %}
#{{ id }}.g5-particle-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}}{% endif %}{% endif %}{% if particle.align != 'inherit' and particle.breakpoint != 'always' %} {% if particle.fallback != 'inherit' %} jl-text-{{particle.fallback|e}}{% endif %}{% endif %}
{% endset %}

{# Set Particle Subnav Alignment #}
{% set subnav_alignment %}
{% if particle.align != 'inherit' %} 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="{{ id }}" class="g5-particle-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_decoration == 'line' %} <span>{{particle.particle_title|raw}}</span>
{% else %} {{particle.particle_title|raw}}
{% endif %}
</{{particle.particle_title_element|e}}>
{% endif %}
{% endset %}

{# Set Image Width/Height #}
{% set imagewidth = particle.image_width ? ' width="' ~ particle.image_width ~ '"' %}
{% set imageheight = particle.image_height ? ' height="' ~ particle.image_height ~ '"' %}

{# Set Social Class #}
{% set socials_cls %}
{% if particle.social_style == '' %}{% elseif particle.social_style == 'button' %} jl-icon-button {% else %} jl-link-{{particle.social_style}}{% endif %}
{% endset %}

{# Set Item Content #}
{% 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 %}" jl-grid>
{% for item in particle.items %}
<div class="tm-item">
  <a class="tm-link{{socials_cls}}" href="{{ item.link|e }}" target="{{ item.link_target|default('_self')|e }}"><span class="{{item.icon}}" aria-hidden="true"></span></a>
</div>
{% endfor %}
</div>

{% endset %}

{% block particle %}
{% if particle.enabled %}
{{particle_title_style}}
<div id="{{ id }}" class="footer-info-wrapper{{content_maxwidth}}{% if particle.class %} {{ particle.class }}{% endif %}{{particle_alignment}}{% if particle.margin == 'inherit' %}{% elseif particle.margin == 'default' %} jl-margin{% else %} jl-margin-{{particle.margin|e}}{% endif %}{% if particle.visibility != 'inherit' %} jl-visible@{{particle.visibility|e}}{% endif %}"{{animation}}>
{% if particle.image %}
<a class="jl-logo jl-link-reset" href="{{ url }}" target="{{ particle.target|default('_self') }}">
  <img{{imagewidth|raw}}{{imageheight|raw}} src="{{ url(particle.image) }}" alt="{{ particle.image_alt }}" />
</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.items %}
  {{socials}}
{% endif %}
</div>
{% endif %}
{% endblock %}
