<section class="article_content">

    <div class="post_content lg:mt-4">
        {% include "templates/components/single/google-button.twig" %}
        {% set has_TOC = type == 'single_evergreen' %}
        {% set adv_count = 0 %}
        {% set device = mobile ? 'mobile' : 'desktop' %}
    
    
        {% set toc = [] %}
        {% for section in content %}
            {% set toc = (section.type == "title") ? toc|merge([section]) : toc %}
        {% endfor %}
    
        {% for section in content %}
    
            {# CONTENTS #}
            {% if section.type =="content" %}{{ section.content|raw }}{% endif %}
    
    
            {# HEADINGS #}
            {% if section.type == 'title' %}
    
                {# print the TOC #}
                {% if has_toc %}
    
                    {% set toc = [] %}
                    {% for section in content %}
                        {% set toc = (section.type == "title") ? toc|merge([section]) : toc %}
                    {% endfor %}
    
                    {% if toc|length > 1 %}
                        <div class="table-of-content bg-slate-100 p-4 rounded-lg">
                            <ol class="px-2 pl-6 list-disc">
                                {% for item in toc %}
                                    <li><a href="#{{item.id}}" class="block hover:bg-slate-200 hover:text-primary px-2 py-1 rounded">{{item.content}}</a></li>
                                {% endfor %}
                            </ol>
                        </div>
                    {% endif %}
    
                    {% set has_toc = false %}
    
                {% endif %}
    
                {# print the heading #}
                <{{section.type}} id="{{section.id}}">{{ section.content|raw }}</{{section.type}}>
    
    
            {% endif %}
    
            {% if section.type == "title" %}
            {% set bg_color = theme.name in ['default', 'apple'] ? 'bg-[#A2CC20]' : 'bg-primary' %}
              <h2 class="text-xl {{bg_color}} text-white py-1 px-4 inline-block mb-6">{{section.content|raw}}</h2>
            {% endif %}
    
            {# GALLERIES #}
            {% if section.type == "gallery" %}
                {% set loop_id = 'gallery_'~loop.index %}
                {% include "templates/components/single/gallery_widget.twig" with {'gallery_id':loop_id } %}
            {% endif %}

            {# GALLERIES COMPARE #}
            {% if section.type =="gallery_compare" %}
                {% set loop_id = 'gallery_compare_'~loop.index %}
                {% if mobile %}
                    {% include "templates/components/single/gallery_compare_mobile.twig" with {'gallery_id':loop_id } %}
                {% else %}
                    {% include "templates/components/single/gallery_compare.twig" with {'gallery_id':loop_id } %}
                {% endif %}
            {% endif %}

            {# IMAGES #}
            {% if section.type =="image" %}
                {% include "templates/components/single/article-image.twig" %}
            {% endif %}

            {# TITLE AND IMAGE #}
            {% if section.type =="title_and_image" %}
                {% include "templates/components/single/article-title-image.twig" %}
            {% endif %}

            {# LIVE SECTION #}
            {% if section.type =="live_section" %}
                {% include "templates/components/single/live-section.twig" %}
            {% endif %}

            {# PROCONS #}
            {% if section.type == "procons" or section.type == "procon" %}
                {% include "templates/components/single/procons.twig" %}
            {% endif %}

            {# VIDEO #}
            {% if section.type =="video" %}
            {% set has_video = true %}
                {% include "templates/components/single/article-video.twig" %}
            {% endif %}
    
            {# Intext Relateds #}
            {% if section.type =="intext_relateds" %}
                {% include "templates/components/single/related-intext.twig" %}
            {% endif %}
    
            {# FAQ #}
            {% if section.type =="faq" %}
                {% include 'templates/components/single/faq.twig' %}
            {% endif %}


        {% endfor %}

    </div>

    {% if has_video == true or featuredVideo %}
        <link rel="stylesheet"href="{{styles_dir}}/lib/lite-yt-embed.css"/>
        <script src="{{scripts_dir}}/lite-yt-embed.js"></script>
        
        <style>
            lite-youtube {
                max-width: 100% !important;
            }
            lite-youtube > .lyt-playbtn,
            lite-youtube > .lty-playbtn {
                filter: none !important;
            }
        </style>
    {% endif %}

    {% if type != 'single_page' %}
        {% include "templates/components/cards/author-card.twig" %}
    {% endif %}


</section>
