{% block cms_element_bc_instagram_widget %}

    {% set title = element.config.title.value %}
    {% set subTitle = element.config.subTitle.value %}
    {% set username = element.config.username.value %}
    {% set posts = element.data.posts %}

    {% set subtitleColor = element.config.subtitleColor.value %}
    {% set usernameColor = element.config.usernameColor.value %}
    {% set mainHeadingColor = element.config.mainHeadingColor.value %}

    {% if posts|length > 0 %}
        {% block cms_element_bc_instagram_widget_wrapper %}
            <div class="instagram-widget-wrapper" data-bc-instagram-widget="true">
                {% block cms_element_bc_instagram_widget_wrapper_container %}
                    <div class="container">
                        {% if title %}
                            <h3 class="bc-insta-title" style="color: {{ mainHeadingColor }};">{{ title }}</h3>
                        {% endif %}
                        <p class="bc-insta-username" style="color:{{ usernameColor }};">@{{ username }}</p>
                        {% if subTitle %}
                            <p class="bc-insta-subtitle" style="color: {{ subtitleColor }};">{{ subTitle }}</p>
                        {% endif %}
                    </div>
                {% endblock %}

                {% block cms_element_bc_instagram_widget_wrapper_row %}
                    <div class="row">
                        {% for post in posts %}
                            {% block cms_element_bc_instagram_widget_wrapper_post %}
                                <div class="col-12 col-sm-6 col-md-6 col-lg-3 insta-post-box" data-post-time="{{ post.timestamp }}" data-post-type="{{post.media_type}}">
                                    <a href="{{ post.permalink }}" target="_blank">
                                        {% if post.media_type == 'VIDEO' %}
                                            <video class="img-fluid insta-video"
                                                muted
                                                loop
                                                playsinline
                                                preload="metadata"
                                                bc-data-autoplay
                                            >
                                                <source src="{{ post.media_url }}" type="video/mp4">
                                                Your browser does not support the video tag.
                                            </video>
                                        {% else %}
                                            <img class="img-fluid" src="{{ post.media_url }}" alt="{{ post.caption ? post.caption : post.username }}">
                                        {% endif %}
                                        <div class="insta-box-overlay">
                                            <img src="{{ asset('/storefront/assets/images/icons/instagram.svg', '@BrandCrockAquaTheme') }}" alt="instagram-icon" height="10" width="10">
                                        </div>
                                    </a>
                                </div>
                            {% endblock %}
                        {% endfor %}
                    </div>
                {% endblock %}
            </div>
        {% endblock %}
    {% else %}
        {% block cms_element_bc_instagram_widget_errors %}
            <div class="col-md-12 text-center">
                <h2>{{ element.extensions.errorMessage.response.error.code }}</h2>
                <h4>{{ element.extensions.errorMessage.response.error.type }}</h4>
                <p> {{ element.extensions.errorMessage.response.error.message|raw }} </p>
            </div>
        {% endblock %}
    {% endif %}
{% endblock %}