{# Placement-aware live preview. Reuses the real ad partials inside containers
   that reproduce each page context; JS shows the pane for the selected
   placement and live-updates title/description/icon/image. Pass: form, preview_ad. #}
{% set initial = form.placement.data or 'landing' %}
<div class="card border-0 shadow-sm live-preview-shell">
  <div class="card-header border-0 px-4 py-3 d-flex align-items-center justify-content-between">
    <h2 class="h6 mb-0">Live preview</h2>
    <span class="badge text-bg-light border" data-preview-placement-badge>{{ initial|placement_label }}</span>
  </div>
  <div class="card-body p-0">

    <!-- Landing: full-width banner in the real landing container -->
    <div class="live-pane {{ 'd-none' if initial != 'landing' }}" data-preview-pane="landing">
      <div class="wysiwyg-stage wysiwyg-stage-landing">
        <div class="wysiwyg-landing-container">
          {% with ad = preview_ad %}{% include "advertisements/_ad_banner.html" %}{% endwith %}
        </div>
      </div>
    </div>

    <!-- Marketplace: banner between mock listing cards -->
    <div class="live-pane {{ 'd-none' if initial != 'marketplace' }}" data-preview-pane="marketplace">
      <div class="wysiwyg-stage wysiwyg-stage-marketplace">
        <div class="preview-mp-grid mb-2">
          {% for _ in range(4) %}
            <div class="preview-skel-card" aria-hidden="true">
              <div class="preview-skel-thumb"></div>
              <div class="preview-skel-line"></div>
              <div class="preview-skel-line short"></div>
            </div>
          {% endfor %}
        </div>
        <div class="preview-mp-banner">
          {% with ad = preview_ad %}{% include "advertisements/_ad_banner.html" %}{% endwith %}
        </div>
        <div class="preview-mp-grid mt-2">
          {% for _ in range(4) %}
            <div class="preview-skel-card" aria-hidden="true">
              <div class="preview-skel-thumb"></div>
              <div class="preview-skel-line"></div>
              <div class="preview-skel-line short"></div>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>

    <!-- Sidebar: card in a rail at the real sidebar width -->
    <div class="live-pane {{ 'd-none' if initial != 'sidebar' }}" data-preview-pane="sidebar">
      <div class="wysiwyg-stage wysiwyg-stage-rail">
        <div class="wysiwyg-sidebar-rail app-sidebar-body">
          {% with ad = preview_ad %}{% include "advertisements/_ad_sidebar.html" %}{% endwith %}
        </div>
      </div>
    </div>

    <!-- Chat: card inside the real chat panel + composer -->
    <div class="live-pane {{ 'd-none' if initial != 'chat' }}" data-preview-pane="chat">
      <div class="wysiwyg-stage wysiwyg-stage-rail">
        <div class="wysiwyg-chat-panel card shadow-sm border-0">
          <div class="chat-composer-wrap">
            {% with conversation = {'public_id': 'preview'},
                    messaging_state = {'unlock_size': 5, 'can_watch_ad': True},
                    rewarded_ad = preview_ad %}
              {% include "advertisements/_ad_rewarded.html" %}
            {% endwith %}
          </div>
        </div>
      </div>
    </div>

  </div>
</div>