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

{% block stylesheets %}
<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 }} !important;{% endif %}{% if particle.particle_title_fontsize %}font-size: {{particle.particle_title_fontsize}}px;{% endif %} }
{% endif %}
#{{id}} .tm-newsletter-form input {box-shadow: none;border-radius: 0;margin-bottom:0;}
</style>
{% 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 Button Class #}
{% set button_cls %}
{% if particle.buttonclass == 'link' %} jl-link{% elseif particle.buttonclass == 'link-muted' or particle.buttonclass == 'link-text' %} jl-{{particle.buttonclass|e}}{% else %} jl-button jl-button-{{particle.buttonclass|e}}{% endif %}
{% endset %}

{# Set Button Size #}
{% set button_size %}
{% if particle.buttonclass == 'link' or particle.buttonclass == 'link-muted' or particle.buttonclass == 'link-text' or particle.buttonclass == 'text' %}{% else %}{% if particle.link_button_size != 'default' %} jl-button-{{particle.link_button_size|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 %}

{% block particle %}
{% if particle.enabled %}
{{particle_title_style}}
<div id="{{ id }}" class="tm-content-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}}>
  <form action="{{ particle.uri|replace({'/subscribe?u': '/subscribe/post-json?u'})|e }}&c=?"
    method="get" id="mc-embedded-subscribe-form-{{id}}" name="mc-embedded-subscribe-form" class="validate tm-newsletter-form">
        <div class="{% if particle.layout == 'stacked' or particle.layout == 'stackedname' %}jl-child-width-1-1 jl-grid-stack{% else %}jl-child-width-expand@s{% endif %}{% if particle.grid_gutter != 'default' %} jl-grid-{{particle.grid_gutter|e}}{% endif %}" jl-grid>
          {% if particle.show_f_namefield or particle.show_l_namefield %}

          {% if particle.layout == 'stackedname' %}<div><div class="jl-child-width-1-2@s{% if particle.grid_gutter != 'default' %} jl-grid-{{particle.grid_gutter|e}}{% endif %}" jl-grid>{% endif %}

          {% if particle.show_f_namefield %}
            <div><input class="jl-input tm-input{% if particle.form_size != 'default' %} jl-form-{{particle.form_size|e}}{% endif %}" name="FNAME" id="mce-FNAME" placeholder="{{particle.fname_label|default('First name')|e}}"></div>
          {% endif %}          
          {% if particle.show_l_namefield  %}
            <div><input class="jl-input tm-input{% if particle.form_size != 'default' %} jl-form-{{particle.form_size|e}}{% endif %}" name="LNAME" id="mce-LNAME" placeholder="{{particle.lname_label|default('Last name')|e}}"></div>
          {% endif %}
        
          {% if particle.layout == 'stackedname' %}</div></div>{% endif %}

          {% endif %}
        <!-- Text Input Field -->
        <div class="mc-field-group jl-position-relative">

          {% if particle.show_email_icon and particle.button_mode != 'button' %}
          <!-- Submit Button -->
          <button type="submit" value="subscribe" name="subscribe" id="mc-embedded-subscribe-{{id}}" class="tm-button jl-form-icon jl-link-toggle jl-form-icon-flip{% if particle.form_size != 'default' %} jl-form-{{particle.form_size|e}}{% endif %} jl-icon"><i class="fa fa-envelope-o" aria-hidden="true"></i></button>
          <!-- /Submit Button -->

          {% endif %}

          <input type="email" placeholder="{{particle.email_label|default('Email Address')|e}}" name="EMAIL" class="required email jl-input tm-input{% if particle.form_size != 'default' %} jl-form-{{particle.form_size|e}}{% endif %}" id="mce-email">
          <div style="position: absolute; left: -5000px;" aria-hidden="true">
              <input type="text" name="b_e44c1f194bec93e238615469e_f6f826e769" tabindex="-1" value="">
          </div>

        </div>
        <!-- /Text Input Field -->

        {% if particle.button_mode == 'button' %}
        <div class="jl-width-auto@s">
        <button class="tm-button{{button_cls}}{{button_size}}" type="submit">{{particle.button_label|default('Subscribe')|e}}</button>
        </div>
        {% endif %}

        </div>
    </form>
</div>
{% endif %}
{% endblock %}

{% block javascript_footer %}
{% do gantry.load('jquery') %}
<script type="text/javascript">
jQuery(function ($) {
    var form = $('#mc-embedded-subscribe-form-{{id}}');
      form.submit(function (e) {
        e.preventDefault()
        var icon_form = jQuery("#mc-embedded-subscribe-{{id}}").find('.fa');
        icon_form.removeClass('fa-envelope-o', false);
        icon_form.toggleClass('fa-spinner fa-spin', true);        
        $.ajax({
          type: form.attr('method'),
          url: form.attr('action'),
          data: form.serialize(),
          cache: false,
          dataType: 'json',
          contentType: 'application/json; charset=utf-8',
          error: function (err) {
            jlUIkit.notification({message: '{{ particle.error_desc|default('Could not connect to the registration server. Please try again later.')|raw }}', pos: '{{particle.error_position}}'{% if particle.timeout != '' %}, timeout: {{particle.timeout}}{% else %}, timeout: 0{% endif %}{% if particle.error_style != 'default' %},status: '{{particle.error_style}}'{% endif %} })
        },
          success: function (data) {
            if (data.result === 'success') {
              // Yeahhhh Success, you can replace the data.msg with custom message :)
              jlUIkit.notification({message: data.msg, pos: '{{particle.position}}'{% if particle.timeout != '' %}, timeout: {{particle.timeout}}{% else %}, timeout: 0{% endif %}{% if particle.style != 'default' %},status: '{{particle.style}}'{% endif %} })
              console.log(data.msg)
            } else {
              // Something went wrong, do something to notify the user.
              jlUIkit.notification({message: data.msg, pos: '{{particle.error_position}}'{% if particle.timeout != '' %}, timeout: {{particle.timeout}}{% else %}, timeout: 0{% endif %}{% if particle.error_style != 'default' %},status: '{{particle.error_style}}'{% endif %} })
              console.log(data.msg)
            }
          }
        })
      })
});
</script>
{% endblock %}