<div class="wrap">
    <h1 class="h1-title">Joli Table Of Contents</h1>
    <?php settings_errors(); ?>

    <div class="jtoc-wrap">
        <section class="joli-content">
            <div class="tab-content joli-tab-content">
                <div class="joli-logo logo-incontent">
                    <a href="https://wpjoli.com" title="WPJoli" target="_blank">
                        <img src="<?= $logo_url; ?>" alt="">
                    </a>
                </div>


                <div class="pro-wrap">
                        
                <p class="joli-title"><span class="joli-styling">Joli</span> Table Of Contents</p>
                    <p>Upgrade to Pro today</p>

                    <table class="pro-table widefat">
                        <thead>
                            <tr>
                                <th class="row-title"></th>
                                <th class="row-title featured">Free</th>
                                <th class="row-title featured">Pro</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="feature-name"><?= __( 'Maximum level of titles', 'joli-table-of-contents'); ?></td>
                                <td class="featured">H4</td>
                                <td class="featured">H6</td>
                            </tr>
                            <tr class="alternate">
                                <td class="feature-name"><?= __( 'Prefixing with numbers', 'joli-table-of-contents'); ?></td>
                                <td class="featured"><span class="dashicons dashicons-yes"></span></td>
                                <td class="featured"><span class="dashicons dashicons-yes"></span></td>
                            </tr>
                            <tr>
                                <td class="feature-name"><?= __( 'Themes', 'joli-table-of-contents'); ?></td>
                                <td class="featured"><span class="dashicons dashicons-no"></td>
                                <td class="featured"><span class="dashicons dashicons-yes"></td>
                            </tr>
                            <tr class="alternate">
                                <td class="feature-name"><?= __( 'Enable/disable per post', 'joli-table-of-contents'); ?></td>
                                <td class="featured"><span class="dashicons dashicons-no"></td>
                                <td class="featured"><span class="dashicons dashicons-yes"></td>
                            </tr>
                            <tr>
                                <td class="feature-name"><?= __( 'Floating widget showing current section', 'joli-table-of-contents'); ?></td>
                                <td class="featured"><span class="dashicons dashicons-no"></td>
                                <td class="featured"><span class="dashicons dashicons-yes"></td>
                            </tr>
                            <tr class="alternate">
                                <td class="feature-name"><?= __( 'Custom Post Type Support', 'joli-table-of-contents'); ?></td>
                                <td class="featured"><span class="dashicons dashicons-no"></td>
                                <td class="featured"><span class="dashicons dashicons-yes"></td>
                            </tr>
                            <tr>
                                <td class="feature-name"><?= __( 'Custom CSS', 'joli-table-of-contents'); ?></td>
                                <td class="featured"><span class="dashicons dashicons-no"></td>
                                <td class="featured"><span class="dashicons dashicons-yes"></td>
                            </tr>
                            <tr>
                                <td class="feature-name"><?= __( 'TOC Title customization', 'joli-table-of-contents'); ?></td>
                                <td class="featured"><span class="dashicons dashicons-no"></td>
                                <td class="featured"><span class="dashicons dashicons-yes"></td>
                            </tr>
                            <tr class="alternate">
                                <td class="feature-name"><?= __( 'Removable WPJoli Watermark', 'joli-table-of-contents'); ?></td>
                                <td class="featured"><span class="dashicons dashicons-yes"></td>
                                <td class="featured"><span class="dashicons dashicons-yes"></td>
                            </tr>
                            <tr>
                                <td class="feature-name"></td>
                                <td class="featured"></td>
                                <td class="featured"><a href="" class="joli-cta-button"><?= __( 'GET IT NOW', 'joli-table-of-contents'); ?></a></td>
                            </tr>
                        </tbody>
                    </table>

                </div>

            </div>
        </section>
    </div>

</div>