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

{% block stylesheets %}
<style>
{% if particle.icon_style != 'default' %}
.tm-socialshare-icon .tm-share-icon a{-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;color:#fff}.tm-socialshare-icon .tm-share-icon a:hover{-webkit-filter:saturate(1.2) brightness(1.2);filter:saturate(1.2) brightness(1.2);color:#fff}.tm-socialshare-icon .tm-share-icon .twitter{background-color:#55acee}.tm-socialshare-icon .tm-share-icon .facebook{background-color:#3b5999}.tm-socialshare-icon .tm-share-icon .linkedin{background-color:#0077B5}.tm-socialshare-icon .tm-share-icon .whatsapp{background-color:#25D366}.tm-socialshare-icon .tm-share-icon .telegram{background-color:#2ca5e0}.tm-socialshare-icon .tm-share-icon .mail{background-color:#ea4335}.tm-socialshare-icon .tm-share-icon .digg{background-color:#005be2}.tm-socialshare-icon .tm-share-icon .pinterest{background-color:#bd081c}.tm-socialshare-icon .tm-share-icon .tumblr{background-color:#eb4924}.tm-socialshare-icon .tm-share-icon .reddit{background-color:#ff4500}.tm-socialshare-icon .tm-share-icon .vk{background-color:#4c75a3}.tm-socialshare-icon .tm-share-icon .xing{background-color:#026466}.tm-socialshare-icon .tm-share-icon .weibo{background-color:#df2029}.tm-socialshare-icon .tm-share-icon .renren{background-color:#005EAC}.tm-socialshare-icon .tm-share-icon .skype{background-color:#00AFF0}
{% endif %}
{% 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 %}
#{{ id }} .tm-icons > * > a { text-align: center; line-height: 36px;}
</style>
{% endblock %}

{% block javascript %}
{% if particle.tooltip %}
  <script src="{{ url('gantry-theme://js/jlcomponents/tooltip.min.js') }}"></script>
{% 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 %}

{% set datawidth = particle.datawidth ? ' data-width="' ~ particle.datawidth ~ '"' %}
{% set dataheight = particle.dataheight ? ' data-height="' ~ particle.dataheight ~ '"' %}

{# Set Item Content #}
{% set icon_list %}
{% for item in particle.items %}

{% set twitter_hashtags %}
{% if particle.twitter_hashtags and item.network == 'twitter' %} data-hashtags="{{ particle.twitter_hashtags }}"{% endif %}
{% endset %}

{% set facebook_hashtags %}
{% if particle.facebook_hashtags and item.network == 'facebook' %} data-hashtags="{{ particle.facebook_hashtags }}"{% endif %}
{% endset %}

{% set email_attr %}
{% if particle.email_datasubject and item.network == 'mail' %} data-subject="{{ particle.email_datasubject|e }}"{% endif %}
{% if particle.email_datato and item.network == 'mail' %} data-to="{{ particle.email_datato|e }}"{% endif %}
{% endset %}

{% set telegram_data %}
{% if particle.telegram_data and item.network == 'telegram' %} data-to="{{ particle.telegram_data }}"{% endif %}
{% endset %} 

{% set faVersion = gantry.config.page.fontawesome.version|default('fa4') %}

{% if faVersion == 'fa4' %}
{% else %}

{% endif %}

<li class="tm-share-icon{{ particle.hover_animation_item ? ' jl-animation-toggle' : '' }}"{{ particle.hover_animation_item ? ' tabindex="0"' : '' }}>
  
{% if faVersion == 'fa4' %}
<a class="{{item.network}}{% if particle.button %} jl-icon-button{% endif %} fa{% if item.network == 'mail' %} fa-envelope-o{% else %} fa-{{item.network}}{% endif %}{% if particle.hover_animation != 'inherit' and particle.hover_animation_item %} jl-animation-{{particle.hover_animation}}{% endif %}" {% if item.network == 'mail' %} data-sharer="email"{% else %} data-sharer="{{item.network}}"{% endif %}{% if item.network == 'twitter' or item.network == 'whatsapp' or item.network == 'mail' or item.network == 'telegram' or item.network == 'tumblr' or item.network == 'vk' or item.network == 'xing' or item.network == 'digg' or item.network == 'weibo' or item.network == 'renren' or item.network == 'skype' %} data-title="{{item.data_title}}"{% endif %}{{twitter_hashtags|raw}}{{facebook_hashtags|raw}}{{datawidth|raw}}{{dataheight|raw}} data-url="{{ gantry.page.url }}"{{email_attr|raw}}{{telegram_data}}{% if particle.tooltip %} jl-tooltip="title: {{item.data_title}}"{% endif %}></a>
{% else %}
<a class="{{item.network}}{% if particle.button %} jl-icon-button{% endif %}{% if item.network == 'mail' %} far fa-envelope{% else %} fab fa-{{item.network}}{% endif %}{% if particle.hover_animation != 'inherit' and particle.hover_animation_item %} jl-animation-{{particle.hover_animation}}{% endif %}" {% if item.network == 'mail' %} data-sharer="email"{% else %} data-sharer="{{item.network}}"{% endif %}{% if item.network == 'twitter' or item.network == 'whatsapp' or item.network == 'mail' or item.network == 'telegram' or item.network == 'tumblr' or item.network == 'vk' or item.network == 'xing' or item.network == 'digg' or item.network == 'weibo' or item.network == 'renren' or item.network == 'skype' %} data-title="{{item.data_title}}"{% endif %}{{twitter_hashtags|raw}}{{facebook_hashtags|raw}}{{datawidth|raw}}{{dataheight|raw}} data-url="{{ gantry.page.url }}"{{email_attr|raw}}{{telegram_data}}{% if particle.tooltip %} jl-tooltip="title: {{item.data_title}}"{% endif %}></a>
{% endif %}
</li>
{% endfor %}
{% 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 ~ pa_z_index ~ margin ~ visibility }}{% if particle.class %} {{ particle.class }}{% endif %}"{{ animation }} {{- attr_extra|raw }}>
{% if particle.button_style != 'default' %}
<div class="tm-social-share">
  <a href="#" class="jl-icon-button"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
    <div jl-drop="pos: {{particle.hover_position}};{% if particle.hover_animation != 'inherit' %} animation: jl-animation-{{particle.hover_animation}}; duration: 1000;{% endif %} boundary: .tm-social-share;shift: false; flip: false; mode: {{ particle.button_style == "showall" ? 'hover' : 'click' }}">
      <ul class="tm-icons jl-flex-inline jl-flex-middle jl-flex-nowrap{% if particle.social_icon_gap %} jl-grid-{{particle.social_icon_gap|e}}{% endif %}{{ particle.icon_style != 'default' ? ' tm-socialshare-icon' : '' }}{{ particle.vertical_button ? ' jl-iconnav-vertical' : '' }}" jl-grid>
      {{ icon_list }}
      </ul>
    </div>
</div>
{% else %}
<ul class="tm-icons jl-flex-inline jl-flex-middle jl-flex-nowrap{% if particle.social_icon_gap %} jl-grid-{{particle.social_icon_gap|e}}{% endif %}{{ particle.icon_style != 'default' ? ' tm-socialshare-icon' : '' }}{{ particle.vertical_button ? ' jl-iconnav-vertical' : '' }}" jl-grid>
  {{ icon_list }}
</ul>
{% endif %}
</div>
{% endif %}
{% endblock %}

{% block javascript_footer %}
{% do gantry.document.addScript(url('gantry-theme://js/sharer.min.js')) %}
{% endblock %}