{% extends 'base.html.twig' %}
{% block body %}
  {% set images = news.newsImages|default([]) %}
  {% set mainImage = images|first %}
  {% set secondaryImages = images|slice(1) %}

  <div class="bg-white py-32">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div
        class="mx-auto flex max-w-2xl flex-col justify-between gap-16 lg:mx-0 lg:max-w-none lg:flex-row"
      >
        <div class="w-full lg:max-w-lg lg:flex-auto">
          <h2
            class="text-3xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-4xl"
          >
            {{ news.title }}
          </h2>
          {% if mainImage %}
            <img
              src="{{ mainImage.image.url }}"
              alt="{{ news.title }}"
              class="mt-16 aspect-6/5 w-full rounded-2xl object-cover outline-1 -outline-offset-1 outline-black/5 lg:aspect-auto lg:h-138"
            />
          {% endif %}
          {% if secondaryImages is not empty %}
            <div class="flex gap-2 mt-6">
              {% for image in secondaryImages %}
                <img
                  src="{{ image.image.url }}"
                  alt="{{ news.title }}"
                  class="w-20 h-20 object-cover rounded-lg"
                />
              {% endfor %}
            </div>
          {% endif %}
          <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={{ news.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>

        <div class="w-full lg:max-w-xl lg:flex-auto">
          {{ news.description|raw }}
        </div>
      </div>
    </div>
  </div>
{% endblock %}