<!-- Training Data Modal - Shared Component -->
<div id="training-modal" class="modal" style="display: none;">
    <div class="modal-content" style="max-width: 900px;">
        <div class="modal-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
            <h3 style="color: white; margin: 0;">📋 Generated Training Data</h3>
            <span class="modal-close" onclick="closeTrainingModal()" style="color: white;">&times;</span>
        </div>
        <div class="modal-body" style="padding: 1rem;">
            <div style="margin-bottom: 0.75rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
                <span style="color: #666; font-size: 0.9rem;">
                    Edit below (pretty-printed). Copy button outputs single-line JSONL format.
                </span>
                <button id="copy-training-btn" onclick="copyTrainingDataAsJsonl()" 
                        style="padding: 0.5rem 1rem; background: #667eea; color: white; border: none; 
                               border-radius: 6px; font-weight: 600; cursor: pointer; display: flex; 
                               align-items: center; gap: 0.5rem; transition: background 0.2s;"
                        onmouseover="this.style.background='#5a67d8';"
                        onmouseout="this.style.background='#667eea';">
                    📋 Copy as JSONL
                </button>
            </div>
            <textarea id="training-textarea" 
                      style="width: 100%; height: 500px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; 
                             font-size: 0.85rem; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 8px; 
                             resize: vertical; line-height: 1.5; background: #f8fafc;"></textarea>
            <div style="margin-top: 1rem; display: flex; justify-content: flex-end;">
                <button onclick="closeTrainingModal()" 
                        style="padding: 0.5rem 1.5rem; background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; 
                               border-radius: 6px; font-weight: 500; cursor: pointer;">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
