{% block body %}
  {% if (news|length) > 0 %}
    {% if isCarousel == false %}
      <div class="bg-white py-24 sm:py-32">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
          <div class="mx-auto max-w-2xl lg:max-w-4xl">
            <h2
              class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl"
            >
              Les spectacles
            </h2>
            <p class="mt-2 text-lg/8 text-gray-600">
              Retrouvez mes derniers spectacles.
            </p>
            <div class="mt-16 space-y-20 lg:mt-20">
              {% for new in news %}
                <article
                  class="relative isolate flex flex-col gap-8 lg:flex-row"
                >
                  {% if new.newsImages is defined %}
                    <div
                      class="relative aspect-video sm:aspect-2/1 lg:aspect-square lg:w-64 lg:shrink-0"
                    >
                      <img
                        src="{{ new.newsImages[0].image.url }}"
                        alt=""
                        class="absolute inset-0 size-full rounded-2xl bg-gray-50 object-cover"
                      />
                      <div
                        class="absolute inset-0 rounded-2xl inset-ring inset-ring-gray-900/10"
                      ></div>
                    </div>
                  {% endif %}
                  <div>
                    <div class="flex items-center gap-x-4 text-xs">
                      <time
                        datetime="{{ new.updatedAt|date('Y-m-d') }}"
                        class="text-gray-500"
                      >
                        {{ new.updatedAt|date('d M Y') }}
                      </time>
                    </div>
                    <div class="group relative max-w-xl">
                      <h3
                        class="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-gray-600"
                      >
                        <a href="#">
                          <span class="absolute inset-0"></span>
                          {{ new.title }}
                        </a>
                      </h3>
                      <p class="mt-5 text-sm/6 text-gray-600">
                        {{ new.description|u.truncate(300, '…', false)|raw }}
                      </p>
                    </div>
                    <div
                      class="mt-6 flex border-t border-gray-900/5 pt-6 items-center gap-x-2"
                    >
                      <span class="text-sm font-medium text-gray-700">
                        Partager :
                      </span>

                      {% set shareUrl =
                        absolute_url(
                          path(
                            'actualites',
                            {
                              slug: news.slug
                            }
                          )
                        )
                      %}

                      <!-- LinkedIn -->
                      <a
                        href="https://www.linkedin.com/sharing/share-offsite/?url={{
                        shareUrl
                        }}"
                        target="_blank"
                        rel="noopener noreferrer"
                        class="flex items-center justify-center size-9 rounded-full bg-gray-100 text-gray-600 hover:bg-amber-500/10 hover:text-amber-500 transition"
                        aria-label="Partager sur LinkedIn"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="16"
                          height="16"
                          fill="currentColor"
                          class="bi bi-linkedin"
                          viewbox="0 0 16 16"
                        >
                          <path
                            d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"
                          />
                        </svg>
                      </a>

                      <!-- Facebook -->
                      <a
                        href="https://www.facebook.com/sharer/sharer.php?u={{
                        shareUrl
                        }}"
                        target="_blank"
                        rel="noopener noreferrer"
                        class="flex items-center justify-center size-9 rounded-full bg-gray-100 text-gray-600 hover:bg-amber-500/10 hover:text-amber-500 transition"
                        aria-label="Partager sur Facebook"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="16"
                          height="16"
                          fill="currentColor"
                          class="bi bi-facebook"
                          viewbox="0 0 16 16"
                        >
                          <path
                            d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"
                          />
                        </svg>
                      </a>

                      <!-- Twitter / X -->
                      <a
                        href="https://twitter.com/intent/tweet?url={{
                        shareUrl
                        }}&text={{ new.title|url_encode }}"
                        target="_blank"
                        rel="noopener noreferrer"
                        class="flex items-center justify-center size-9 rounded-full bg-gray-100 text-gray-600 hover:bg-amber-500/10 hover:text-amber-500 transition"
                        aria-label="Partager sur Twitter"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="16"
                          height="16"
                          fill="currentColor"
                          class="bi bi-twitter"
                          viewbox="0 0 16 16"
                        >
                          <path
                            d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334q.002-.211-.006-.422A6.7 6.7 0 0 0 16 3.542a6.7 6.7 0 0 1-1.889.518 3.3 3.3 0 0 0 1.447-1.817 6.5 6.5 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.32 9.32 0 0 1-6.767-3.429 3.29 3.29 0 0 0 1.018 4.382A3.3 3.3 0 0 1 .64 6.575v.045a3.29 3.29 0 0 0 2.632 3.218 3.2 3.2 0 0 1-.865.115 3 3 0 0 1-.614-.057 3.28 3.28 0 0 0 3.067 2.277A6.6 6.6 0 0 1 .78 13.58a6 6 0 0 1-.78-.045A9.34 9.34 0 0 0 5.026 15"
                          />
                        </svg>
                      </a>
                    </div>
                  </div>
                </article>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    {% else %}
      <div class="bg-white py-24 sm:py-32">
        <div class="mx-auto px-6 lg:px-8">
          <h2 class="text-4xl font-semibold text-gray-900 sm:text-5xl">
            Les spectacles
          </h2>
          <p class="mt-2 text-lg text-gray-600">
            Retrouvez mes derniers spectacles.
          </p>

          <div class="mt-16 flex">
            <div class="swiper" data-controller="render-feature--news-carousel">
              <div class="swiper-wrapper">
                {% for new in news %}
                  {% set images = new.newsImages|default([]) %}
                  {% set mainImage = images|first %}
                  {% set secondaryImages = images|slice(1) %}
                  <div class="swiper-slide">
                    <article class="flex flex-col lg:flex-row rounded-2xl">
                      {# Image à gauche #}
                      {% if mainImage %}
                        <div
                          class="w-full lg:w-1/2 h-100 pl-20 pr-20 lg:pr-10 py-10"
                        >
                          <img
                            src="{{ new.newsImages[0].image.url }}"
                            alt="{{ new.title }}"
                            class="w-full h-full object-cover"
                          />
                          {% if secondaryImages is not empty %}
                            <div class="flex gap-2 mt-6">
                              {% for image in secondaryImages %}
                                <img
                                  src="{{ image.image.url }}"
                                  alt="{{ new.title }}"
                                  class="w-20 h-20 object-cover rounded-lg"
                                />
                              {% endfor %}
                            </div>
                          {% endif %}
                        </div>
                      {% endif %}

                      {# Contenu à droite #}
                      <div
                        class="flex flex-col justify-center w-full lg:w-1/2 pr-20 pl-20 lg:pl-10"
                      >
                        <time class="text-xs text-gray-500">
                          {{ new.updatedAt|date('d M Y') }}
                        </time>

                        <a
                          class="mt-2 text-xl font-semibold text-gray-900"
                          href="{{
                          path(
                            'actualites',
                            {
                              slug: new.slug
                            }
                          )
                          }}"
                        >
                          {{ new.title }}
                        </a>
                        <p class="mt-4 text-sm text-gray-600">
                          {{
                            new.description|striptags|u.truncate(
                              220,
                              '…',
                              true
                            )|raw
                          }}
                        </p>
                      </div>
                    </article>
                  </div>
                {% endfor %}
              </div>

              <div class="swiper-pagination"></div>
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </div>
          </div>
        </div>
      </div>
    {% endif %}
  {% endif %}
{% endblock %}