---
/**
 * this page is meant to be directly included on a service page via the gaufre script tag
 *
 * This is not rendered in an iframe! it's included directly in the host page with a fetch request.
 * Every css rule is scoped and marked as important to avoid style conflicts with the host page.
 */
import { Image } from "astro:assets"
const logos = import.meta.glob<{ default: ImageMetadata }>("/src/assets/logos/*.{svg,png,jpg}")
const { services } = Astro.props
---

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Services de La Suite numérique</title>
  </head>
  <body>
    <div class="lagaufre">
      <style is:inline>
        @font-face {
          font-family: "La Gaufre";
          src: url("/fonts/Marianne-Regular-subset.woff2") format("woff2");
          unicode-range: U+20, U+27, U+43, U+44, U+46, U+47, U+4E, U+50, U+52-54, U+56, U+57,
            U+61-66, U+68, U+69, U+6C-70, U+72-76, U+A0, U+C9, U+E9, U+2715;
          font-weight: 400;
          font-display: swap;
        }

        @font-face {
          font-family: "La Gaufre fallback";
          src: local("Arial");
          ascent-override: 103.16%;
          descent-override: 23.35%;
          line-gap-override: 0%;
          size-adjust: 109.64%;
        }

        .lagaufre,
        :where(.lagaufre) * {
          all: revert !important;
          box-sizing: border-box !important;
        }

        .lagaufre {
          --lagaufre-border-color: #01018f !important;
          --lagaufre-bg-color: #fff !important;
          height: 100% !important;
          width: 100% !important;
          font-size: 100% !important;
          font-family: "La Gaufre", "La Gaufre fallback", BlinkMacSystemFont, "Segoe UI",
            "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
          margin: 0 0 8px !important;
          border: 2px solid var(--lagaufre-border-color) !important;
          background-color: var(--lagaufre-bg-color) !important;
          filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)) !important;
          overflow: hidden !important;
          display: flex !important;
          flex-direction: column !important;
        }

        [data-fr-scheme="dark"] .lagaufre {
          --lagaufre-bg-color: #1e1e1e !important;
          --lagaufre-border-color: #8585f6 !important;
        }

        .lasuite--gaufre-borderless .lagaufre {
          border-color: var(--lagaufre-bg-color) !important;
          filter: none !important;
          margin-bottom: 0 !important;
        }

        .lasuite--gaufre-modal-opened body {
          overflow: hidden !important;
        }

        .lasuite--gaufre-modal .lagaufre {
          filter: none !important;
          border: 0 !important;
          padding: 0 !important;
          margin: 0 !important;
        }

        .lagaufre-close-button-container {
          display: flex !important;
          justify-content: flex-end !important;
        }

        .lagaufre-close-button {
          display: none !important;
          padding: 8px !important;
          margin: 4px !important;
          border: 1px solid rgb(221, 221, 221) !important;
          color: rgb(0, 0, 145) !important;
          font-weight: bold !important;
          background: none !important;
        }

        .lasuite--gaufre-modal .lagaufre-close-button {
          display: block !important;
        }

        .lagaufre-sr-only {
          position: absolute !important;
          width: 1px !important;
          height: 1px !important;
          padding: 0 !important;
          margin: -1px !important;
          overflow: hidden !important;
          clip: rect(0, 0, 0, 0) !important;
          white-space: nowrap !important;
          border: 0 !important;
          display: block !important;
        }

        .lagaufre-list {
          margin: 0 !important;
          padding: 0 !important;
          list-style: none !important;
          /* border-radius: 2px !important; */
          height: 100% !important;
          overflow: auto !important;
        }

        .lagaufre-service {
          position: relative !important;
          display: flex !important;
          align-items: center !important;
          padding: 16px 32px !important;
          border-top: 1px solid transparent !important;
          border-bottom: 1px solid transparent !important;
        }

        .lagaufre-service a {
          background-image: none !important;
          outline-width: 0 !important;
        }

        .lagaufre-service a::before {
          content: "" !important;
          display: block !important;
          position: absolute !important;
          top: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          left: 0 !important;
          width: 100% !important;
          height: 100% !important;
          outline-offset: 2px !important;
          outline-style: inherit !important;
          outline-color: inherit !important;
          outline-width: 2px !important;
          z-index: 1 !important;
        }

        .lagaufre-service:hover,
        .lagaufre-service:focus-within {
          background-color: #f0f0fa !important;
          border-top: 1px solid #8989cd !important;
          border-bottom: 1px solid #8989cd !important;
        }

        [data-fr-scheme="dark"] .lagaufre-service:hover,
        [data-fr-scheme="dark"] .lagaufre-service:focus-within {
          background-color: #2d2d2d !important;
          border-top: 1px solid #8989cd !important;
          border-bottom: 1px solid #8989cd !important;
        }

        .lagaufre-service__icon {
          flex-shrink: 0 !important;
          display: flex !important;
          align-items: center !important;
          width: 40px !important;
          height: 40px !important;
        }

        .lagaufre-service__icon img {
          max-width: 100% !important;
          height: auto !important;
        }

        [data-fr-scheme="dark"] .lagaufre-service__icon {
          border-radius: 3px !important;
          padding: 6px !important;
          background-color: #fff !important;
        }

        .lagaufre-service__name {
          margin-left: 24px !important;
          text-decoration: none !important;
          color: #161616 !important;
        }

        [data-fr-scheme="dark"] .lagaufre-service__name {
          color: #cecece !important;
        }

        .lagaufre-service__name:focus {
          outline: 0 !important;
        }

        .lagaufre-scrollbars {
          scrollbar-width: thin !important;
          scrollbar-color: #aaa transparent !important;
        }

        .lagaufre-scrollbars::-webkit-scrollbar {
          width: 5px !important;
          height: 5px !important;
        }

        .lagaufre-scrollbars::-webkit-scrollbar-track {
          background: 0 0 !important;
        }

        .lagaufre-scrollbars::-webkit-scrollbar-thumb {
          background-color: #ddd !important;
          border-radius: 6px !important;
        }

        .lagaufre-scrollbars:not(:hover, :focus) {
          scrollbar-color: transparent transparent !important;
        }

        .lagaufre-scrollbars:not(:hover, :focus):-webkit-scrollbar-thumb {
          background-color: transparent !important;
        }
      </style>
      <h1 id="lagaufre-title" class="lagaufre-sr-only">Liste des services de La Suite numérique</h1>
      <div class="lagaufre-close-button-container">
        <button type="button" class="lagaufre-close-button">
          <span class="lagaufre-sr-only">Fermer la liste des services</span>
          <span aria-hidden="true">✕</span>
          <span>Fermer</span>
        </button>
      </div>
      <ul
        class="lagaufre-list lagaufre-scrollbars js-lagaufre-keyboard-anchor"
        aria-labelledby="lagaufre-title"
        tabindex="-1"
      >
        {
          services
            .filter(({ enabled }) => !!enabled)
            .map(({ id, name, url }, i) => {
              const logo =
                logos[`/src/assets/logos/${id}.svg`] ||
                logos[`/src/assets/logos/${id}.jpg`] ||
                logos[`/src/assets/logos/${id}.png`]
              return (
                <li>
                  <div class="lagaufre-service lagaufre-enlarge-link">
                    <div class="lagaufre-service__icon">
                      {!!logo ? (
                        <Image src={logo()} width="40" height="40" alt="" loading="eager" />
                      ) : null}
                    </div>
                    <a
                      target="_blank"
                      title={`${name} - nouvelle fenêtre`}
                      class="lagaufre-service__name"
                      href={url}
                      id={`lagaufre-service-${id}`}
                      {...((i === 0 && { autofocus: true }) || {})}
                    >
                      {name}
                    </a>
                  </div>
                </li>
              )
            })
        }
      </ul>
    </div>
  </body>
</html>
