{block name="et-toc-nav"}
    {$context=$context|default:'generic'}
    {$settings=$settings|default:[]}
    {$id=$id|default:'et-toc' }
    <nav aria-labelledby="{$id}-title"
         class="et-toc-nav et-toc-context-{$context}{if !empty($settings.tocPosition) && ($settings.tocPosition === 'left' || $settings.tocPosition === 'right')} et-sticky et-sticky-affix{/if}{if !empty($settings.tocNumbering) && $settings.tocNumbering !== 'none'} et-toc-numbering et-toc-numbering-{$settings.tocNumbering}{/if}"
         data-toc=""
         data-toc-headings='{json_encode($settings.tocHeadings)}'
         data-toc-context="{$context}"
         {if !empty($settings.tocPosition) && ($settings.tocPosition === 'left' || $settings.tocPosition === 'right')} data-affix-to="parent"{/if}
         {if !empty($settings.tocReadingTime) && $settings.tocReadingTime !== 'none'} data-toc-reading-time="{$settings.tocReadingTime}"{/if}
    >
         <div class="et-toc-title" id="{$id}-title">{et_language key='et360_table_of_contents'}</div>
         <ol class="et-toc-list">{* Filled by JS *}</ol>
         {if !empty($settings.tocReadingTime) && $settings.tocReadingTime !== 'none'}<div class="et-toc-reading-time"><span class="et-toc-reading-time-title">{et_language key='et360_reading_time'} </span><span class="et-toc-reading-time-estimate">{* Filled by JS *}</span><span class="et-toc-reading-time-unit"> {et_language key='et360_reading_time_unit'}</span></div>{/if}
    </nav>
{/block}