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

{% block stylesheets %}
<style>
#{{id}}.tm-dotnav {z-index: 1000;}
{% if particle.dotnav_width or particle.dotnav_height or particle.border_color %}
.tm-dotnav .jl-dotnav>*>* { {% if particle.dotnav_width %}width: {{ particle.dotnav_width }}px;{% endif %}{% if particle.dotnav_height %}height: {{particle.dotnav_height}}px;{% endif %}{% if particle.border_color %}border-color: {{particle.border_color}};{% endif %} }
{% endif %}
{% if particle.background_color %}
.tm-dotnav .jl-dotnav > .jl-active > *, .tm-dotnav .jl-dotnav>*>:hover, .tm-dotnav .jl-dotnav>*>:focus { {% if particle.background_color %}background-color: {{ particle.background_color }};{% endif %} }
{% endif %}
{% if particle.dot_background_color %}
.tm-dotnav .jl-dotnav { {% if particle.dot_background_color %}background-color: {{ particle.dot_background_color }};border-radius: 5px 5px 5px 5px;padding: 10px;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);{% endif %} }
{% endif %}
</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 Item Content #}
{% set dotnavlist %}
<ul class="jl-dotnav{% if particle.vertical %} jl-dotnav-vertical{% endif %}" jl-scrollspy-nav="closest: li; scroll: true;{% if particle.offset %}offset: {{particle.offset|e }}{% endif %}">
{% for item in particle.items %}

{# Set Link Scroll #}
{% set linkscroll = item.link|e matches '/#/' ? ' jl-scroll' %}

{% if item.link %}
    <li class="tm-item{% if item.item_class %} {{ item.item_class }}{% endif %}">
        <a target="{{ item.link_target|default('_self')|e }}" href="{{ item.link|e }}" class="tm-dotnav"{{linkscroll}}{% if particle.tooltip %} jl-tooltip="title:{{item.label}}; pos: {{particle.tooltip_position}}"{% endif %}></a>
    </li>
{% endif %}

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

{% block particle %}
{% pageblock body_top %}
{% if particle.enabled %}
<div id="{{ id }}" class="tm-dotnav jl-position-medium jl-position-fixed jl-position-{{particle.dotnav_position|e}}{% if particle.inverse_color != 'default' %} jl-{{particle.inverse_color}}{% endif %}{% if particle.class %} {{ particle.class }}{% endif %}{% 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}}>
    {{dotnavlist}}
</div>
{% endif %}
{% endpageblock %}
{% endblock %}