<div class="webien-toc-widget-toc" id="webien-toc-widget-<?= $unique ?>" data-unique="<?= $unique ?>">

    <div class="inner" :class="{ready:appReady}">

        <div class="standard-view">
            <div class="chapters" v-show="chapters.length">
                <button @click="scrollToChapter(chapter)" v-for="chapter in chapters" :class="[{active:chapter.active}, 'level-' + chapter.level]">{{chapter.title}}</button>
            </div>
        </div>


        <div class="narrow-view-btns">
            <button class="open" @click="openNarrowView()">
                <?php if(!empty($settings['toc_toggle_icon']['value'])){
                    \Elementor\Icons_Manager::render_icon($settings['toc_toggle_icon'], ['aria-hidden' => 'true']);
                } else {
                    echo file_get_contents(WEBIEN_PLUGIN_PATH . '/src/Elementor/Widgets/TOC/images/list.svg');
                } ?>
                <?php do_action( 'webien/toc/narrow/open_btn_content'); ?>
            </button>

            <button class="scroll-up" @click="scrollToTop()">
                <?php if(!empty($settings['toc_scroll_icon']['value'])){
                    \Elementor\Icons_Manager::render_icon($settings['toc_scroll_icon'], ['aria-hidden' => 'true']);
                } else {
                    echo file_get_contents(WEBIEN_PLUGIN_PATH . '/src/Elementor/Widgets/TOC/images/arrow-up.svg');
                } ?>
            </button>
        </div>




        <div class="narrow-view" :class="{active:narrow.open}">
            <div class="bkg" @click="closeNarrowView()"></div>
            <div class="inner" :class="{ready:appReady}">
                <div class="top"><?php do_action( 'webien/toc/narrow/before_toc_chapters'); ?></div>
                <div class="chapters" v-show="chapters.length">
                    <button @click="scrollToChapter(chapter)" v-for="chapter in chapters" :class="[{active:chapter.active}, 'level-' + chapter.level]">{{chapter.title}}</button>
                </div>
                <div class="bottom"><?php do_action( 'webien/toc/narrow/after_toc_chapters'); ?></div>
            </div>
        </div>




    </div>


</div>

<?php if(is_admin()){ ?>
    <script><?= $script ?></script>
    <script src="<?= WEBIEN_PLUGIN_URL . 'dist/widget-toc.js' ?>"></script>
<?php } ?>