dw-sheet-data-checker/templates/editor/preview.php

<div class="checker-preview container bg-light rounded">
    <div id="dummy">Fill Sheet URL first...</div>
    <div class="dw-checker-container" id="dw-checker-form">
        <div class="dw-checker-wrapper">
            <div class="dw-checker-title">Title</div>
            <div class="dw-checker-description"></div>
            <hr class="dw-checker-divider">
            <div class="dw-checker-form-fields"></div>
            <hr class="dw-checker-divider">
            <div class="dw-checker-buttons dw-checker-form-button">
                <button type="button" class="search-button"></button>
            </div>
        </div>
    </div>
    <div class="dw-checker-container" id="dw-checker-result" style="display:none;">
        <div class="dw-checker-wrapper">
            <div class="dw-checker-title">Title</div>
            <div class="dw-checker-description"></div>
            <hr class="dw-checker-divider">
            <div class="dw-checker-results"></div>
            <hr class="dw-checker-divider">
            <div class="dw-checker-buttons dw-checker-result-button">
                <button type="button" class="back-button"></button>
            </div>
        </div>
    </div>
    <div class="dw-checker-container" id="dw-checker-outside-results" style="display: none;">
        <div class="dw-checker-wrapper"></div>
    </div>
    <input type="hidden" id="post_id" value="<?= isset($_GET["post"]) &&
    isset($_GET["action"]) &&
    $_GET["action"] == "edit"
        ? $_GET["post"]
        : "" ?>">
</div>

<!-- Essential Handlebars templates for preview functionality -->

<!-- Handlebars Template for Fields -->
<script id="fields-template" type="text/x-handlebars-template">
    {{#each fields}}
    <div class="dw-checker-field">
        <label for="{{fieldId}}" style="color: {{fieldLabelColor}}; display: {{fieldDisplayLabel}};">{{fieldLabel}}</label>
        {{#if isTextField}}
            <input name="{{fieldId}}" placeholder="{{fieldPlaceholder}}"/>
        {{else if isSelectField}}
            <select name="{{fieldId}}" placeholder="{{fieldPlaceholder}}">
                <option value="" selected disabled>-- {{fieldPlaceholder}} --</option>
                {{#each uniqueValues}}
                    <option value="{{this}}">{{this}}</option>
                {{/each}}
            </select>
        {{/if}}
    </div>
    {{/each}}
</script>

<script id="vertical-table-template" type="text/x-handlebars-template">
    <div class="dw-checker-results-container">
        {{#each results}}
            <div class="result-page" data-page="{{@index}}">
                <table class="dw-checker-result-table">
                    <tbody>
                        {{#each this}}
                            <tr>
                                <th><span class="dw-checker-result-header">{{@key}}</span></th>
                                <td><span class="dw-checker-result-value">{{this}}</span></td>
                            </tr>
                        {{/each}}
                    </tbody>
                </table>
            </div>
        {{/each}}
    </div>
</script>

<script id="div-template" type="text/x-handlebars-template">
    <div class="dw-checker-results-container">
        {{#each results}}
            <div class="result-page" data-page="{{@index}}">
                <div class="dw-checker-result-container" data-pagination="{{@index}}">
                    {{#each this}}
                        <div class="dw-checker-result-div">
                            <div class="result-header">
                                <span class="dw-checker-result-header">{{@key}}</span>
                            </div>
                            <div class="result-value">
                                <span class="dw-checker-result-value">{{this}}</span>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
        {{/each}}
    </div>
</script>

<script id="standard-table-template" type="text/x-handlebars-template">
    <div class="dw-checker-results-container">
        <table class="dw-checker-result-table">
            <thead>
                {{#if results.[0]}}
                    <tr>
                        {{#each results.[0]}}
                            <th><span class="dw-checker-result-header">{{@key}}</span></th>
                        {{/each}}
                    </tr>
                {{/if}}
            </thead>
            <tbody>
                {{#each results}}
                    <tr>
                        {{#each this}}
                            <td><span class="dw-checker-result-value">{{this}}</span></td>
                        {{/each}}
                    </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
</script>

<!-- Card Template -->
<script id="cards-template" type="text/x-handlebars-template">
    <div class="dw-cards-container">
        {{#each results}}
            <div class="result-page" data-page="{{@index}}" style="display: none;">
                {{#each this}}
                    <div class="dw-card">
                        <div class="dw-card-item">
                            <h6 class="dw-card-title">{{@key}}</h6>
                            <p class="dw-card-value">{{this}}</p>
                        </div>
                    </div>
                {{/each}}
            </div>
        {{/each}}
    </div>
    <div class="pagination-controls">
        <button type="button" class="prev-page">Previous</button>
        <span class="current-page">Data 1</span>
        <button type="button" class="next-page">Next</button>
    </div>
    <hr>
    <div class="input-group mt-3">
        <span class="input-group-text" id="basic-addon2">Reset Preview Interval</span>
        <input type="number" id="preview-interval" class="form-control border text-end pe-2" aria-describedby="basic-addon2" value="10">
        <span class="input-group-text border" id="basic-addon2">seconds</span>
        <button class="btn btn-primary border-primary set-preview"><i class="bi bi-arrow-clockwise me-1"></i>Refresh</button>
    </div>
</script>