<div class="instagram">
  <div class="">
    <div class="clearfix module-instagram">
      <div class="section-title"><h3>{{ insta_title }}</h3></div>
      <div id="instagram-feed" class=""></div>
    </div>
  </div>
</div>

<script type="text/javascript">
    const status = '{{ status }}';
    const username = '{{ insta_name }}';
    const count = '{{ insta_count }}';

  // function instagramSlider() {
  //       const directioninsta = $('html').attr('dir');
  //       $('#instagram-feed').addClass('owl-carousel owl-theme');
  //       const items = 4;
  //       const sliderOptions = {
  //           loop: true,
  //           rewind: true,
  //           autoplay: true,
  //           autoplayTimeout: 3000,
  //           nav: false,
  //           mouseDrag: true,
  //           touchDrag: true,
  //           navText: [''],
  //           dots: false,      
  //           items: items,
  //           responsiveRefreshRate: 200,
  //           responsive: {
  //               0: { items: 1 },
  //               300: { items: ((items - 3) > 1) ? (items - 3) : 1,
  //                       margin: 10,
  //                   },
  //               426: { items: ((items - 2) > 1) ? (items - 2) : 1,
  //                      margin: 10,
  //                   },
  //               681: { items: ((items - 1) > 1) ? (items - 1) : 1,
  //                     margin: 10,
  //                   },
  //               992: { items: ((items - 1) > 1) ? (items - 1) : 1,
  //                       margin: 10,
  //                   },
  //               1200: { items: items,
  //                       margin: 10,
  //                     }
  //           }
  //       };
  //       if (directioninsta == 'rtl') sliderOptions['rtl'] = true;
  //       $('#instagram-feed').owlCarousel(sliderOptions);
  //   }

    function instagramSlider() {
        const directioninsta = $('html').attr('dir');
        $('#instagram-feed').each(function () {
            const sliderOption = {
                infinite: false,
                autoplay:true,
                autoplaySpeed:3000,
                vertical:false,
                verticalSwiping:false,
                slidesToShow: 1,
                slidesToScroll: 1,
                slidesPerRow: 3,
                rows: 2,
                prevArrow: '',
                nextArrow: '',
                responsive: [
                    {
                        breakpoint: 992,
                        settings: {
                            slidesPerRow: 8,
                            rows: 2,
                        }
                    },
                    {
                      breakpoint: 601,
                          settings: {
                              slidesPerRow: 6,
                              rows: 2,
                          }
                    },
                    {
                        breakpoint: 481,
                        settings: {
                            slidesPerRow: 5,
                            rows: 2,
                        }
                    },
                    {
                        breakpoint: 376,
                        settings: {
                            slidesPerRow: 4,
                            rows: 2,
                        }
                    }
                ]
            };
            if (directioninsta == 'rtl') sliderOption['rtl'] = true;
            $(this).slick(sliderOption);
        });
    }

    if (status) {
        $.instagramFeed({
            "username": username,
            "display_profile": false,
            "display_biography": false,
            "display_gallery": true,
            'callback': function(data) {
              if (data) {
                const result = (data.edge_owner_to_timeline_media || data.edge_hashtag_to_media)
                if (result && result.edges) {
                  if (data.is_private) {
                    console.log('PRIVATE')
                  } else {
                    result.edges.forEach((item, i) => {
                      $( "#instagram-feed" ).append( $(`
                        <a class="insta" href="https://www.instagram.com/p/${item.node.shortcode}" target="_blank" style="display: block;">
                          <div class="inner1">
                            <img src="${item.node.thumbnail_src}" alt="Test" class="img-responsive" />
                          </div>
                          <i class="fa fa-instagram"></i>
                        </a>
                      `) )
                      if (i == (result.edges.length - 1)) { // LAST
                        instagramSlider();
                      }
                    });
                  }
                }
              }
            },
            "styling": true,
            "items": count,
            "items_per_row": 4,
            "margin": 1
        });
    }
</script>
