{% 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 root_page=page.get_parent tags=page.tags.all links=1 %}
            <div class="rich-text-container">
                <div class="rich-text">
                    {{ page.intro_page|richtext }}
                </div>
            </div>
            <div class="s-flex-align">
                <div class="article-author-img">
                    {% if not amp %}
                        <picture>

                            {% image page.author.image_presentation fill-40x40 format-webp as md_image_webp %}
                            <source media="(min-width: 1px)" srcset="{{ md_image_webp.url }}" type="image/webp">

                            {% image page.author.image_presentation fill-40x40 format-jpeg as md_image_jpeg %}
                            <source media="(min-width: 1px)" srcset="{{ md_image_jpeg.url }}" type="image/jpeg">

                            <img loading="lazy" data-src="{{ md_image_jpeg.url }}"
                                 class="s-icon x2 nopad"
                                 alt="{{ img.title }}"
                            />
                        </picture>
                    {% else %}
                        {% image page.author.image_presentation fill-40x40 format-webp as md_image_webp %}
                        <amp-img alt="{{ img.title }}"
                                 width="40"
                                 height="40"
                                 layout="responsive"
                                 src="{{ md_image_webp.url }}"
                                 class="s-icon x2 nopad"
                        >
                            {% image page.author.image_presentation fill-40x40 format-jpeg as md_image_jpeg %}
                            <amp-img alt="{{ img.title }}"
                                     width="40"
                                     height="40"
                                     layout="fill"
                                     src="{{ md_image_jpeg.url }}"
                                     class="s-icon x2 nopad"
                            >
                            </amp-img>
                        </amp-img>
                    {% endif %}
                </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>

{% if request.user_agent.is_pc and not amp %}
    <div id="blog-content-container" class="theme-bg-light">{% endif %}


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

{% if summary %}
    <div id="block-summary" class="theme-bg-light">
        <div class="container content theme-light">
            <div>
                <div class="rich-text-container">
                    {{ settings.cms.WebspaceSettings.summary_text|richtext }}
                    <ul class="ul-summary">
                        {% for h2 in summary %}
                            <li>
                                <a href="#{{ h2.link }}">
                                    <p>{{ h2.content }}</p>
                                </a>
                                {% if h2.h3 %}
                                    <ul class="summary-sublinks">
                                        {% for h3 in h2.h3 %}
                                            <li>
                                                <a href="#{{ h3.link }}">
                                                    <p>{{ h3.content }}</p>
                                                </a>
                                                {% comment %}{% if h3.h4 %}
                                                        <ul>
                                                            {% for h4 in h3.h4 %}
                                                                <li>
                                                                    <a href="#{{ h4.link }}">
                                                                        <p>{{ h4.content }}</p>
                                                                    </a>
                                                                </li>
                                                            {% endfor %}
                                                        </ul>
                                                    {% endif %}{% endcomment %}
                                            </li>
                                        {% endfor %}
                                    </ul>
                                {% endif %}
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
{% else %}
    <div id="block-summary" class="theme-bg-light">
        <div class="container content nopadbottom theme-light">
            <div class="rich-text-container">
                <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 %}

<div id="content-blog">
    {% for block in page.body %}
        {% include_block block with block_num=forloop.counter|add:1 %}
    {% endfor %}
</div>

{% if request.user_agent.is_pc and not amp %}</div>{% endif %}

{% 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">
                {{ settings.cms.WebspaceSettings.related_articles_text|richtext }}
            </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 theme='light-inverse' %}
                {% 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="{% pageurl page.get_parent %}">
                    {% if settings.cms.WebspaceSettings.button_view_all_articles %}
                        {{ settings.cms.WebspaceSettings.button_view_all_articles }}
                    {% else %}
                        Voir tous les articles
                    {% endif %}
                </a>
            </div>
        </div>
    </div>

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

{% endif %}