{{#with data.[0]}}
    {{#compare type_ "==" "HSPlayVideoAdUnit"}}
        <video id="{{@root/dom/video}}" class="img-responsive" controls playsinline autoplay muted width="100%">
            <source src="{{url}}" type="application/x-mpegURL">
            {{#if urlMp4}}
            <source src="{{urlMp4}}" type="video/mp4">
            {{/if}}
        </video>
        {{else compare type_ "==" "HSOpenURLAdUnit"}}
            <a class="pointer" href="{{url}}" id="{{@root/dom/openUrl}}">
                <img class="popup-ad-img img-responsive" src="{{imageURLFormat.screenTakeover}}" alt="{{imageAltText}}">
            </a>
        {{else compare type_ "==" "HSSurveyAdUnit"}}
        <div class="survey-question-container">
            {{#each surveyQuestions}}
            <div id="{{@root/dom/surveyQuestion}}_{{@index}}" {{#unless @first}}class="hidden"{{/unless}}>
            {{#compare  ../surveyQuestions.length ">" 1}}
            <div class="bg-hs-blue text-white ph-20 survey-question-progress-bar visible-xs">{{math @index "+" 1}} of {{../surveyQuestions.length}}</div>
            {{/compare}}
                <div class="bg-hs-blue text-white text-center survey-question pt-15 pb-20 ph-20">
                    {{question}}
                    {{#compare  ../surveyQuestions.length ">" 1}}
                    <span class="text-white pull-right pl-20 hidden-xs survey-question-progress-bar">{{math @index "+" 1}} of {{../surveyQuestions.length}}</span>
                    {{/compare}}
                </div>
                <div class="row survey-answers-row">
                    {{#each answers}}
                    <div class="col-xs-12 col-sm-6 flex-row-container flex-justify-center">
                        <button class="btn btn-outline btn-round answer-button text-hs-blue pointer full-width" id="{{@root/dom/answer}}_{{@index}}" data-answer-id="{{@index}}">{{this}}</button>
                    </div>
                    {{/each}}
                </div>
            </div>
            {{/each}}
        </div>
    {{/compare}}
{{/with}}
{{#with data}}
    {{#unless isCitysnap}}
        {{#compare type_ "==" "HSHomesAgentRedirect"}}
        <div id="{{@root/dom/banner}}" class="redirect-header-banner-container bs4--d-none">
            {{#if this.currentUser.user.homesRedirectDetails}}
                {{#with this.currentUser.user.homesRedirectDetails}}
                    {{#if status.none}}
                    <div class="redirect-header-banner">
                        <div class="bs4--container">
                            <div class="bs4--row bs4--justify-content-center">
                                <div class="bs4--col-11 bs4--col-sm-auto">
                                    <div class="bs4--row bs4--justify-content-center">
                                        <div class="bs4--col-12 bs4--col-sm-auto bs4--text-center bs4--text-sm-left">
                                            {{#if @root/data/currentUser/user/permissions/paidAgent}}
                                            All Homesnap Pro data has been migrated to Homes Pro, the upgraded version of Homesnap Pro.<br/>
                                            {{else}}
                                            All Homesnap data has been migrated to Homes.com, the upgraded version of Homesnap.<br/>
                                            {{/if}}
                                            <span>Note: The Homes.com password is the same as your Homesnap password.</span>
                                        </div>
                                        <div class="bs4--col-12 bs4--col-sm-auto bs4--py-2">
                                            <button id="{{@root/dom/goToHomes}}" class="bs4--btn-homes-orange go-to-homes">Go To Homes.com</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="bs4--col-1 bs4--col-sm-auto bs4--p-0 bs4--justify-content-center bs4--align-self-center">
                                    <a id="{{@root/dom/bannerClose}}" class="go-to-homes-close">X</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{/if}}
                    {{#if (or status.redirectNow (compare redirectDate.agoAsDays ">=" 0))}}
                        {{#if @root/data/currentUser/user/permissions/paidAgent}}
                        <div class="redirect-header-banner">
                            <div>
                                <img src="{{paths 'img' base='main'}}/homes_com/homes_pro.png" alt="Homes.com" class="bs4--img-fluid bs4--mx-auto bs4--mb-5 bs4--d-block" width="256" height="49" loading="lazy" />
                            </div>
                            <div class="font-20 bs4--font-weight-bold bs4--text-center bs4--mx-5 bs4--mb-3">
                                Homesnap Pro is no longer available in your MLS. Welcome to Homes Pro, the upgrade to Homesnap Pro
                            </div>
                            <div class="font-16 bs4--font-weight-bold bs4--text-center bs4--mx-5 bs4--mb-3">
                                All your data has been migrated to Homes Pro
                            </div>
                            <div class="font-18 bs4--font-weight-light bs4--position-relative gradient-section bs4--mb-3">
                                <ul class="homes-com-list-items bs4--mx-5 bs4--py-3 bs4--text-left">
                                    <li class="bs4--mb-2">Manage your current clients and new leads with ease from Homes.com</li>
                                    <li class="bs4--mb-2">Send clients property recommendations through Homes.com</li>
                                    <li class="bs4--mb-2">Save searches and set alerts on behalf of your clients</li>
                                    <li class="bs4--mb-2">See how your listings are performing</li>
                                    <li class="bs4--mb-2">The Homes.com password is the same as your Homesnap password</li>
                                </ul>
                            </div>
                            <div class="bs4--col-12 bs4--col-sm-12 bs4--col-md-12 bs4--mb-3 bs4--text-center">
                                <button id="{{@root/dom/goToHomes}}" class="bs4--btn bs4--btn-sm bs4--btn-homes-orange">Continue to Homes.com</button>
                            </div>
                        </div>
                        {{else}}
                        <div class="redirect-header-banner">
                            <div>
                                <img src="{{paths 'img' base='main'}}/homes_com/homes.png" alt="Homes.com" class="bs4--img-fluid bs4--mx-auto bs4--mb-5 bs4--d-block" width="256" height="60" loading="lazy" />
                            </div>
                            <div class="font-20 bs4--font-weight-normal bs4--text-center bs4--mx-5 bs4--mb-3">
                                Homesnap has been upgraded to Homes.com
                            </div>
                            <div class="font-14 bs4--font-weight-normal bs4--text-center bs4--mx-5 bs4--mb-3">Note: The Homes.com password is the same as your Homesnap password.</div>
                            <div class="bs4--col-12 bs4--col-sm-12 bs4--col-md-12 bs4--mb-3 bs4--text-center">
                                <button id="{{@root/dom/goToHomes}}" class="bs4--btn bs4--btn-sm bs4--btn-homes-orange">Continue to Homes.com</button>
                            </div>
                        </div>
                        {{/if}}
                        {{else if (or status.redirectSoon (compare redirectDate.agoAsDays "<=" -30))}}
                        <div class="redirect-header-banner">
                            <div class="bs4--container">
                                <div class="bs4--row bs4--justify-content-center">
                                    <div class="bs4--col-12 bs4--col-sm-auto bs4--py-2">
                                        <button id="{{@root/dom/goToHomes}}" class="bs4--btn-homes-orange go-to-homes">Go To Homes.com</button>
                                    </div>
                                    <div class="bs4--col-12 bs4--col-sm-auto bs4--text-center bs4--text-sm-left">
                                        <span>The last day Homesnap will be available for your MLS will be <span class="redirect-end-date">{{redirectDate.monthDayYear}}</span></span><br/>
                                        <span>Note: The Homes.com password is the same as your Homesnap password.</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {{/if}}
                {{/with}}
            {{else}}
                <div class="redirect-header-banner">
                    <div class="bs4--container">
                        <div class="bs4--row bs4--justify-content-center">
                            <div class="bs4--col-11 bs4--col-sm-auto">
                                <div class="bs4--row bs4--justify-content-center">
                                    <div class="bs4--col-12 bs4--col-sm-auto bs4--text-center bs4--text-sm-left">
                                        {{#if this.currentUser.user.permissions.paidAgent}}
                                        All Homesnap Pro data has been migrated to Homes Pro, the upgraded version of Homesnap Pro.<br/>
                                        {{else}}
                                        All Homesnap data has been migrated to Homes.com, the upgraded version of Homesnap.<br/>
                                        {{/if}}
                                        <span>Note: The Homes.com password is the same as your Homesnap password.</span>
                                    </div>
                                    <div class="bs4--col-12 bs4--col-sm-auto bs4--py-2">
                                        <button id="{{@root/dom/goToHomes}}" class="bs4--btn-homes-orange go-to-homes">Go To Homes.com</button>
                                    </div>
                                </div>
                            </div>
                            <div class="bs4--col-1 bs4--col-sm-auto bs4--p-0 bs4--justify-content-center bs4--align-self-center">
                                <a id="{{@root/dom/bannerClose}}" class="go-to-homes-close">X</a>
                            </div>
                        </div>
                    </div>
                </div>
            {{/if}}
        </div>
        {{else}}
            <div>
                <img src="{{paths 'img' base='main'}}/homes_com/homes.png" alt="Homes.com" class="bs4--img-fluid bs4--mx-auto bs4--my-5 bs4--d-block" width="256" height="60" loading="lazy" />
            </div>
            <div class="font-20 bs4--font-weight-normal bs4--text-center bs4--mx-5 bs4--mb-3">
                Homes.com is now the better solution to search for homes and agents. Continue your search at Homes.com
            </div>
            <div class="bs4--col-12 bs4--col-sm-12 bs4--col-md-12 bs4--my-5 bs4--text-center">
                <button id="{{@root/dom/continue}}" class="bs4--btn bs4--btn-sm bs4--btn-homes-orange">Continue to Homes.com</button>
            </div>
        {{/compare}}
    {{/unless}}
{{/with}}
<style>
    .redirect-now-modal .modal-header .close {
        display: none;
    }
    .popup-homes-redirect .modal-header {
        display: none;
    }
    .modal-body {
        padding: 1.5rem;
    }
    .redirect-header-banner {
        background: #fff;
        z-index: 100;
        width: 100%;
        position: fixed;
        padding: 1.6rem 1.6rem 1rem 1.6rem;
        text-align: center;
    }
    .modal-content .redirect-header-banner {
        position: relative;
    }
    .go-to-homes {
        border-radius: 1.9rem;
        border: none;
        line-height: 3.6rem;
        padding: 0 2.4rem;
        display: inline-block;
        white-space: nowrap;
    }
    .go-to-homes-close, .go-to-homes-close:hover {
        padding: 1.6rem;
        font-size: 1rem;
        font-weight: 600;
        color: #666;
        text-decoration: none;
        display: inline-block;
        transform: scaleX(125%);
        text-decoration: none !important;
        cursor: pointer;
        border-left: 1px solid #E7E7E7;
    }
    .go-to-homes + span, span + .go-to-homes {
        margin: 0 0 0 1.6rem;
    }
    .redirect-end-date {
        font-weight: 600;
        color: #EB7100;
    }
</style>