{{#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}}