{{#with data}}
{{#or showFirstTimeVideo stories.data.length}}
<div class="bs4--row">
<div class="bs4--col-12" id="{{@root/divStoriesHeader}}">
    <h3>{{title}}</h3>
</div>
<div class="bs4--col-12">
    <div id="{{@root/dom/divStories}}" class="frame">
        <ul class="list-unstyled slidee clearfix stories-list-container" >
            {{#if showFirstTimeVideo}}
            <li class="pull-left" id="{{@root/dom/liWhatsNew}}">
                <div class="hs-media-circle flex-column-container flex-center ps-r">
                    <a class="text-center pointer text-black no-hover ps-r" tabindex="">
                        <div class="hs-media-circle-img whats-new-circle">

                        </div>
                        <div class="whats-new-circle-hover hidden"></div>
                        <span class="no-wrap pt-5">New!</span>
                    </a>
                </div>
            </li>
            {{/if}}
            {{#each stories.data}}
            <li id="{{@root/dom/liStory}}_{{@index}}" data-index="{{@index}}" class="pull-left">
                <div class="hs-media-circle flex-column-container flex-center ps-r {{#if @last}}pr-0{{/if}} stories-list-container">
                    <a class="text-center pointer text-black no-hover ps-r" tabindex="0">
                        <div class="hs-media-circle-img empty-stories-circle pa-5" >
                            <img src="{{stories.[0].entityContent.keyFrameUrl}}" class="bs4--rounded-circle full-width full-height" height="59" width="59" 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>

</div>
</div>
{{else}}
    {{#if currentUser.permissions.paidAgent}}
    <div class="ph-15">
        <h3 class="mt-15">
            <span class="material-icons icon-flip-vertical align-bottom stories-list-did-you-know" aria-hidden="true" data-nosnippet>wb_incandescent</span>
            Did you know?
        </h3>
        <p class="text-light">See how you are connected to {{entity.name.first}} through past deals and mutual relationships.</p>
    </div>
    {{else or entity.uiSections.actionAddAgent entity.uiSections.actionRemoveAgent}}
    <div class="ph-15">
        <h3 class="mt-15">
            <span class="material-icons icon-flip-vertical align-bottom stories-list-did-you-know" aria-hidden="true" data-nosnippet>wb_incandescent</span>
            Did you know?
        </h3>
		{{#if entity.relationType.client}}
        <p class="text-light">You're connected to {{entity.name.first}}. Your private messages will be delivered instantly.</p>
        {{else}}
        <p class="text-light">Connect with {{entity.name.first}} to share homes, arrange tours, and send private messages.</p>
        {{/if}}
    </div>
    {{/if}}

{{/or}}
{{/with}}