<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 %}


            {# BLOCKQUOTE #}
            {% if section.type == "blockquote" %}
                <blockquote>{{section.content.quote|raw}} {% if section.content.quoted is defined and section.content.quoted is not empty %} - <strong>{{section.content.quoted|raw}}</strong>{% endif %}</blockquote>
            {% endif %}
    
            {# GALLERIES #}
            {% if section.type == "gallery" %}
                {% set loop_id = 'gallery_'~loop.index %}
                {% include "templates/components/single/gallery_widget.twig" with {'gallery_id':loop_id } %}
                {% if section.title is defined and section.title %}
                    <div class="text-sm text-slate-500 lg:-mt-6 mb-4">{{ section.title|raw }}</div>
                {% endif %}
            {% 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 %}
                {% if section.title is defined and section.title %}
                    <div class="text-sm text-slate-500 -mt-4 mb-6">{{ section.title|raw }}</div>
                {% endif %}
            {% endif %}

            {# MODEL SIZE COMPARISON #}
            {% if section.type =="embedded_models" %}

            {% if section.layout == "model_size_comparison" %}
                {% include "templates/components/single/widgets/model-size-comparison.twig" %}
            {% else %}
                {% include "templates/components/single/widgets/model-widget-normal.twig" %}
            {% 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 %}
        <script>
            (function () {
                var loadLiteYoutube = function () {
                    if (document.querySelector('script[data-lite-youtube-loader]')) return;
                    var script = document.createElement('script');
                    script.src = '{{scripts_dir}}/lite-yt-embed.js';
                    script.defer = true;
                    script.setAttribute('data-lite-youtube-loader', '');
                    document.body.appendChild(script);
                };

                var scheduleLiteYoutube = function () {
                    if ('requestIdleCallback' in window) {
                        window.requestIdleCallback(loadLiteYoutube, { timeout: 2500 });
                    } else {
                        window.setTimeout(loadLiteYoutube, 1200);
                    }
                };

                if (document.readyState === 'complete') {
                    scheduleLiteYoutube();
                } else {
                    window.addEventListener('load', scheduleLiteYoutube, { once: true });
                }
            }());
        </script>
    {% endif %}

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


</section>
