{{define "dash_modals"}}
    <div id="upsellModal" class="modal-overlay" style="display: none;">
        <div class="modal-content" style="width: 400px; text-align: center;">
            <div style="font-size: 3rem; margin-bottom: 10px;">🚀</div>
            <h3 style="margin-top: 0; color: #0f172a;">RiskRancher Pro Required</h3>
            <p style="color: #64748b; font-size: 0.95rem; margin-bottom: 20px;">The <strong id="upsellFeatureName">feature</strong> is available in the Pro edition. Scale your operations with automation, advanced RBAC, and branded reports.</p>
            <div style="display: flex; gap: 10px; justify-content: center;">
                <button class="btn btn-secondary" onclick="document.getElementById('upsellModal').style.display='none'">Close</button>
                <a href="https://RiskRancher.com/pro" target="_blank" class="btn" style="background: #8b5cf6; color: white; text-decoration: none;">View Pro Plans</a>
            </div>
        </div>
    </div>

    <div id="newTicketModal" class="modal-overlay" style="display: none;">
        <div class="modal-content" style="width: 500px; text-align: left;">
            <h3 style="margin-top: 0; color: #0f172a; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px;">+ Log Manual Finding</h3>

            <div style="margin-bottom: 15px;">
                <label style="font-weight: bold; display: block; margin-bottom: 5px; font-size: 0.9rem;">Title:</label>
                <input type="text" id="newTicketTitle" placeholder="e.g. Open S3 Bucket found" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box;">
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
                <div>
                    <label style="font-weight: bold; display: block; margin-bottom: 5px; font-size: 0.9rem;">Asset Identifier:</label>
                    <input type="text" id="newTicketAsset" placeholder="e.g. aws-prod-bucket" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box;">
                </div>
                <div>
                    <label style="font-weight: bold; display: block; margin-bottom: 5px; font-size: 0.9rem;">Severity:</label>
                    <select id="newTicketSeverity" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
                        <option value="Critical">Critical</option>
                        <option value="High" selected>High</option>
                        <option value="Medium">Medium</option>
                        <option value="Low">Low</option>
                        <option value="Info">Info</option>
                    </select>
                </div>
            </div>

            <div style="margin-bottom: 20px;">
                <label style="font-weight: bold; display: block; margin-bottom: 5px; font-size: 0.9rem;">Description (Markdown supported):</label>
                <textarea id="newTicketDesc" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; height: 100px; resize: vertical; box-sizing: border-box;"></textarea>
            </div>

            <div style="display: flex; justify-content: flex-end; gap: 10px;">
                <button class="btn btn-secondary" onclick="document.getElementById('newTicketModal').style.display='none'">Cancel</button>
                <button class="btn" style="background: #10b981; color: white; border: none;" onclick="submitNewTicket()">Create Finding</button>
            </div>
        </div>
    </div>

    <div id="drawerOverlay" class="drawer-overlay" onclick="closeDrawer()"></div>
    <div id="ticketDrawer" class="drawer">
        <div class="drawer-header">
            <div>
                <span id="drawerBadge" class="badge" style="margin-bottom: 8px; display: inline-block;"></span>
                <h3 id="drawerTitle" style="margin: 0; color: #0f172a; font-size: 1.25rem;"></h3>
                <div id="drawerAsset" style="font-family: monospace; color: #475569; font-size: 0.9rem; margin-top: 8px; background: #e2e8f0; padding: 2px 6px; border-radius: 4px; display: inline-block;"></div>
            </div>
            <button onclick="closeDrawer()" style="background: none; border: none; font-size: 1.8rem; cursor: pointer; color: #94a3b8;">&times;</button>
        </div>

        <div class="drawer-body" style="max-height: 75vh; overflow-y: auto; padding-right: 10px;">
            <input type="hidden" id="drawerTicketID">

            <div id="drawerEvidenceBlock" style="display: none; margin-bottom: 20px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; padding: 15px; border-left: 4px solid #166534;">
                <label style="font-weight: bold; color: #14532d; display: block; margin-bottom: 5px;">IT Wrangler Evidence:</label>
                <div id="drawerEvidenceText" style="font-family: monospace; font-size: 0.9rem; color: #166534; white-space: pre-wrap; word-break: break-word;"></div>
            </div>

            <div id="drawerReturnedBlock" style="display: none; margin-bottom: 20px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; padding: 15px; border-left: 4px solid #991b1b;">
                <label style="font-weight: bold; color: #7f1d1d; display: block; margin-bottom: 5px;">🔄 Reason for Return:</label>
                <div id="drawerReturnedText" style="font-size: 0.9rem; color: #991b1b; white-space: pre-wrap; word-break: break-word;"></div>
            </div>

            <div style="margin-bottom: 20px;">
                <label style="font-weight: bold; color: #334155; display: block; margin-bottom: 5px;">Description (Live Preview):</label>
                <div id="drawerDescPreview" style="background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 6px; padding: 15px; font-size: 0.95rem; color: #1e293b; overflow-x: auto;">
                </div>
            </div>

            <div id="drawerEditControls">
                <div style="margin-bottom: 20px;">
                    <label style="font-weight: bold; color: #334155; display: block; margin-bottom: 5px;">Edit Description (Markdown):</label>
                    <textarea id="drawerDescEdit" onkeyup="updateDrawerPreview()" onchange="updateDrawerPreview()" style="width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.9rem; font-family: monospace; resize: vertical; min-height: 120px;"></textarea>
                </div>

                <div style="margin-bottom: 20px;">
                    <label style="font-weight: bold; color: #334155; display: block; margin-bottom: 5px;">Edit Recommended Remediation:</label>
                    <textarea id="drawerRemEdit" style="width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.9rem; resize: vertical; min-height: 80px;"></textarea>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;">
                    <div>
                        <label style="font-weight: bold; color: #334155; display: block; margin-bottom: 5px;">Adjust Severity:</label>
                        <select id="drawerSeverity" style="width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.95rem;">
                            <option value="Critical">Critical</option>
                            <option value="High">High</option>
                            <option value="Medium">Medium</option>
                            <option value="Low">Low</option>
                            <option value="Info">Info</option>
                        </select>
                    </div>
                    <div>
                        <label style="font-weight: bold; color: #334155; display: block; margin-bottom: 5px;">Assign to IT (Email):</label>
                        <input type="text" id="drawerAssignee" placeholder="e.g. sysadmin@company.com" style="width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.95rem; box-sizing: border-box;">
                    </div>
                </div>

                <div style="background: #eff6ff; padding: 15px; border-radius: 6px; border-left: 4px solid #3b82f6;">
                    <label style="font-weight: bold; color: #1e3a8a; display: block; margin-bottom: 5px;">Audit Trail Comment (Required if altering):</label>
                    <input type="text" id="drawerComment" style="width: 100%; padding: 10px; border: 1px solid #bfdbfe; border-radius: 6px; box-sizing: border-box; font-size: 0.95rem;" placeholder="e.g., Updated remediation steps and severity...">
                </div>
            </div>
        </div>

        <div class="drawer-footer" style="display: flex; justify-content: space-between; width: 100%;">
            <button class="btn btn-secondary" onclick="closeDrawer()">Discard</button>

            <div id="drawerStandardActions" style="display: flex; gap: 10px;">
                <button class="btn btn-secondary" style="color: #ea580c; border-color: #fdba74; background: #fffbeb;" onclick="markFalsePositive()">🚫 Mark False Positive</button>
                <button class="btn" id="drawerSubmitBtn" style="background: #2563eb; color: white;">Save & Dispatch</button>
            </div>
        </div>
    </div>
{{end}}