{% extends "base_content_page.html" %}

{% load wagtailimages_tags wagtailcore_tags navigation_tags i18n svg_tags placeholder_tags %}

{% block page_content %}
   {% include_block page.header %}
   <section class="pb-10">
      {% include_block page.body %}
   </section>
   
   {% comment %}Articles listing section{% endcomment %}
   
   <section class="pb-10">
      {% if items.number == 1 %}
         <div class="grid lg:grid-cols-2 gap-8 mb-8">
            {% comment %}Filter out the hero article from the featured articles{% endcomment %}
            {% with hero_id=hero_article.0.id|default:0 %}
               {% with main_article=items|first %}
                  {% if main_article.id != hero_id %}
                     {% include "components/_main_featured_article.html" with article=main_article %}
                  {% else %}
                     {% comment %}Hero article is the first item, use the second item as main{% endcomment %}
                     {% with main_article=items.1 %}
                        {% include "components/_main_featured_article.html" with article=main_article %}
                     {% endwith %}
                  {% endif %}
               {% endwith %}
               
               {% comment %}Get secondary featured articles, excluding the hero article{% endcomment %}
               {% with featured_articles=items|slice:"1:3" %}
                  {% if items.0.id == hero_id %}
                     {% comment %}If first item was hero, shift the slice{% endcomment %}
                     {% with featured_articles=items|slice:"2:4" %}
                        {% include "components/_secondary_featured_articles.html" with featured_articles=featured_articles %}
                     {% endwith %}
                  {% else %}
                     {% include "components/_secondary_featured_articles.html" with featured_articles=featured_articles %}
                  {% endif %}
               {% endwith %}
            {% endwith %}
         </div>

         <div class="my-4">

            {% include "components/_pagination.html" %}

         </div>

         <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
            {% for article in items|slice:"3:" %}

               {% include "components/_article_card.html" %}

            {% endfor %}
         </div>
         <div class="mt-8">

            {% include "components/_pagination.html" %}

         </div>
      {% else %}
         <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
            {% for article in items %}

               {% include "components/_article_card.html" with article=article %}

            {% endfor %}
         </div>
         <div class="mt-4">

            {% include "components/_pagination.html" %}

         </div>
      {% endif %}
   </section>
{% endblock page_content %}
