{{--
    Tab 2: Cards & Grids
    Holds N cards (each with its own Layout sub-tab and Grids sub-tab).
    Cards are added/deleted via the dedicated endpoints in stampcard_admin.js.
    Grids are added/deleted via stampcard_admin.js too. Editing a single grid
    opens the Edit-Grid modal (PATCH 9).
--}}

<div id="dsc-cards-host">
    {{-- Each card is cloned from #dsc-card-template by stampcard_admin.js --}}
</div>

<button type="button" id="dsc-add-card-btn" class="btn btn-block btn-outline-primary mt-3">
    + Add New Card
</button>

{{-- ============================================================ --}}
{{-- Card template — cloned per card by JS                        --}}
{{-- ============================================================ --}}
<template id="dsc-card-template">
    <div class="card mb-3 dsc-card" data-card-id="">
        <div class="card-header d-flex justify-content-between align-items-center">
            <strong>Card <span class="dsc-card-num"></span></strong>
            <div>
                <button type="button" class="btn btn-sm btn-outline-danger dsc-card-delete d-none">
                    <i class="fas fa-trash"></i> Delete Card
                </button>
            </div>
        </div>

        <div class="card-body">
            <ul class="nav nav-pills mb-3 dsc-card-subtabs">
                <li class="nav-item"><a class="nav-link active" data-dsc-subtab="grids"  href="javascript:void(0)">Grids</a></li>
                <li class="nav-item"><a class="nav-link" data-dsc-subtab="layout" href="javascript:void(0)">Layout</a></li>
            </ul>

            <div class="tab-content">

                {{-- ===== Grids sub-tab (default visible) ===== --}}
                <div class="tab-pane fade show active dsc-pane-grids">
                    <div class="table-responsive">
                        <table class="table table-sm dsc-grids-table">
                            <thead>
                                <tr>
                                    <th style="width:5rem">Grid ID</th>
                                    <th style="width:8rem">Actions</th>
                                    <th>Module</th>
                                    <th>Incomplete</th>
                                    <th>Pending</th>
                                    <th>Rejected</th>
                                    <th>Completed</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-primary dsc-add-grid">
                        + Add New Grid to this Card
                    </button>
                </div>

                {{-- ===== Layout sub-tab ===== --}}
                <div class="tab-pane fade dsc-pane-layout">
                    <div class="form-row">

                        {{-- LEFT — Card Background field + LARGE inline preview of the card --}}
                        <div class="col-md-7">
                            <div class="form-group">
                                <label><strong>Card Background</strong></label>
                                <div class="input-group">
                                    <input type="text" class="form-control dsc-bg-url"
                                           placeholder="/assets/images/...png" readonly>
                                    <div class="input-group-append">
                                        <label class="btn btn-outline-secondary mb-0">
                                            Browse
                                            <input type="file" class="d-none dsc-bg-upload" accept="image/*">
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="text-muted small text-uppercase mb-1">Layout Preview</div>
                            <div class="dsc-card-preview-inline"></div>
                        </div>

                        {{-- RIGHT — Layout Type, Grids per Stampcard, Grid Columns OR Grid Size + Per-Grid Coordinates table --}}
                        <div class="col-md-5">
                            <div class="form-group">
                                <label><strong>Layout Type</strong></label>
                                <div class="form-check">
                                    <input class="form-check-input dsc-layout-type" type="radio" value="grid">
                                    <label class="form-check-label">Grid Based</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input dsc-layout-type" type="radio" value="map">
                                    <label class="form-check-label">Map Based</label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label><strong>Grids per Stampcard</strong></label>
                                <input type="number" class="form-control dsc-grid-count"
                                       readonly tabindex="-1">
                                <small class="form-text text-muted">
                                    Auto-derived from the grids configured on this card.
                                </small>
                            </div>

                            {{-- Grid-based fields --}}
                            <div class="dsc-layout-grid">
                                <div class="form-group">
                                    <label><strong>Grid Columns</strong></label>
                                    <input type="number" min="1" class="form-control dsc-columns">
                                </div>
                            </div>

                            {{-- Map-based fields --}}
                            <div class="dsc-layout-map d-none">
                                <div class="form-group">
                                    <label><strong>Grid Size (% of card width)</strong></label>
                                    <input type="number" step="0.1" min="0" class="form-control dsc-grid-size">
                                </div>
                                <div class="form-group">
                                    <label><strong>Per-Grid Coordinates (X%, Y%)</strong></label>
                                    <table class="table table-sm dsc-coords-table">
                                        <thead>
                                            <tr><th>Grid</th><th>X (%)</th><th>Y (%)</th></tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                    <small class="text-muted">One row per grid in this card.</small>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

{{-- Grid-row template inside a card (read-only summary; Edit opens the modal). --}}
<template id="dsc-grid-row-template">
    <tr data-grid-pk="" data-grid-id="">
        <td><span class="dsc-row-grid-id"></span></td>
        <td>
            <button type="button" class="btn btn-xs btn-info dsc-row-edit"><i class="fas fa-edit"></i></button>
            <button type="button" class="btn btn-xs btn-danger dsc-row-delete"><i class="fas fa-trash"></i></button>
        </td>
        <td><span class="dsc-row-module text-muted small"></span></td>
        <td><img class="dsc-row-thumb" data-st="incomplete" alt=""></td>
        <td><img class="dsc-row-thumb" data-st="pending" alt=""></td>
        <td><img class="dsc-row-thumb" data-st="rejected" alt=""></td>
        <td><img class="dsc-row-thumb" data-st="completed" alt=""></td>
    </tr>
</template>

{{-- Coords-row template (one per grid, in map mode). --}}
<template id="dsc-coord-row-template">
    <tr data-grid-id="">
        <td><span class="dsc-coord-label"></span></td>
        <td><input type="number" step="0.1" min="0" max="100" class="form-control form-control-sm dsc-coord-x"></td>
        <td><input type="number" step="0.1" min="0" max="100" class="form-control form-control-sm dsc-coord-y"></td>
    </tr>
</template>

<style>
    .dsc-row-thumb { 
        max-width: 60px; max-height: 60px; 
    }
    .dsc-card-subtabs .nav-link.active { 
        background: #17a2b8; color: white; 
    }
    .dsc-card-preview-inline {
        background: #f7f7f7;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        padding: 14px;
        position: relative;
        min-height: 360px;
        aspect-ratio: 1 / 1;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
    .dsc-card-preview-inline:empty::before {
        content: "Upload a Card Background and pick a Layout Type to see a preview.";
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        color: #999; font-size: 0.85rem; text-align: center; padding: 1rem;
    }
</style>