<div style="position: relative; max-height: 600px; overflow: hidden;">
    <sly-iw-gallery ref="{{ widget_id }}" iw-widget-id="{{ widget_id }}" :options="{'isModalWindow': {{ is_modal }}}"
        :actions="{
        'init': {
            'dataSource': '{{ init_data_source }}',
        },
        {% if click_handled %}
        'chart-click': {
            'key': 'explore',
            'dataSource': '{{ click_data_source }}',
            'galleryId': '{{ click_gallery_id }}',
            'limit': {{ click_gallery_items_limit }},
        },
        {% endif %}
    }" :command="command" :data="data">
        {% if image_left_header %}
        <span slot="image-left-header">
            {{ image_left_header }}
        </span>
        {% endif %}
    </sly-iw-gallery>


    {% if show_all_button %}
    <!-- Gradient overlay -->
    <div
        style="position: absolute; z-index: 100; bottom: 20px; width: 100%; height: 100px; background: linear-gradient(to top, rgba(255, 255, 255, 1), transparent);">
    </div>
    <div
        style="position: absolute; z-index: 100; bottom: 0; width: 100%; height: 20px; background: rgba(255, 255, 255, 1);">
    </div>

    <!-- 'Explore more' button -->
    <div style="position: absolute; bottom: 20px; z-index: 101; display: flex; justify-content: center; width: 100%">
        <el-button iw-widget-id="btn-1" type="primary" @click="command({
                  method: 'update-gallery',
                  payload: {
                    data: {
                      'key': 'explore',
                      'limit': {{ click_gallery_items_limit}},
                      'dataSource': '{{ click_data_source }}',
                    },
                    'galleryId': '{{ click_gallery_id }}',
                  },
                  internalCommand: true
                })">Explore more</el-button>
    </div>
    {% endif %}
</div>