{{ 'section-instagram-v3.css' | asset_url | stylesheet_tag }}

{% capture breakpoints %}
  {% if section.settings.limit >= 5 %}
    xo-breakpoints='
    {
      1200: {
        perView: {{ section.settings.limit | minus: 1}},
      },
      992: {
        perView: {{ section.settings.limit | minus: 2}},
      },
      576: {
        perView: 2,
      },
    }
    '
  {% else %}
    xo-breakpoints='
    {
      992: {
        perView: 3,
      },
      576: {
        perView: 2,
      },
    }
    '
  {% endif %}
{% endcapture %}

<section {% render 'section-attr' %}>
  <xo-container {% render 'section-layout' %}>
    <div class='instagram-v5__heading'>
      <xo-animate xo-cascade class='instagram-v5__icon'>
        {{ section.settings.icon_heading }}
      </xo-animate>
      <xo-animate xo-cascade>
        <h2 class='instagram-v5__title'>{{ section.settings.title }}</h2>
      </xo-animate>
      <xo-animate xo-cascade class='instagram-v5__description'>
        {{ section.settings.description }}
      </xo-animate>
    </div>
    <xo-animate xo-cascade>
      <xo-instagram
        xo-open-mode='{{ section.settings.open_mode }}'
        xo-access-token='{{section.settings.access_token}}'
      >
        <xo-carousel
          xo-per-view='{{ section.settings.limit }}'
          xo-gap='0'
          xo-loop
          xo-speed='2000'
          xo-hover-pause='true'
          {% if section.settings.auto_play %}
            xo-autoplay='5000'
          {% endif %}
          {{ breakpoints }}
        >
          <xo-carousel-inner>
            <xo-carousel-list class='instagram-v5__list'>
              {% if section.settings.access_token == blank %}
                {% assign slide_forloop = section.settings.limit | plus: 1 %}
                {% for i in (1..slide_forloop) %}
                  <xo-carousel-slide>
                    <div class='instagram-v5__item'>
                      <img src='{{ 'instagram' | append: i | append: '.jpg' | file_img_url: 'master' }}' class='instagram-v5__image' alt='instagram' width='1000' height='1000'>
                      <a href='https://www.instagram.com/' class='instagram-v5__image-layer' target='_blank'>
                        {{ section.settings.icon_image }}
                      </a>
                    </div>
                  </xo-carousel-slide>
                {% endfor %}
              {% else %}
                <xo-instagram-template>
                  <img class='instagram-v5__image' data-src='{ url }' alt='' width='1000' height='1000'>
                  <span class='instagram-v5__image-layer'>{{ section.settings.icon_image }}</span>
                </xo-instagram-template>
              {% endif %}
            </xo-carousel-list>
          </xo-carousel-inner>
        </xo-carousel>
      </xo-instagram>
    </xo-animate>
  </xo-container>
</section>

