{{--
    Live Preview rail:
    All rendering is done by stampcard_admin.js → renderPreview(), which
    reads LIVE form field values (input/change events bubble up) and falls
    back to the server-side response if a field is empty.

    Three slots in this rail that JS populates:
      #dsc-preview-stage    — the visual card (CSS grid OR map background)
      #dsc-preview-rewards  — the reward-icon strip below the card
      #dsc-preview-popup    — the "Status Popup Message" card body
--}}

<div class="dsc-preview-rail">

    <div class="card mb-3">
        <div class="card-header py-2"><strong>Preview</strong></div>
        <div class="card-body">
            <div class="form-row mb-3">
                <div class="form-group col-6 mb-0">
                    <label class="small mb-1"><strong>Card</strong></label>
                    <select id="dsc-preview-card" class="form-control form-control-sm">
                        {{-- options injected by stampcard_admin.js --}}
                    </select>
                </div>
                <div class="form-group col-6 mb-0">
                    <label class="small mb-1"><strong>Status</strong></label>
                    <select id="dsc-preview-status" class="form-control form-control-sm">
                        <option value="incomplete">Incomplete</option>
                        <option value="pending" selected>Pending</option>
                        <option value="rejected">Rejected</option>
                        <option value="completed">Completed</option>
                    </select>
                </div>
            </div>

            <div class="text-muted small mb-1 text-uppercase">Stampcard</div>
            <div id="dsc-preview-stage" class="dsc-preview-stage">
                {{-- Rendered by JS — either a CSS grid of cells or a map
                     background with absolutely-positioned stamps. --}}
            </div>
            <div id="dsc-preview-rewards" class="dsc-preview-rewards"></div>
            <div id="dsc-preview-meta" class="text-center small mt-2 text-muted"></div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header py-2"><strong>Status Popup Message</strong></div>
        <div id="dsc-preview-popup" class="card-body text-center">
            <small class="text-muted">No message configured for this status.</small>
        </div>
    </div>

</div>

<style>
    /* Sticky on large screens so the preview follows the form as you scroll. */
    @media (min-width: 992px) {
        .dsc-preview-rail { position: sticky; top: 1rem; }
    }

    .dsc-preview-stage {
        background: #f7f7f7;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        padding: 8px;
        position: relative;
        min-height: 220px;
    }

    /* ---- Grid-based layout ---- */
    .dsc-preview-grid {
        display: grid;
        gap: 6px;
    }
    .dsc-preview-cell {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        color: #555;
    }
    .dsc-preview-cell[data-status="completed"] { background: #d4edda; border-color: #b6dfbf; }
    .dsc-preview-cell[data-status="pending"]   { background: #fff3cd; border-color: #ffe69c; }
    .dsc-preview-cell[data-status="rejected"]  { background: #f8d7da; border-color: #f1b0b7; }
    .dsc-preview-cell[data-status="incomplete"]{ background: #f8f9fa; }

    /* ---- Map-based layout ---- */
    .dsc-preview-map {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .dsc-preview-stamp {
        position: absolute;
        background: #fff;
        border: 2px solid #999;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        color: #555;
        transform: translate(-50%, -50%);
        min-width: 24px;
        min-height: 24px;
    }
    .dsc-preview-stamp[data-status="completed"] { background: #28a745; color: #fff; border-color: #28a745; }
    .dsc-preview-stamp[data-status="pending"]   { background: #ffc107; color: #333; border-color: #ffc107; }
    .dsc-preview-stamp[data-status="rejected"]  { background: #dc3545; color: #fff; border-color: #dc3545; }

    /* ---- Reward icon strip ---- */
    .dsc-preview-rewards {
        display: flex; gap: 6px; justify-content: center;
        flex-wrap: wrap; margin-top: 10px;
    }
    .dsc-preview-reward {
        width: 36px; height: 36px; border-radius: 50%;
        background: #e9ecef;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.8rem; color: #6c757d;
        position: relative;
    }
    .dsc-preview-reward.active {
        background: #17a2b8; color: #fff;
    }
    .dsc-preview-reward small {
        position: absolute; bottom: -16px; left: 0; right: 0;
        text-align: center; font-size: 0.65rem; color: #6c757d;
    }
</style>