<div class="modal fade" id="relationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered relation-designer-modal">
        <div class="modal-content">
            <div class="modal-header relation-modal-header py-2">
                <div>
                    <h6 class="modal-title mb-0"><i class="bi bi-link-45deg me-2"></i>Create Relation</h6>
                    <span class="relation-modal-subtitle">Connect a master table to its detail table</span>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close create relation"></button>
            </div>
            <div class="modal-body relation-modal-body">
                <div class="relation-help relation-help-compact" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Hover any relation option for guidance. Relations control generated navigation, page placement, display order, and optional database-level consistency.">
                    <i class="bi bi-question-circle"></i>
                    <span>Hover settings for help · Master shows details · Details can show master record · FK is optional</span>
                </div>

                <div class="relation-map">
                    <div class="relation-node relation-node-master">
                        <div class="relation-node-title">
                            <span><i class="bi bi-table me-1"></i>Master</span>
                            <small>Parent record</small>
                        </div>
                        <label class="relation-control">
                            <span>Table</span>
                            <input type="text" class="form-control form-control-sm" id="relMasterTable" readonly>
                        </label>
                        <label class="relation-control">
                            <span>Field</span>
                            <select class="form-select form-select-sm" id="relMasterField"></select>
                        </label>
                    </div>

                    <div class="relation-flow" aria-hidden="true">
                        <span class="relation-flow-line"></span>
                        <span class="relation-flow-icon"><i class="bi bi-arrow-right"></i></span>
                    </div>

                    <div class="relation-node relation-node-detail">
                        <div class="relation-node-title">
                            <span><i class="bi bi-table me-1"></i>Detail</span>
                            <small>Child records</small>
                        </div>
                        <label class="relation-control">
                            <span>Table</span>
                            <input type="text" class="form-control form-control-sm" id="relDetailTable" readonly>
                        </label>
                        <label class="relation-control">
                            <span>Field</span>
                            <select class="form-select form-select-sm" id="relDetailField"></select>
                        </label>
                    </div>
                </div>

                <div class="relation-section">
                    <div class="relation-section-title">
                        <span>Display option</span>
                        <small>How detail records appear in the generated app</small>
                    </div>
                    <div class="relation-choice-grid">
                        <label class="relation-choice" for="relDispInline">
                            <input class="form-check-input" type="radio" name="relDisplayOption" value="inline" id="relDispInline" checked>
                            <span><i class="bi bi-layout-text-sidebar-reverse"></i><strong>Inline</strong><small>Show detail rows on the page</small></span>
                        </label>
                        <label class="relation-choice" for="relDispPopup">
                            <input class="form-check-input" type="radio" name="relDisplayOption" value="popup" id="relDispPopup">
                            <span><i class="bi bi-window"></i><strong>Popup</strong><small>Open details in a modal</small></span>
                        </label>
                        <label class="relation-choice" for="relDispIcon">
                            <input class="form-check-input" type="radio" name="relDisplayOption" value="icon" id="relDispIcon">
                            <span><i class="bi bi-grid-3x3-gap"></i><strong>Icon</strong><small>Show a compact action icon</small></span>
                        </label>
                    </div>
                </div>

                <div class="relation-section relation-master-settings">
                    <div class="relation-section-title">
                        <span><i class="bi bi-link-45deg me-1"></i>Master link behavior</span>
                        <small>Controls links and previews shown from master records</small>
                    </div>
                    <div class="relation-master-grid">
                        <label class="relation-option-card" for="relShowDetailsLinks">
                            <input class="form-check-input" type="checkbox" id="relShowDetailsLinks" checked>
                            <span>
                                <strong>Show details links on list page</strong>
                                <small>Expose navigation from master rows to their detail records.</small>
                            </span>
                        </label>
                        <div class="relation-link-mode-card">
                            <div class="relation-option-heading">Details link style</div>
                            <label class="relation-mini-choice" for="relDetailsLinkSingle">
                                <input class="form-check-input" type="radio" name="relDetailsLinkMode" value="single" id="relDetailsLinkSingle" checked>
                                <span>Single link for all details</span>
                            </label>
                            <label class="relation-mini-choice" for="relDetailsLinkIndividual">
                                <input class="form-check-input" type="radio" name="relDetailsLinkMode" value="individual" id="relDetailsLinkIndividual">
                                <span>Individual detail links</span>
                            </label>
                        </div>
                        <label class="relation-option-card" for="relHideDetailsNoRecords">
                            <input class="form-check-input" type="checkbox" id="relHideDetailsNoRecords">
                            <span>
                                <strong>Hide details if no child records exist</strong>
                                <small>Do not show empty detail links or sections.</small>
                            </span>
                        </label>
                        <label class="relation-option-card" for="relShowProceedLink">
                            <input class="form-check-input" type="checkbox" id="relShowProceedLink" checked>
                            <span>
                                <strong>Show “Proceed to Details” link in preview</strong>
                                <small>Let users jump from preview to the full detail page.</small>
                            </span>
                        </label>
                    </div>
                </div>

                <div class="relation-options-grid">
                    <div class="relation-option-card relation-warning-card relation-fk-card">
                        <div class="relation-option-main">
                            <input class="form-check-input" type="checkbox" id="relAddForeignKey">
                            <label for="relAddForeignKey">
                                <strong><i class="bi bi-shield-exclamation me-1"></i>Add foreign key constraint</strong>
                                <small>Enforces referential integrity. Master field must be primary or unique.</small>
                            </label>
                        </div>
                        <div class="relation-fk-actions">
                            <label>
                                <span>On delete</span>
                                <select class="form-select form-select-sm" id="relOnDeleteAction">
                                    <?php foreach ((array)($databaseDialect['referential_actions'] ?? ['CASCADE']) as $action): ?>
                                        <option value="<?= htmlspecialchars((string)$action) ?>"><?= htmlspecialchars(ucwords(strtolower((string)$action))) ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </label>
                            <label>
                                <span>On update</span>
                                <select class="form-select form-select-sm" id="relOnUpdateAction">
                                    <?php foreach ((array)($databaseDialect['referential_actions'] ?? ['CASCADE']) as $action): ?>
                                        <option value="<?= htmlspecialchars((string)$action) ?>"><?= htmlspecialchars(ucwords(strtolower((string)$action))) ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </label>
                        </div>
                    </div>

                    <div class="relation-option-card relation-count-card">
                        <div class="relation-option-main">
                            <input class="form-check-input" type="checkbox" id="relDisplayChildCount">
                            <label for="relDisplayChildCount">
                                <strong>Display child record count</strong>
                                <small>Add a count badge to the detail table card.</small>
                            </label>
                        </div>
                        <div class="relation-badge-color" id="relBadgeColorRow" style="display:none;">
                            <label class="form-label small mb-0 text-nowrap">Badge color</label>
                            <input type="color" class="form-control form-control-color form-control-sm" id="relBadgeColor" value="#0d6efd">
                        </div>
                    </div>

                    <label class="relation-option-card" for="relHideIfEmpty">
                        <input class="form-check-input" type="checkbox" id="relHideIfEmpty">
                        <span>
                            <strong>Hide details preview if empty</strong>
                            <small>Suppress detail records when no matching rows exist.</small>
                        </span>
                    </label>
                </div>

                <div class="relation-section relation-filter-section">
                    <div class="relation-section-title">
                        <span><i class="bi bi-funnel me-1"></i>Filter (WHERE) <small class="text-muted">optional</small></span>
                        <small>Only show child rows matching this condition — on top of the link. Supports SQL variables like <code>:userid</code>, <code>:today</code>, <code>:session.x</code>.</small>
                    </div>
                    <input type="text" class="form-control form-control-sm relation-where-input" id="relWhere" placeholder="e.g. status = 'active'  ·  created &gt;= :daysago.30  ·  assigned_to = :userid" spellcheck="false" autocapitalize="off" autocomplete="off">
                </div>

                <div class="relation-visibility-grid">
                    <div class="relation-section relation-visibility-panel">
                        <div class="relation-section-title">
                            <span><i class="bi bi-diagram-3 me-1"></i>For Master Table</span>
                            <small>Show detail records in these master pages</small>
                        </div>
                        <div class="relation-page-grid">
                            <?php foreach (['list', 'add', 'edit', 'view', 'print'] as $page): ?>
                                <label class="relation-page-chip" for="relMasterPage_<?= $page ?>">
                                    <input class="form-check-input master-page-check" type="checkbox" value="<?= $page ?>" id="relMasterPage_<?= $page ?>">
                                    <span><?= ucfirst($page) ?></span>
                                </label>
                            <?php endforeach; ?>
                        </div>
                        <div class="relation-order-card">
                            <div>
                                <strong>Detail display order</strong>
                                <small>Lower numbers appear first when this master table has multiple detail sections.</small>
                            </div>
                            <input type="number" class="form-control form-control-sm" id="relDisplayOrder" value="10" min="0" step="10">
                        </div>
                    </div>

                    <div class="relation-section relation-visibility-panel">
                        <div class="relation-section-title">
                            <span><i class="bi bi-arrow-up-left-square me-1"></i>For Details Table</span>
                            <small>Show master record in these detail pages</small>
                        </div>
                        <div class="relation-page-grid">
                            <?php foreach (['list', 'add', 'edit', 'view', 'print'] as $page): ?>
                                <label class="relation-page-chip" for="relDetailPage_<?= $page ?>">
                                    <input class="form-check-input detail-page-check" type="checkbox" value="<?= $page ?>" id="relDetailPage_<?= $page ?>">
                                    <span><?= ucfirst($page) ?></span>
                                </label>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>

                <div class="relation-section relation-future-pages mb-0">
                    <div class="relation-section-title">
                        <span>Additional future targets</span>
                        <small>Reserved for generated modules beyond the core page set</small>
                    </div>
                    <div class="relation-page-grid">
                        <?php foreach (['export', 'dashboard'] as $page): ?>
                            <label class="relation-page-chip" for="relPage_<?= $page ?>">
                                <input class="form-check-input page-check" type="checkbox" value="<?= $page ?>" id="relPage_<?= $page ?>">
                                <span><?= ucfirst($page) ?></span>
                            </label>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
            <div class="modal-footer relation-modal-footer py-2">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal" data-bs-toggle="tooltip" title="Close without creating this relationship.">Cancel</button>
                <button type="button" class="btn btn-sm btn-primary" id="btnSaveRelation" data-bs-toggle="tooltip" title="Save this master-detail relationship and its display/page options to project JSON."><i class="bi bi-check2 me-1"></i>Create Relation</button>
            </div>
        </div>
    </div>
</div>
