{% load social_share wagtailimages_tags wagtailcore_tags my my_amp %}

<div id="block-blog-intro" class="header-padding first_content theme-bg-space bg-pos-center"
        {% if request.user_agent.is_pc %}
            {% for media in page.bg_desktop %}
                {% if media.block_type == 'svg' %}
     style="background-image: url({{ media.value.url }})"
                {% elif media.block_type == 'image' %}
                    {% image media.value fill-1920x1080 as img %}
     style="background-image: url({{ img.url }})"
                {% endif %}
            {% endfor %}
        {% endif %}
        {% if not request.user_agent.is_pc %}
            {% for media in page.bg_mobile %}
                {% if media.block_type == 'svg' %}
     style="background-image: url({{ media.value.url }})"
                {% elif media.block_type == 'image' %}
                    {% image media.value fill-1920x1080 as img %}
     style="background-image: url({{ img.url }})"
                {% endif %}
            {% endfor %}
        {% endif %}
>
    <div class="container regular theme-space">
        <div class="align-text-left">
            <h1>{{ page.h1 }}</h1>
            {% include 'cms/blocks/common/tags_blog.html' with tags=page.tags.all links=1 %}
            <div class="rich-text-container">
                {{ page.intro_page|richtext }}
            </div>
            <div class="s-flex-align">
                <div class="article-author-img">
                    {% amp_img %}
                        <img class="s-icon x2 nopad"
                             src="{{ icons.user|ico:'space' }}"
                             alt="Astronaute"
                        />
                    {% endamp_img %}
                </div>
                <div class="article-author">
                    <p>{{ page.author.first_name }} {{ page.author.last_name }}</p>
                    <small>{{ page.date|date }}{% if page.date_updated %} (Mis à jour le
                        {{ page.date_updated|date }}){% endif %} • {{ page.read_time }}</small>
                </div>
            </div>
        </div>
    </div>
</div>

{% comment %}---------------------------- Summary ----------------------------{% endcomment %}

{% if summary %}
    <div id="block-summary" class="theme-bg-light">
        <div class="container content nopadbottom theme-light">
            <div class="rich-text">
                <h2>Structure de l'article</h2>
                <ul>
                    {% for h2 in summary %}
                        <li>
                            <a href="#{{ h2.link }}">
                                <p>{{ h2.content }}</p>
                            </a>
                            {% if h2.h3 %}
                                <ul>
                                    {% for h3 in h2.h3 %}
                                        <li>
                                            <a href="#{{ h3.link }}">
                                                <p>{{ h3.content }}</p>
                                            </a>
                                            {% if h3.h4 %}
                                                <ul>
                                                    {% for h4 in h3.h4 %}
                                                        <li>
                                                            <a href="#{{ h4.link }}">
                                                                <p>{{ h4.content }}</p>
                                                            </a>
                                                        </li>
                                                    {% endfor %}
                                                </ul>
                                            {% endif %}
                                        </li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
{% else %}
    <div id="block-summary" class="theme-bg-light">
        <div class="container content nopadbottom theme-light">
            <div class="rich-text">
                <h2 class="error">Erreur Sommaire</h2>
                <h3>Le sommaire ne peut pas être généré</h3>
                <p>Il y a une/des erreur(s) dans le contenue de la page sur l'architecture des titres h2, h3, h4 , h5.</p>
            </div>
        </div>
    </div>
{% endif %}

{% comment %}---------------------------- Content ----------------------------{% endcomment %}

{% for block in page.body %}
    {% include_block block with block_num=forloop.counter %}
{% endfor %}

{% comment %}---------------------------- Articles related ----------------------------{% endcomment %}

{% if page.related_blogs %}
    <div id="block-title-article-related" class="text theme-bg-light">
        <div class="container content theme-light">
            <div class="rich-text-container align-text-center">
                <div class="rich-text">
                    <h2>Les articles du même thème</h2>
                    <hr>
                </div>
            </div>
        </div>
    </div>
    <div id="block-article-related" class="theme-bg-light">
        <div class="container regular nopadtop nopadbottom theme-light">
            <div class="articles-container">
                {% for blog in page.related_blogs %}
                    {% include 'cms/blocks/common/article.html' with blog=blog.value %}
                {% endfor %}
            </div>
        </div>
    </div>
    <div id="block-6" class="buttons theme-bg-light">
        <div class="container content theme-light">
            <div class="btn-container align-text-center">
                <a class="btn secondary-full space-c" href="/articles/">
                    Voir tous les articles
                </a>
            </div>
        </div>
    </div>

    {% include 'cms/blocks/static/social_share.html' %}

{% endif %}