<?php
    $instagramToken = 'IGQWROR1p4UFRFS1ZAoQm5BWTZAmYnQ2TXpHVVJoTHdRdVVycEVhRWdzRTJhTHVGa0hmS3VYVjR5MG9URWRETllpbnFOcXBuLU1PQVRYUXdPTjZAMYVFBTEVYQTBuV0twSjI0N2pzZA0JWWVg0SlJuTU5Oa3loTXJNUUkZD';
    $postsData = json_decode(file_get_contents('https://graph.instagram.com/me/media?limit=25&fields=thumbnail_url,permalink,media_url,media_type,caption&access_token=' . $instagramToken));
?>

<div class="box-title">Sprawdź nas na Instagramie</div>

<section class="splide" id="instagram-feed-box" aria-label="Splide Basic HTML Example">
  <div class="splide__track">
		<ul class="splide__list">
            <? foreach($postsData->data as $post): ?>
                <?
                    $postId = $post->id;
                    $permalink = $post->permalink;
                    $mediaUrl = $post->media_url;
                    $mediaType = $post->media_type;
                    $description = $post->caption;
                ?>
                <li class="splide__slide">
                    <a href="<?= $permalink; ?>">
                        <img src="<?=$mediaUrl; ?>" style="width: 100%; max-width: fit-content;">
                    </a>
                </li>
            <? endforeach ?>
		</ul>
  </div>
</section>

<script class="footer" type="text/javascript">
    let instagramFeedBox = new Splide("#instagram-feed-box", {
        type: "loop",
        perPage: 6,
        perMove: 1,
        gap: 20,
        pagination: false,
        arrows:true,
        breakpoints: {
            1400: {
              perPage: 5,
            },
            991: {
              perPage: 4,
            },
            600: {
              perPage: 3,
            },
            500: {
              perPage: 2,
            },
          },
    });

    instagramFeedBox.mount();
</script>