{% schema %}
{
  "name": "t:sections.instagram_v3.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "select",
      "id": "width",
      "label": "t:sections.all.width.label",
      "default": "box",
      "options": [
        {
          "value": "box",
          "label": "t:sections.all.width.options__1.label"
        },
        {
          "value": "wide",
          "label": "t:sections.all.width.options__2.label"
        },
        {
          "value": "fullwidth",
          "label": "t:sections.all.width.options__3.label"
        }
      ]
    },
    {
      "type": "html",
      "id": "icon_heading",
      "label": "t:sections.instagram_v3.settings.icon_heading.label",
      "default": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewbox=\"0 0 50 50\" fill=\"none\">\n  <g clip-path=\"url(#clip0_11_25)\">\n    <path d=\"M34.375 0H15.625C6.99687 0 0 6.99687 0 15.625V34.375C0 43.0031 6.99687 50 15.625 50H34.375C43.0031 50 50 43.0031 50 34.375V15.625C50 6.99687 43.0031 0 34.375 0ZM45.3125 34.375C45.3125 40.4062 40.4062 45.3125 34.375 45.3125H15.625C9.59375 45.3125 4.6875 40.4062 4.6875 34.375V15.625C4.6875 9.59375 9.59375 4.6875 15.625 4.6875H34.375C40.4062 4.6875 45.3125 9.59375 45.3125 15.625V34.375Z\" fill=\"url(#paint0_linear_11_25)\"></path>\n    <path d=\"M25 12.5C18.0969 12.5 12.5 18.0969 12.5 25C12.5 31.9031 18.0969 37.5 25 37.5C31.9031 37.5 37.5 31.9031 37.5 25C37.5 18.0969 31.9031 12.5 25 12.5ZM25 32.8125C20.6937 32.8125 17.1875 29.3063 17.1875 25C17.1875 20.6906 20.6937 17.1875 25 17.1875C29.3063 17.1875 32.8125 20.6906 32.8125 25C32.8125 29.3063 29.3063 32.8125 25 32.8125Z\" fill=\"url(#paint1_linear_11_25)\"></path>\n    <path d=\"M38.4375 13.2281C39.3574 13.2281 40.1031 12.4824 40.1031 11.5625C40.1031 10.6426 39.3574 9.89685 38.4375 9.89685C37.5176 9.89685 36.7719 10.6426 36.7719 11.5625C36.7719 12.4824 37.5176 13.2281 38.4375 13.2281Z\" fill=\"url(#paint2_linear_11_25)\"></path>\n  </g>\n  <defs>\n    <lineargradient id=\"paint0_linear_11_25\" x1=\"4.57703\" y1=\"45.4233\" x2=\"45.423\" y2=\"4.57672\" gradientunits=\"userSpaceOnUse\">\n      <stop stop-color=\"#FFC107\"></stop>\n      <stop offset=\"0.507\" stop-color=\"#F44336\"></stop>\n      <stop offset=\"0.99\" stop-color=\"#9C27B0\"></stop>\n    </lineargradient>\n    <lineargradient id=\"paint1_linear_11_25\" x1=\"16.1614\" y1=\"33.8386\" x2=\"33.8386\" y2=\"16.1614\" gradientunits=\"userSpaceOnUse\">\n      <stop stop-color=\"#FFC107\"></stop>\n      <stop offset=\"0.507\" stop-color=\"#F44336\"></stop>\n      <stop offset=\"0.99\" stop-color=\"#9C27B0\"></stop>\n    </lineargradient>\n    <lineargradient id=\"paint2_linear_11_25\" x1=\"37.2598\" y1=\"12.7404\" x2=\"39.6152\" y2=\"10.3848\" gradientunits=\"userSpaceOnUse\">\n      <stop stop-color=\"#FFC107\"></stop>\n      <stop offset=\"0.507\" stop-color=\"#F44336\"></stop>\n      <stop offset=\"0.99\" stop-color=\"#9C27B0\"></stop>\n    </lineargradient>\n    <clippath id=\"clip0_11_25\">\n      <rect width=\"50\" height=\"50\" fill=\"white\"></rect>\n    </clippath>\n  </defs>\n</svg>"
    },
    {
      "type": "html",
      "id": "icon_image",
      "label": "t:sections.instagram_v3.settings.icon_image.label",
      "default": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z\"/></svg>"
    },
    {
      "type": "text",
      "id": "title",
      "label": "t:sections.instagram_v3.settings.title.label",
      "default": "#inthistogether"
    },
    {
      "type": "text",
      "id": "description",
      "label": "t:sections.instagram_v3.settings.description.label",
      "default": "Make new memories at home! Follow us @foden for kid-friendly activities, coloring pages + more"
    },
    {
      "type": "text",
      "id": "access_token",
      "label": "t:sections.instagram_v3.settings.access_token.label",
      "info": "t:sections.instagram_v3.settings.access_token.info"
    },
    {
      "type": "select",
      "id": "open_mode",
      "label": "t:sections.instagram_v3.settings.open_mode.label",
      "default": "newtab",
      "options": [
        {
          "label": "t:sections.instagram_v3.settings.open_mode.option_1.label",
          "value": "modal"
        },
        {
          "label": "t:sections.instagram_v3.settings.open_mode.option_2.label",
          "value": "newtab"
        }
      ]
    },
    {
      "type": "range",
      "id": "limit",
      "min": 3,
      "max": 6,
      "step": 1,
      "label": "t:sections.instagram_v3.settings.limit.label",
      "default": 5
    },
    {
      "type": "checkbox",
      "id": "auto_play",
      "label": "t:sections.instagram_v3.settings.auto_play.label",
      "default": false
    },
    {
      "type": "header",
      "content": "t:sections.all.heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.color_scheme.label"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.all.bg_color.label"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.all.bg_gradient.label"
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.all.padding_top.label",
      "default": 50
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.all.padding_bottom.label",
      "default": 50
    }
  ],
  "presets": [
    {
      "name": "t:sections.instagram_v3.presets.name"
    }
  ]
}
{% endschema %}
