{{#with data}}
{{#if data.length}}
<div class="bs4--col-12" id="{{@root/divStoriesHeader}}">
    <h3 class="rew-small-heading bs4--text-uppercase">View My Stories</h3>
</div>
<div class="bs4--col-12 ">
    <div id="{{@root/dom/divStories}}" class="frame">
        <ul class="list-unstyled slidee clearfix stories-list-container" >

            {{#each data}}
            <li id="{{@root/dom/liStory}}_{{@index}}" data-index="{{@index}}" class="bs4--float-left">
                <div class="hs-media-circle  bs4--d-flex bs4--flex-column bs4--align-items-center bs4--position-relative {{#if @last}}bs4--pr-0{{/if}} stories-list-container">
                    <a class="bs4--text-center pointer bs4--text-black no-hover bs4--position-relative paint-first-font paint-item-selectable" tabindex="0">
                        <div class="hs-media-circle-img empty-stories-circle pa-5" >
                            <img src="{{stories.[0].entityContent.keyFrameUrl}}" class="img-circle full-width full-height" alt="" />
                        </div>
                        <div class="empty-stories-cirlce-hover hidden"></div>
                        <span class="no-wrap pt-5 stories-list-title">{{this.stories.[0].title}}</span>
                    </a>
                </div>
            </li>
            {{/each}}
        </ul>
    </div>
    <a class="pointer no-hover media-arrow-prev" tabindex="0">
        <i id="{{@root/dom/spanPreviousPage}}" class="material-icons disabled pointer" aria-hidden="true">
        chevron_left</i>
        <span class="sr-only">Previous</span>
    </a>
    <a class="pointer no-hover media-arrow-next" tabindex="0">
        <i id="{{@root/dom/spanNextPage}}" class="material-icons nextPrev pointer" aria-hidden="true">chevron_right</i>
        <span class="sr-only">Next</span>
    </a>
    <hr />
</div>
{{/if}}
{{/with}}