{{#imageArray}}
{{^image}}
<li style="max-height: 471px;">
    <div class="message">
      <p id="creativeMessage{{number}}" class='creativeMessage'>{{#message}}{{message}}{{/message}}{{^message}}Your Message Goes here.{{/message}}</p>
    </div>
    <a target='_blank' id='creativePreview-previewLink' class='creativePreview-link creativePreview-linkPreview creativePreview-linkPreview-background'>
        <iframe src={{url}} id="creativePreview-previewUpload" name='creative_preview' scrolling='no'></iframe>
    </a>
    <div class="preview-content facebook-content carousel-content">
        <h4 class="ad-link">
          <a class="creativePreview-link" id="creativeTitle{{number}}" target="_blank">
            {{#title}}{{title}}{{/title}}
            {{^title}}Your ad title goes here{{/title}}
          </a>
        </h4> 
        <p class="creativePreview-link creativePreview-body" id="creativeBody{{number}}">
          {{#bodyText}}{{bodyText}}{{/bodyText}}
          <!-- {{^bodyText}}This is the body text. Explain your product or say something clever about your creative.{{/bodyText}} -->
        </p>
        <div class="action-container">
          <div class="actionButton hidden" id="actionButton{{number}}">
            <a role="button" href="" target="_blank" rel="noopener nofollow" data-lynx-mode="async">
              {{#callToActionType}}{{callToActionType}}{{/callToActionType}}
              {{^callToActionType}}No Button{{/callToActionType}}
            </a>
          </div>
          <div class="url">
            <a target="_blank" href="" class="creativePreview-link" id="creativeDomain{{number}}">
              {{#displayUrl}}{{displayUrl}}{{/displayUrl}}
              {{^displayUrl}}Domain Name{{/displayUrl}}
            </a>
          </div>
        </div>
    </div>
    <div class="footer-preview">
        <img src="/assets/img/footer_preview.png"  style="max-width: 100%; max-height:fit-content"/>
    </div>
</li>
{{/image}}

{{#image}}
<li style="max-height: 471px;">
    <div class="message">
      <p id="creativeMessage{{number}}" class='creativeMessage'>{{#message}}{{message}}{{/message}}{{^message}}Your Message Goes here.{{/message}}</p>
    </div>
    <a target='_blank' id='creativePreview-previewLink' class='creativePreview-link creativePreview-linkPreview creativePreview-linkPreview-background'>
        <img src={{url}} id="creativePreview-previewUpload" class='creativePreview-preview' style='display:inline-block' />
    </a>
    <div class="preview-content facebook-content carousel-content">
        <h4 class="ad-link">
          <a class="creativePreview-link" id="creativeTitle{{number}}" target="_blank">
            {{#title}}{{title}}{{/title}}
            {{^title}}Your ad title goes here{{/title}}
          </a>
        </h4> 
        <p class="creativePreview-link creativePreview-body" id="creativeBody{{number}}">
          {{#bodyText}}{{bodyText}}{{/bodyText}}
          <!-- {{^bodyText}}This is the body text. Explain your product or say something clever about your creative.{{/bodyText}} -->
        </p>
        <div class="action-container">
          <div class="actionButton hidden" id="actionButton{{number}}">
            <a role="button" href="" target="_blank" rel="noopener nofollow" data-lynx-mode="async">
              {{#callToActionType}}{{callToActionType}}{{/callToActionType}}
              {{^callToActionType}}No Button{{/callToActionType}}
            </a>
          </div>
          <div class="url">
            <a target="_blank" href="" class="creativePreview-link" id="creativeDomain{{number}}">
              {{#displayUrl}}{{displayUrl}}{{/displayUrl}}
              {{^displayUrl}}Domain Name{{/displayUrl}}
            </a>
          </div>
        </div>
    </div>
    <div class="footer-preview">
        <img src="/assets/img/footer_preview.png"  style="max-width: 100%; max-height:fit-content"/>
    </div>
    
</li>
{{/image}}
{{/imageArray}}