{% extends "_layouts/default" %}

{% block content %}
{% if slug is defined and slug == "expertise/rosengart-expertise" %}
<div class="container mx-auto px-6 py-12">


{#
<div class="grid grid-cols-12 grid-rows-2 gap-4">
    <div class="col-span-8">1</div>
    <div class="col-span-4 col-start-9">2</div>
    <div class="col-span-8 col-start-5 row-start-2">3</div>
    <div class="col-span-4 col-start-1 row-start-2">4</div>
</div>
#}

    <h1 class="text-4xl font-bold mb-12 border-b pb-4 uppercase tracking-wider">Expertise</h1>

    {# 1. On récupère tous les articles de la section 'expertise' #}
    {% set articles = craft.entries()
        .section('expertise')
        .orderBy('postDate desc')
        .all() %}
    <div class="space-y-16">
        {% for article in articles %}
{# Contenu de l'article #}
            <article class="grid grid-cols-12 gap-4 items-start">
{# Optionnel : Une image de couverture si tu en as une #}
                {# {{dump(image)}} #}                
                {% if article.image %}
                {% set image = article.image.one() %}
                    {% if image.width > image.height %}
                        {% set imgClass = "w-full max-w-96 h-auto object-cover" %}
                    {% else %}
                        {% set imgClass = "w-auto h-full object-cover" %}
                    {% endif %}
                    {% if image %}
                    <div class="col-span-4"->
                    {% do image.setTransform({ width: 400 }) %}
                    {{ tag('img', {
                    src: image.url,
                    width: image.width,
                    class: imgClass,
                    height: image.height,
                    srcset: image.getSrcset(['1.5x', '2x', '3x']),
                    alt: image.title,
                    }) }}
                {#        <img src="{{ image.url }}" alt="{{ article.title }}" class="rounded-lg shadow-sm"> #}
                    </div>
                    {% endif %}
                {% endif %}            

                <div class="col-span-8">
                    {# Title #}
                    <h2 class="text-3xl font-serif font-bold mb-2">
                        <a href="{{ article.url }}" class="hover:text-indigo-600 transition-colors">
                            {{ article.title }}
                        </a>
                    </h2>

                    {# pageSubheading #}
                    {% if article.pageSubheading %}
                        <p class="text-xl text-gray-500 font-medium mb-4 italic">
                            {{ article.pageSubheading }}
                        </p>
                    {% endif %}

                    {# Les 500 premiers mots #}
                    <div class="prose max-w-none text-gray-700 leading-relaxed">
                        {% set content = article.pageContent ?? article.body ?? article.richText ?? "" %}
                        
                        {# 
                           Logique : 
                           1. striptags : enlève le HTML pour éviter de couper une balise au milieu
                           2. split(' ') : transforme le texte en tableau de mots
                           3. slice(0, 50) : prend les 500 premiers éléments
                           4. join(' ') : remet les mots ensemble
                        #}
                        <p>
                            {{ article.pageContent|striptags|split(' ')|slice(0, 100)|join(' ') }}...
                        </p>
                    </div>

                    <a href="{{ article.url }}" class="inline-block mt-6 text-indigo-600 font-bold uppercase text-sm tracking-widest border-b-2 border-indigo-600 pb-1 hover:text-indigo-800 hover:border-indigo-800 transition-all">
                        Continue reading...
                    </a>
                </div>
            </article>
            
            {% if not loop.last %}
                <hr class="border-gray-100 my-12">
            {% endif %}
        {% endfor %}
    </div>
</div>
{% endif %}

{% if slug is defined and slug != "expertise/rosengart-expertise" %}

  {% if entry.image %}
    <figure>
      {% set assets = entry.image.one() %}
      {% if assets %}
      {#{{ dump(assets) }}#}
        <img src="{{ assets.url }}" alt="{{ assets.alt }}" />
        {#{{<img src="{{ assets.getUrl() }}" alt="{{ assets.alt }}" />}}#}
      {% endif %}
    </figure>
  {% endif %}
  <header class="container mx-auto pt-12 pb-6 px-2 text-2xl">
    <h1 class="font-bold text-4xl sm:text-6xl lg:text-9xl">{{ entry.title }}</h1>
    <p class="mt-4">{{ entry.pageSubheading }}</p>
    {% if entry.section.handle == 'article' %}
    <div class="text-xs mt-4">
      {% set category = entry.category.eagerly().one() %}
      <p>{% if category %}<span class="font-bold">{{ category.title }}</span> | {% endif %}<time datetime="{{ entry.postDate|atom }}">{{ entry.postDate|date }}</time></p>
      <p class="text-xs">By {{ entry.author.fullName }}</p>
    </div>
    {% endif %}
  </header>
  <section class="page__content">
    <div class="container mx-auto py-12 px-2 text-balance prose">
      {{ entry.pageContent }}
    </div>
    {% block landing %}{% endblock %}
  </section>
{% endif %}
{% endblock %}