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

{% block stylesheets %}
{% if particle.particle_title_color or particle.particle_title_fontsize or particle.offcanvas_width or particle.customize_bar_background or particle.customize_nav_color or particle.customize_content_color or particle.customize_content_fontsize or particle.color_fallback or particle.social_bg_color or particle.social_color or particle.social_bg_hcolor or particle.social_hcolor %}
<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 %}
{% if particle.offcanvas_width %}
@media (min-width: 960px) { .jl-offcanvas-bar { width: {{particle.offcanvas_width}}px; }}
{% endif %}
{% if particle.customize_bar_background %}
#offcanvas-{{id}} .jl-offcanvas-bar { background: {{particle.customize_bar_background}}; }
{% endif %}
{% if particle.customize_nav_color %}
#offcanvas-{{id}} .jl-offcanvas-bar > .jl-nav>li>a { color: {{particle.customize_nav_color}} !important; }
#offcanvas-{{id}} .jl-offcanvas-bar > .jl-nav .jl-nav-sub a { color: {{particle.customize_nav_color}} !important; }
{% endif %}
{% if particle.customize_content_color or particle.customize_content_fontsize %}
#offcanvas-{{id}} .jl-offcanvas-bar .tm-content { {% if particle.customize_content_color %}color: {{particle.customize_content_color}};{% endif %}{% if particle.customize_content_fontsize %} font-size: {{particle.customize_content_fontsize}}px;{% endif %} }
{% endif %}
{% if particle.color_fallback %}
#offcanvas-{{id}} .jl-nav-parent-icon>.jl-parent>a::after {background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E) !important;}
{% endif %}
{% if particle.social_bg_color or particle.social_color or particle.social_bg_hcolor or particle.social_hcolor %}
#offcanvas-{{id}} .jl-offcanvas-bar .jl-icon-button { {% if particle.social_bg_color %}background-color: {{particle.social_bg_color}};{% endif %}{% if particle.social_color %} color: {{particle.social_color}};{% endif %} }
#offcanvas-{{id}} .jl-offcanvas-bar .jl-icon-button:hover,.jl-offcanvas-bar .jl-icon-button:focus,.jl-offcanvas-bar .jl-icon-button:active { {% if particle.social_bg_hcolor %}background-color: {{particle.social_bg_hcolor}};{% endif %}{% if particle.social_hcolor %} color: {{particle.social_hcolor}};{% 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 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 %}

{# Set Offcanvas Menu items #}
{% set menuitems %}
<ul class="{% if particle.center_nav %} jl-nav-center{% endif %}{% if particle.nav_style != 'blank' %} jl-nav-{{particle.nav_style}}{% endif %} jl-nav-parent-icon{% if particle.nav_margin_top == 'default' %} jl-margin-top{% else %} jl-margin-{{ particle.nav_margin_top|e }}-top{% endif %}"{% if particle.multiple_open %} jl-nav="multiple: true" {% else %} jl-nav{% endif %}>
{% for item in particle.items %}
{% if item.dropdown %}
<li class="tm-item jl-parent">
  {% else %}
<li class="tm-item">
  {% endif %}
{% if item.link != '' %}
<a target="{{ item.link_target|default('_self')|e }}" href="{{ item.link|e }}" class="tm-link">{{item.title|raw}}</a>
{% if item.dropdown %}
     <ul class="jl-nav-sub">
      {% for dropdown_item in item.dropdown %}
      <li>
      {% if dropdown_item.dropdown_link != '' %}<a target="{{ dropdown_item.dropdown_link_target|default('_self')|e }}" href="{{ dropdown_item.dropdown_link|e }}" class="tm-link">{{dropdown_item.dropdown_title|raw}}</a>
      {% else %}
      <a class="tm-content jl-disabled">{{dropdown_item.dropdown_title|raw}}</a>
      {% endif %}
      </li>
      {% endfor %}
    </ul>
{% endif %}
</li>

{% else %}
<li>
<a class="tm-content jl-disabled">{{item.title|raw}}</a>
</li>
{% endif %}

{% endfor %}
</ul>
{% endset %}

{# Set Offcanvas Content #}
{% set offcavanscontent %}
{% 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 %}
{% endset %}

{# Set Social Items #}
{% set socialicons %}
<div class="jl-grid-small jl-child-width-auto jl-flex-inline{% if particle.social_margin_top == 'default' %} jl-margin-top{% else %} jl-margin-{{ particle.social_margin_top|e }}-top{% endif %}" jl-grid>
{% for social_item in particle.social_items %}
<div>
<a class="jl-icon-button" href="{{ social_item.social_link|e }}" title="{{ social_item.social_text|e }}" target="{{ particle.target|default('_blank')|e }}"><i class="{{social_item.social_icon}}" aria-hidden="true"></i></a>
</div>
{% endfor %}
</div>

{% endset %}

{% set divider_nav %}
{% if particle.show_divider %}
<ul class="jl-nav jl-nav-default jl-margin">
<li class="jl-nav-divider"></li>
</ul>
{% endif %}
{% endset %}

{% block particle %}
{% if particle.enabled %}
{{parallaxbackground}}
{{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}}>

<div id="offcanvas-{{id}}" jl-offcanvas="mode: {{particle.animation_mode}};{% if particle.flip_offcanvas %}flip: true;{% endif %}{% if particle.overlay %}overlay: true;{% endif %}">
    <div class="jl-offcanvas-bar{% if particle.offcanvas_inverse != 'default' %} jl-{{particle.offcanvas_inverse|e}}{% endif %}">
      {% if particle.close_button %}<button class="jl-offcanvas-close" type="button" jl-close></button>{% endif %}
        {% if particle.content_order == '1' %}
        {{menuitems}}
        {{divider_nav}}
        {{offcavanscontent}}
        {{divider_nav}}
        {{socialicons}}
        {% endif %}

        {% if particle.content_order == '2' %}
        {{menuitems}}
        {{divider_nav}}
        {{socialicons}}
        {{divider_nav}}
        {{offcavanscontent}}
        {% endif %}

        {% if particle.content_order == '3' %}
        {{offcavanscontent}}
        {{divider_nav}}
        {{menuitems}}
        {{divider_nav}}
        {{socialicons}}
        {% endif %}

        {% if particle.content_order == '4' %}
        {{socialicons}}
        {{divider_nav}}
        {{menuitems}}
        {{divider_nav}}
        {{offcavanscontent}}
        {% endif %}

        {% if particle.content_order == '5' %}
        {{socialicons}}
        {{divider_nav}}
        {{offcavanscontent}}
        {{divider_nav}}
        {{menuitems}}
        {% endif %}

        {% if particle.content_order == '6' %}
        {{offcavanscontent}}
        {{divider_nav}}
        {{socialicons}}
        {{divider_nav}}
        {{menuitems}}
        {% endif %}

    </div>
</div>
{% if particle.toggle_item_type == 'button' %}
<button class="{{button_cls}}{{button_size}}" type="button" jl-toggle="target: #offcanvas-{{id}}">{{particle.toggle_item_text|e}}</button>
{% else %}
<a class="tm-offcanvas jl-link-reset" href="#" jl-toggle="target: #offcanvas-{{id}}">
    <span jl-navbar-toggle-icon></span> <span class="jl-margin-small-left"><span class="jl-text-middle">{{particle.toggle_item_text|e}}</span></span>
</a>
{% endif %}

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