{{/*
    Self-hosted Instagram feed - fully self-contained, drop-in Hugo shortcode.

    At build time this fetches the SnapWidget embed, extracts the Instagram
    image URLs, downloads each image with resources.GetRemote and serves it
    from your own domain (resized, aspect ratio preserved). No iframe, no
    third-party script, no tracking - so it can't be blocked by Firefox or
    other privacy browsers. All markup, styling and the placeholder logo are
    contained in this one file; nothing else in the project needs editing.

    If the remote fetch fails at build time a grey placeholder grid with
    Instagram logos is rendered as a fallback.

    Usage: {{< instagram id="1126243" count="6" >}}
      id    = SnapWidget embed id (default: 1126243)
      count = max number of images to show (default: 6)
*/}}
{{ $id := .Get "id" | default "1126243" }}
{{ $count := int (.Get "count" | default 6) }}
{{ $opts := dict "headers" (dict "User-Agent" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0 Safari/537.36") }}

{{ $posts := slice }}
{{ $embed := try (resources.GetRemote (printf "https://snapwidget.com/embed/%s" $id) $opts) }}
{{ with $embed.Err }}
    {{ warnf "instagram: could not fetch SnapWidget embed %s: %s" $id . }}
{{ else with $embed.Value }}
    {{ $imgTags := findRE `<img[^>]*data-src-medium="[^"]+"[^>]*>` .Content }}
    {{ range $imgTags }}
        {{ $tag := . }}
        {{ $src := $tag | replaceRE `(?s).*data-src-medium="([^"]+)".*` "$1" | htmlUnescape }}
        {{ $link := $tag | replaceRE `(?s).*data-link="([^"]+)".*` "$1" | htmlUnescape }}
        {{ if hasPrefix $src "http" }}
            {{ $img := try (resources.GetRemote $src $opts) }}
            {{ with $img.Err }}
                {{ warnf "instagram: could not fetch image: %s" . }}
            {{ else with $img.Value }}
                {{ $thumb := .Fill "500x500" }}
                {{ $posts = $posts | append (dict "thumb" $thumb "link" (cond (hasPrefix $link "http") $link "#")) }}
            {{ end }}
        {{ end }}
    {{ end }}
{{ end }}

{{ $posts = $posts | first $count }}

{{/* Emit the stylesheet only once per page, even if the shortcode is used multiple times. */}}
{{ if not (.Page.Scratch.Get "instagramCSS") }}
{{ .Page.Scratch.Set "instagramCSS" true }}
<style>
.instagram-widget {width: 100%; margin: 0 auto 1.5em;}
.instagram-grid, .instagram-widget__placeholder {display: flex; gap: 8px;}
.instagram-grid a {display: block; overflow: hidden;}
.instagram-grid img {width: 100%; height: auto; display: block;}
.instagram-widget__placeholder span {aspect-ratio: 1 / 1; background: #e9e9e9 url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23aaa'%20stroke-width='2'><rect%20x='2'%20y='2'%20width='20'%20height='20'%20rx='5'/><circle%20cx='12'%20cy='12'%20r='5'/><circle%20cx='17.5'%20cy='6.5'%20r='1.3'%20fill='%23aaa'%20stroke='none'/></svg>") center / 3rem no-repeat;}
</style>
{{ end }}

<div class="instagram-widget">
    {{ if $posts }}
    <div class="instagram-grid">
        {{ range $posts }}
        <a href="{{ .link }}" target="_blank" rel="noopener nofollow" aria-label="Bekijk op Instagram">
            <img src="{{ .thumb.RelPermalink }}" width="{{ .thumb.Width }}" height="{{ .thumb.Height }}"
                loading="lazy" alt="Instagram" />
        </a>
        {{ end }}
    </div>
    {{ else }}
    <div class="instagram-widget__placeholder" aria-hidden="true">
        {{ range (seq $count) }}<span></span>{{ end }}
    </div>
    {{ end }}
</div>