{% extends "base.html" %}
{% block title %}Teams & Assignments — ICDEV™ Workflow{% endblock %}

{% block extra_css %}
<style>
/* ── Workflow Teams page — dark theme ─────────────────────────────── */
:root {
    --wt-bg:       #0d1117;
    --wt-card:     #1c2128;
    --wt-border:   #30363d;
    --wt-accent:   #58a6ff;
    --wt-green:    #3fb950;
    --wt-warn:     #d29922;
    --wt-danger:   #f85149;
    --wt-purple:   #bc8cff;
    --wt-orange:   #f0883e;
    --wt-text:     #e6edf3;
    --wt-muted:    #8b949e;
    --wt-input-bg: #161b22;
    --wt-hover:    #21262d;
}

.wt-page { padding: 0 0 48px 0; color: var(--wt-text); }
.wt-page-header { margin-bottom: 28px; }
.wt-page-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px 0; }
.wt-page-header p  { color: var(--wt-muted); margin: 0; font-size: 0.88rem; }

/* ── Section card ─────────────────────────────────────────────────── */
.wt-section {
    background: var(--wt-card);
    border: 1px solid var(--wt-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 24px;
}
.wt-section-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--wt-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.wt-section-title { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wt-muted); }
.wt-section-body  { padding: 20px; }

/* ── Team card grid ───────────────────────────────────────────────── */
.wt-teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.wt-team-card {
    background: var(--wt-input-bg);
    border: 1px solid var(--wt-border);
    border-radius: 8px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.14s;
}
.wt-team-card:hover { border-color: var(--wt-accent); }
.wt-team-card.selected { border-color: var(--wt-accent); background: #1f2f46; }
.wt-team-name { font-size: 1rem; font-weight: 600; }
.wt-team-desc { font-size: 0.8rem; color: var(--wt-muted); min-height: 18px; }
.wt-team-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.wt-team-card-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ── Team detail panel ────────────────────────────────────────────── */
.wt-detail { display: none; }
.wt-detail.visible { display: block; }
.wt-detail-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--wt-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wt-detail-header h2 { margin: 0; font-size: 1.1rem; }

/* ── Tables ───────────────────────────────────────────────────────── */
.wt-table { width: 100%; border-collapse: collapse; }
.wt-table th {
    padding: 9px 14px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--wt-muted);
    border-bottom: 1px solid var(--wt-border);
    text-align: left;
}
.wt-table td {
    padding: 9px 14px;
    font-size: 0.83rem;
    border-bottom: 1px solid var(--wt-border);
    vertical-align: middle;
    color: var(--wt-text);
}
.wt-table tr:last-child td { border-bottom: none; }
.wt-table tr:hover td { background: var(--wt-hover); }

/* ── Inline form ──────────────────────────────────────────────────── */
.wt-inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--wt-border); }
.wt-field-inline { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px; }
.wt-label-sm { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--wt-muted); }
.wt-input, .wt-select, .wt-textarea {
    padding: 7px 10px;
    background: var(--wt-input-bg);
    border: 1px solid var(--wt-border);
    border-radius: 6px;
    color: var(--wt-text);
    font-size: 0.83rem;
    box-sizing: border-box;
    width: 100%;
}
.wt-input:focus, .wt-select:focus, .wt-textarea:focus { outline: none; border-color: var(--wt-accent); }
.wt-textarea { min-height: 60px; resize: vertical; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.wt-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.12s;
    white-space: nowrap;
}
.wt-btn:hover { opacity: 0.85; }
.wt-btn-primary  { background: var(--wt-accent);  color: #0d1117; }
.wt-btn-success  { background: var(--wt-green);   color: #0d1117; }
.wt-btn-danger   { background: var(--wt-danger);  color: #fff; }
.wt-btn-ghost    { background: transparent; border: 1px solid var(--wt-border); color: var(--wt-muted); }
.wt-btn-sm       { padding: 4px 10px; font-size: 0.76rem; }

/* ── Badges ───────────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.badge-ndc    { background: #1e3a5f; color: #58a6ff; }
.badge-sdc    { background: #3a1a1a; color: #f85149; }
.badge-pdc    { background: #1a2a3a; color: #79c0ff; }
.badge-bdc    { background: #2a3a1a; color: #3fb950; }
.badge-ddc    { background: #2a1a3a; color: #bc8cff; }
.badge-odc    { background: #3a2a1a; color: #f0883e; }
.badge-idc    { background: #1a3a3a; color: #39d353; }
.badge-global { background: #2a2a2a; color: #8b949e; }
.badge-system { background: #2a1f3a; color: #bc8cff; }
.badge-ai-ref { background: #1e3a1e; color: #3fb950; }
.badge-human  { background: #3a2a1a; color: #f0883e; }
.badge-checklist { background: #1e3a1e; color: #3fb950; }
.badge-form      { background: #1a2a3a; color: #58a6ff; }
.badge-sop       { background: #3a2a1a; color: #f0883e; }
.badge-standard  { background: #2a1a3a; color: #bc8cff; }

/* ── Modal overlay ────────────────────────────────────────────────── */
.wt-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.wt-modal.open { display: flex; }
.wt-modal-box {
    background: var(--wt-card);
    border: 1px solid var(--wt-border);
    border-radius: 12px;
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
}
.wt-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--wt-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wt-modal-header h3 { margin: 0; font-size: 1rem; }
.wt-modal-body  { padding: 20px; }
.wt-modal-footer { padding: 14px 20px; border-top: 1px solid var(--wt-border); display: flex; gap: 8px; justify-content: flex-end; }

/* ── Form field ───────────────────────────────────────────────────── */
.wt-form-field { margin-bottom: 14px; }
.wt-form-label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--wt-muted); margin-bottom: 5px; }

/* ── Flash ────────────────────────────────────────────────────────── */
.wt-flash { padding: 10px 16px; border-radius: 6px; font-size: 0.84rem; margin-bottom: 12px; display: none; }
.wt-flash-success { background: rgba(63,185,80,0.12); border: 1px solid var(--wt-green); color: var(--wt-green); }
.wt-flash-error   { background: rgba(248,81,73,0.12);  border: 1px solid var(--wt-danger); color: var(--wt-danger); }

/* ── Template row ─────────────────────────────────────────────────── */
.wt-tmpl-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--wt-border);
}
.wt-tmpl-row:last-child { border-bottom: none; }
.wt-tmpl-name  { font-size: 0.9rem; font-weight: 600; }
.wt-tmpl-meta  { font-size: 0.76rem; color: var(--wt-muted); margin-top: 3px; line-height: 1.5; }
.wt-tmpl-preview { font-family: monospace; font-size: 0.72rem; color: var(--wt-muted); background: var(--wt-input-bg); border-radius: 4px; padding: 4px 8px; margin-top: 6px; max-height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.wt-tmpl-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }

/* ── Empty state ──────────────────────────────────────────────────── */
.wt-empty { padding: 28px; text-align: center; color: var(--wt-muted); font-size: 0.83rem; }

/* ── Divider ──────────────────────────────────────────────────────── */
.wt-hr { border: none; border-top: 1px solid var(--wt-border); margin: 20px 0; }

/* ── Canvas type select options ───────────────────────────────────── */
select.wt-select { background: var(--wt-input-bg); }

/* ── Assignments list ─────────────────────────────────────────────── */
.wt-assign-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--wt-input-bg);
    border: 1px solid var(--wt-border);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.82rem;
}
.wt-assign-meta { font-size: 0.72rem; color: var(--wt-muted); margin-top: 2px; }
</style>
{% endblock %}

{% block content %}
<div class="wt-page">
    <div class="wt-page-header">
        <h1>Teams &amp; Assignments</h1>
        <p>Manage workflow teams, members, scope assignments, templates, and document templates.</p>
    </div>

    <!-- ── Global flash ─────────────────────────────────────────────── -->
    <div class="wt-flash wt-flash-success" id="g-flash-success">Done.</div>
    <div class="wt-flash wt-flash-error"   id="g-flash-error">An error occurred.</div>

    <!-- ═══════════════════════════════════════════════════════════════
         1. Teams list
    ═══════════════════════════════════════════════════════════════ -->
    <div class="wt-section">
        <div class="wt-section-header">
            <span class="wt-section-title">Teams</span>
            <div style="display:flex;gap:8px;">
                <button class="wt-btn wt-btn-ghost wt-btn-sm" onclick="loadTeams()">Refresh</button>
                <button class="wt-btn wt-btn-primary wt-btn-sm" onclick="openTeamModal()">+ Create Team</button>
            </div>
        </div>
        <div class="wt-section-body">
            <div class="wt-teams-grid" id="teams-grid">
                <div class="wt-empty" style="grid-column:1/-1;">Loading teams...</div>
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════
         2. Team Detail panel (shown when Manage clicked)
    ═══════════════════════════════════════════════════════════════ -->
    <div class="wt-section wt-detail" id="team-detail-panel">
        <div class="wt-detail-header">
            <div>
                <h2 id="detail-team-name">Team Name</h2>
                <div style="font-size:0.8rem;color:var(--wt-muted);" id="detail-team-desc"></div>
            </div>
            <button class="wt-btn wt-btn-ghost wt-btn-sm" onclick="closeTeamDetail()">Close</button>
        </div>

        <div style="padding:20px;">
            <input type="hidden" id="detail-team-id">

            <!-- Members table -->
            <h3 style="font-size:0.88rem;font-weight:600;margin:0 0 10px 0;">Members</h3>
            <div style="overflow-x:auto;">
                <table class="wt-table" id="members-table" aria-label="Team members">
                    <thead>
                        <tr>
                            <th>User ID</th>
                            <th>Role</th>
                            <th>Since</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="members-body">
                        <tr><td colspan="4" class="wt-empty">Loading...</td></tr>
                    </tbody>
                </table>
            </div>

            <!-- Add member form -->
            <div class="wt-inline-form">
                <div class="wt-field-inline">
                    <label class="wt-label-sm" for="add-user-id">User ID</label>
                    <input type="text" class="wt-input" id="add-user-id" placeholder="e.g. alice@example.com">
                </div>
                <div class="wt-field-inline">
                    <label class="wt-label-sm" for="add-role">Role Label</label>
                    <input type="text" class="wt-input" id="add-role" placeholder="e.g. reviewer">
                </div>
                <button class="wt-btn wt-btn-success" style="align-self:flex-end;" onclick="addMember()">Add Member</button>
            </div>

            <hr class="wt-hr">

            <!-- Assignments section -->
            <h3 style="font-size:0.88rem;font-weight:600;margin:0 0 10px 0;">Assignments</h3>
            <div id="assignments-list"><p style="color:var(--wt-muted);font-size:0.82rem;">Loading assignments...</p></div>

            <!-- Assign form -->
            <div class="wt-inline-form" style="margin-top:0;">
                <div class="wt-field-inline">
                    <label class="wt-label-sm" for="assign-scope-type">Scope Type</label>
                    <select class="wt-select" id="assign-scope-type">
                        <option value="project">Project</option>
                        <option value="task">Task</option>
                        <option value="task_group">Task Group</option>
                    </select>
                </div>
                <div class="wt-field-inline">
                    <label class="wt-label-sm" for="assign-scope-id">Scope ID</label>
                    <input type="text" class="wt-input" id="assign-scope-id" placeholder="e.g. project-123">
                </div>
                <div class="wt-field-inline">
                    <label class="wt-label-sm" for="assign-template">Template (optional)</label>
                    <select class="wt-select" id="assign-template">
                        <option value="">-- No Template --</option>
                    </select>
                </div>
                <button class="wt-btn wt-btn-primary" style="align-self:flex-end;" onclick="assignTeam()">Assign</button>
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════
         3. Workflow Templates section
    ═══════════════════════════════════════════════════════════════ -->
    <div class="wt-section">
        <div class="wt-section-header">
            <span class="wt-section-title">Workflow Templates</span>
            <div style="display:flex;gap:8px;">
                <button class="wt-btn wt-btn-ghost wt-btn-sm" onclick="loadTemplates()">Refresh</button>
                <button class="wt-btn wt-btn-primary wt-btn-sm" onclick="openTemplateModal()">+ Create Template</button>
            </div>
        </div>
        <div class="wt-section-body">
            <div id="templates-list">
                <div class="wt-empty">Loading templates...</div>
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════
         4. Document Templates section
    ═══════════════════════════════════════════════════════════════ -->
    <div class="wt-section">
        <div class="wt-section-header">
            <span class="wt-section-title">Document Templates</span>
            <div style="display:flex;gap:8px;">
                <button class="wt-btn wt-btn-ghost wt-btn-sm" onclick="loadDocTemplates()">Refresh</button>
                <button class="wt-btn wt-btn-primary wt-btn-sm" onclick="openDocTemplateModal()">+ Create Doc Template</button>
            </div>
        </div>
        <div style="overflow-x:auto;">
            <table class="wt-table" id="doc-templates-table" aria-label="Document templates">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Doc Type</th>
                        <th>Canvas</th>
                        <th>Stage Scope</th>
                        <th>Flags</th>
                        <th>Files</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="doc-templates-body">
                    <tr><td colspan="7" class="wt-empty">Loading...</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- ═══ 5. File Ingestion Panel ═════════════════════════════════════════ -->
    <div class="wt-section" id="ingest-panel" style="display:none;">
        <div class="wt-section-header">
            <span class="wt-section-title">📄 Ingest Files — <span id="ingest-tmpl-name"></span></span>
            <button class="wt-btn wt-btn-ghost wt-btn-sm" onclick="closeIngestPanel()">✕ Close</button>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;">
            <!-- Upload form -->
            <div>
                <p style="font-size:12px;color:#888;margin-bottom:12px;">
                    Upload PDF, DOCX, HTML, or Markdown files. Text is extracted, chunked, and indexed for report generation.
                </p>
                <div id="ingest-drop-zone" style="border:2px dashed #3d444d;border-radius:8px;padding:24px;text-align:center;cursor:pointer;transition:border-color .2s;"
                     onclick="document.getElementById('ingest-file-input').click()"
                     ondragover="event.preventDefault();this.style.borderColor='#58a6ff'"
                     ondragleave="this.style.borderColor='#3d444d'"
                     ondrop="handleIngestDrop(event)">
                    <div style="font-size:28px;margin-bottom:8px;">📁</div>
                    <div style="color:#8b949e;font-size:13px;">Drag &amp; drop or <strong style="color:#58a6ff">click to browse</strong></div>
                    <div style="color:#484f58;font-size:11px;margin-top:4px;">PDF · DOCX · HTML · MD · TXT</div>
                </div>
                <input type="file" id="ingest-file-input" style="display:none" accept=".pdf,.docx,.doc,.html,.htm,.md,.markdown,.txt"
                       onchange="uploadIngestFile(this.files[0])">
                <div id="ingest-progress" style="margin-top:12px;display:none;">
                    <div style="background:#21262d;border-radius:4px;height:6px;overflow:hidden;">
                        <div id="ingest-progress-bar" style="height:100%;width:0%;background:#58a6ff;transition:width .3s;"></div>
                    </div>
                    <div id="ingest-status-msg" style="font-size:11px;color:#8b949e;margin-top:4px;"></div>
                </div>
            </div>
            <!-- Ingested files list -->
            <div>
                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
                    <strong style="font-size:13px;">Ingested Files</strong>
                    <button class="wt-btn wt-btn-ghost wt-btn-sm" onclick="loadIngestedFiles()">↻ Refresh</button>
                </div>
                <div id="ingested-files-list">
                    <p style="color:#484f58;font-size:12px;">No files ingested yet.</p>
                </div>
            </div>
        </div>
    </div>

</div><!-- /wt-page -->

<!-- ═══════════════════════════════════════════════════════════════════
     Modals
═══════════════════════════════════════════════════════════════════ -->

<!-- Create Team Modal -->
<div class="wt-modal" id="team-modal" role="dialog" aria-modal="true" aria-labelledby="team-modal-title">
    <div class="wt-modal-box">
        <div class="wt-modal-header">
            <h3 id="team-modal-title">Create Team</h3>
            <button class="wt-btn wt-btn-ghost wt-btn-sm" onclick="closeModal('team-modal')">&times;</button>
        </div>
        <div class="wt-modal-body">
            <div class="wt-flash wt-flash-error" id="team-modal-err">Error.</div>
            <div class="wt-form-field">
                <label class="wt-form-label" for="t-name">Team Name *</label>
                <input type="text" class="wt-input" id="t-name" placeholder="e.g. Security Review Team">
            </div>
            <div class="wt-form-field">
                <label class="wt-form-label" for="t-desc">Description</label>
                <textarea class="wt-textarea" id="t-desc" placeholder="Optional description..."></textarea>
            </div>
            <div class="wt-form-field">
                <label class="wt-form-label" for="t-canvas">Canvas Type</label>
                <select class="wt-select" id="t-canvas">
                    <option value="">Global</option>
                    <option value="NDC">NDC — Network Design Canvas</option>
                    <option value="SDC">SDC — Security Design Canvas</option>
                    <option value="PDC">PDC — Pipeline Design Canvas</option>
                    <option value="BDC">BDC — Boundary Design Canvas</option>
                    <option value="DDC">DDC — Data Design Canvas</option>
                    <option value="ODC">ODC — Observability Design Canvas</option>
                    <option value="IDC">IDC — Infrastructure Design Canvas</option>
                </select>
            </div>
        </div>
        <div class="wt-modal-footer">
            <button class="wt-btn wt-btn-ghost" onclick="closeModal('team-modal')">Cancel</button>
            <button class="wt-btn wt-btn-primary" onclick="createTeam()">Create Team</button>
        </div>
    </div>
</div>

<!-- Create Workflow Template Modal -->
<div class="wt-modal" id="tmpl-modal" role="dialog" aria-modal="true" aria-labelledby="tmpl-modal-title">
    <div class="wt-modal-box">
        <div class="wt-modal-header">
            <h3 id="tmpl-modal-title">Create Workflow Template</h3>
            <button class="wt-btn wt-btn-ghost wt-btn-sm" onclick="closeModal('tmpl-modal')">&times;</button>
        </div>
        <div class="wt-modal-body">
            <div class="wt-flash wt-flash-error" id="tmpl-modal-err">Error.</div>
            <div class="wt-form-field">
                <label class="wt-form-label" for="tmpl-name">Template Name *</label>
                <input type="text" class="wt-input" id="tmpl-name" placeholder="e.g. Standard Build Review">
            </div>
            <div class="wt-form-field">
                <label class="wt-form-label" for="tmpl-canvas">Canvas Type</label>
                <select class="wt-select" id="tmpl-canvas">
                    <option value="">Global</option>
                    <option value="NDC">NDC</option>
                    <option value="SDC">SDC</option>
                    <option value="PDC">PDC</option>
                    <option value="BDC">BDC</option>
                    <option value="DDC">DDC</option>
                    <option value="ODC">ODC</option>
                    <option value="IDC">IDC</option>
                </select>
            </div>
            <div class="wt-form-field">
                <label class="wt-form-label" for="tmpl-stages">Stages JSON *</label>
                <textarea class="wt-textarea" id="tmpl-stages" rows="4" placeholder='["build","review","test","approve","deploy"]' style="font-family:monospace;"></textarea>
            </div>
            <div class="wt-form-field">
                <label class="wt-form-label" for="tmpl-roles">Roles JSON</label>
                <textarea class="wt-textarea" id="tmpl-roles" rows="3" placeholder='{"reviewer":["review"],"approver":["approve"]}' style="font-family:monospace;"></textarea>
            </div>
            <div class="wt-form-field">
                <label class="wt-form-label" for="tmpl-policy">Approval Policy</label>
                <select class="wt-select" id="tmpl-policy">
                    <option value="any_one">Any One</option>
                    <option value="all">All</option>
                    <option value="majority">Majority</option>
                </select>
            </div>
            <div class="wt-form-field">
                <label class="wt-form-label" for="tmpl-klimit">Kickback Limit</label>
                <input type="number" class="wt-input" id="tmpl-klimit" value="3" min="1" max="20">
            </div>
        </div>
        <div class="wt-modal-footer">
            <button class="wt-btn wt-btn-ghost" onclick="closeModal('tmpl-modal')">Cancel</button>
            <button class="wt-btn wt-btn-primary" onclick="createTemplate()">Create Template</button>
        </div>
    </div>
</div>

<!-- Fork Template Modal -->
<div class="wt-modal" id="fork-modal" role="dialog" aria-modal="true" aria-labelledby="fork-modal-title">
    <div class="wt-modal-box">
        <div class="wt-modal-header">
            <h3 id="fork-modal-title">Fork Template</h3>
            <button class="wt-btn wt-btn-ghost wt-btn-sm" onclick="closeModal('fork-modal')">&times;</button>
        </div>
        <div class="wt-modal-body">
            <div class="wt-flash wt-flash-error" id="fork-modal-err">Error.</div>
            <input type="hidden" id="fork-source-id">
            <div class="wt-form-field">
                <label class="wt-form-label" for="fork-name">New Template Name *</label>
                <input type="text" class="wt-input" id="fork-name" placeholder="e.g. Custom Build Review v2">
            </div>
        </div>
        <div class="wt-modal-footer">
            <button class="wt-btn wt-btn-ghost" onclick="closeModal('fork-modal')">Cancel</button>
            <button class="wt-btn wt-btn-primary" onclick="submitFork()">Fork</button>
        </div>
    </div>
</div>

<!-- Create Doc Template Modal -->
<div class="wt-modal" id="doc-tmpl-modal" role="dialog" aria-modal="true" aria-labelledby="doc-tmpl-modal-title">
    <div class="wt-modal-box">
        <div class="wt-modal-header">
            <h3 id="doc-tmpl-modal-title">Create Document Template</h3>
            <button class="wt-btn wt-btn-ghost wt-btn-sm" onclick="closeModal('doc-tmpl-modal')">&times;</button>
        </div>
        <div class="wt-modal-body">
            <div class="wt-flash wt-flash-error" id="doc-modal-err">Error.</div>
            <div class="wt-form-field">
                <label class="wt-form-label" for="dt-name">Name *</label>
                <input type="text" class="wt-input" id="dt-name" placeholder="e.g. Peer Review Checklist">
            </div>
            <div class="wt-form-field">
                <label class="wt-form-label" for="dt-type">Doc Type *</label>
                <select class="wt-select" id="dt-type">
                    <option value="checklist">Checklist</option>
                    <option value="form">Form</option>
                    <option value="sop_reference">SOP Reference</option>
                    <option value="standard">Standard</option>
                </select>
            </div>
            <div class="wt-form-field">
                <label class="wt-form-label" for="dt-canvas">Canvas Type</label>
                <select class="wt-select" id="dt-canvas">
                    <option value="">Global</option>
                    <option value="NDC">NDC</option>
                    <option value="SDC">SDC</option>
                    <option value="PDC">PDC</option>
                    <option value="BDC">BDC</option>
                    <option value="DDC">DDC</option>
                    <option value="ODC">ODC</option>
                    <option value="IDC">IDC</option>
                </select>
            </div>
            <div class="wt-form-field">
                <label class="wt-form-label" for="dt-stage">Stage Scope</label>
                <input type="text" class="wt-input" id="dt-stage" placeholder="e.g. review  (leave blank for all)">
            </div>
            <div class="wt-form-field">
                <label class="wt-form-label" for="dt-schema">Schema JSON *</label>
                <textarea class="wt-textarea" id="dt-schema" rows="5" placeholder='[{"item":"Check 1","required":true}]' style="font-family:monospace;"></textarea>
            </div>
            <div class="wt-form-field" style="display:flex;gap:20px;">
                <label style="display:flex;align-items:center;gap:8px;font-size:0.83rem;cursor:pointer;">
                    <input type="checkbox" id="dt-ai-ref"> AI Reference
                </label>
                <label style="display:flex;align-items:center;gap:8px;font-size:0.83rem;cursor:pointer;">
                    <input type="checkbox" id="dt-human-req"> Human Required
                </label>
            </div>
        </div>
        <div class="wt-modal-footer">
            <button class="wt-btn wt-btn-ghost" onclick="closeModal('doc-tmpl-modal')">Cancel</button>
            <button class="wt-btn wt-btn-primary" onclick="createDocTemplate()">Create</button>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
(function () {
    'use strict';

    // ── State ──────────────────────────────────────────────────────────
    var allTeams     = [];
    var allTemplates = [];
    var activeTeamId = null;

    // ══════════════════════════════════════════════════════════════════
    //  TEAMS
    // ══════════════════════════════════════════════════════════════════
    window.loadTeams = function () {
        fetch('/api/wf/teams')
            .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
            .then(function (d) {
                allTeams = d.teams || [];
                renderTeamsGrid(allTeams);
                populateAssignTemplateSelect();
            })
            .catch(function (e) {
                document.getElementById('teams-grid').innerHTML =
                    '<div class="wt-empty" style="color:var(--wt-danger);">Failed to load teams (' + e + ')</div>';
            });
    };

    function renderTeamsGrid(teams) {
        var grid = document.getElementById('teams-grid');
        if (!teams || teams.length === 0) {
            grid.innerHTML = '<div class="wt-empty" style="grid-column:1/-1;">No teams yet. Create one to get started.</div>';
            return;
        }
        grid.innerHTML = teams.map(function (t) {
            var canvasBadge = canvasBadgeClass(t.canvas_type);
            var canvasLabel = t.canvas_type || 'Global';
            var isActive = t.id === activeTeamId;
            return '<div class="wt-team-card' + (isActive ? ' selected' : '') + '" data-team-id="' + escHtml(t.id) + '">' +
                '<div class="wt-team-name">' + escHtml(t.name) + '</div>' +
                '<div class="wt-team-desc">' + escHtml(t.description || '') + '</div>' +
                '<div class="wt-team-meta">' +
                    '<span class="badge ' + canvasBadge + '">' + escHtml(canvasLabel) + '</span>' +
                    '<span style="font-size:0.75rem;color:var(--wt-muted);">' + escHtml(String(t.member_count || 0)) + ' members</span>' +
                '</div>' +
                '<div class="wt-team-card-actions">' +
                    '<button class="wt-btn wt-btn-primary wt-btn-sm" onclick="manageTeam(\'' + escHtml(t.id) + '\')">Manage</button>' +
                '</div>' +
            '</div>';
        }).join('');
    }

    window.manageTeam = function (teamId) {
        activeTeamId = teamId;
        renderTeamsGrid(allTeams); // re-render to update selected

        document.getElementById('detail-team-id').value = teamId;
        var team = allTeams.find(function (t) { return t.id === teamId; });
        if (team) {
            document.getElementById('detail-team-name').textContent = team.name;
            document.getElementById('detail-team-desc').textContent = team.description || '';
        }
        document.getElementById('team-detail-panel').classList.add('visible');
        document.getElementById('add-user-id').value = '';
        document.getElementById('add-role').value = '';

        loadMembers(teamId);
        loadAssignments(teamId);
    };

    window.closeTeamDetail = function () {
        activeTeamId = null;
        document.getElementById('team-detail-panel').classList.remove('visible');
        renderTeamsGrid(allTeams);
    };

    // ── Members ────────────────────────────────────────────────────────
    function loadMembers(teamId) {
        document.getElementById('members-body').innerHTML = '<tr><td colspan="4" class="wt-empty">Loading...</td></tr>';
        fetch('/api/wf/teams/' + teamId)
            .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
            .then(function (d) {
                var tbody = document.getElementById('members-body');
                var members = d.members || [];
                if (members.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="4" class="wt-empty">No members yet.</td></tr>';
                    return;
                }
                tbody.innerHTML = members.map(function (m) {
                    return '<tr>' +
                        '<td><code style="font-size:0.8rem;">' + escHtml(m.user_id) + '</code></td>' +
                        '<td>' + escHtml(m.role_label) + '</td>' +
                        '<td style="color:var(--wt-muted);">' + escHtml((m.created_at || '').substring(0, 10)) + '</td>' +
                        '<td><button class="wt-btn wt-btn-danger wt-btn-sm" onclick="removeMember(\'' + escHtml(teamId) + '\',\'' + escHtml(m.user_id) + '\')">Remove</button></td>' +
                    '</tr>';
                }).join('');
            })
            .catch(function () {
                document.getElementById('members-body').innerHTML = '<tr><td colspan="4" class="wt-empty" style="color:var(--wt-danger);">Failed to load members.</td></tr>';
            });
    }

    window.addMember = function () {
        var teamId  = document.getElementById('detail-team-id').value;
        var userId  = document.getElementById('add-user-id').value.trim();
        var role    = document.getElementById('add-role').value.trim();
        if (!userId || !role) { gFlashError('User ID and role are required.'); return; }

        fetch('/api/wf/teams/' + teamId + '/members', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ user_id: userId, role_label: role })
        })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
            .then(function (res) {
                if (res.ok) {
                    document.getElementById('add-user-id').value = '';
                    document.getElementById('add-role').value = '';
                    gFlashSuccess('Member added.');
                    loadMembers(teamId);
                    loadTeams();
                } else {
                    gFlashError(res.data.error || 'Failed to add member.');
                }
            })
            .catch(function (e) { gFlashError('Request failed: ' + e.message); });
    };

    window.removeMember = function (teamId, userId) {
        if (!confirm('Remove ' + userId + ' from team?')) return;
        fetch('/api/wf/teams/' + teamId + '/members/' + encodeURIComponent(userId), { method: 'DELETE' })
            .then(function (r) { return r.json(); })
            .then(function (d) {
                if (d.removed) { gFlashSuccess('Member removed.'); loadMembers(teamId); loadTeams(); }
                else { gFlashError(d.error || 'Failed to remove member.'); }
            })
            .catch(function (e) { gFlashError('Request failed: ' + e.message); });
    };

    // ── Assignments ────────────────────────────────────────────────────
    function loadAssignments(teamId) {
        var el = document.getElementById('assignments-list');
        el.innerHTML = '<p style="color:var(--wt-muted);font-size:0.82rem;">Loading...</p>';
        fetch('/api/wf/teams/' + teamId + '/assignments')
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (d) {
                var assignments = (d && d.assignments) ? d.assignments : [];
                if (assignments.length === 0) {
                    el.innerHTML = '<p style="color:var(--wt-muted);font-size:0.82rem;">No assignments yet.</p>';
                    return;
                }
                el.innerHTML = assignments.map(function (a) {
                    return '<div class="wt-assign-item">' +
                        '<div>' +
                            '<div><strong>' + escHtml(a.scope_type) + ':</strong> ' + escHtml(a.scope_id) + '</div>' +
                            '<div class="wt-assign-meta">' + (a.template_id ? 'Template: ' + escHtml(a.template_id) : 'No template') + ' &bull; Since ' + escHtml((a.created_at || '').substring(0, 10)) + '</div>' +
                        '</div>' +
                    '</div>';
                }).join('');
            })
            .catch(function () {
                el.innerHTML = '<p style="color:var(--wt-danger);font-size:0.82rem;">Could not load assignments.</p>';
            });
    }

    function populateAssignTemplateSelect() {
        var sel = document.getElementById('assign-template');
        // preserve existing options
        sel.innerHTML = '<option value="">-- No Template --</option>';
        allTemplates.forEach(function (t) {
            var opt = document.createElement('option');
            opt.value = t.id;
            opt.textContent = t.name + (t.canvas_type ? ' (' + t.canvas_type + ')' : '');
            sel.appendChild(opt);
        });
    }

    window.assignTeam = function () {
        var teamId     = document.getElementById('detail-team-id').value;
        var scopeType  = document.getElementById('assign-scope-type').value;
        var scopeId    = document.getElementById('assign-scope-id').value.trim();
        var templateId = document.getElementById('assign-template').value;

        if (!scopeId) { gFlashError('Scope ID is required.'); return; }

        fetch('/api/wf/teams/' + teamId + '/assignments', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ scope_type: scopeType, scope_id: scopeId, template_id: templateId || null })
        })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
            .then(function (res) {
                if (res.ok) {
                    document.getElementById('assign-scope-id').value = '';
                    gFlashSuccess('Assignment created.');
                    loadAssignments(teamId);
                } else {
                    gFlashError(res.data.error || 'Failed to assign team.');
                }
            })
            .catch(function (e) { gFlashError('Request failed: ' + e.message); });
    };

    // ── Create Team ────────────────────────────────────────────────────
    window.openTeamModal = function () {
        document.getElementById('t-name').value = '';
        document.getElementById('t-desc').value = '';
        document.getElementById('t-canvas').value = '';
        document.getElementById('team-modal-err').style.display = 'none';
        openModal('team-modal');
    };

    window.createTeam = function () {
        var name   = document.getElementById('t-name').value.trim();
        var desc   = document.getElementById('t-desc').value.trim();
        var canvas = document.getElementById('t-canvas').value;
        if (!name) { showModalErr('team-modal-err', 'Name is required.'); return; }

        fetch('/api/wf/teams', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name: name, description: desc || null, canvas_type: canvas || null })
        })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
            .then(function (res) {
                if (res.ok) {
                    closeModal('team-modal');
                    gFlashSuccess('Team created.');
                    loadTeams();
                } else {
                    showModalErr('team-modal-err', res.data.error || 'Failed to create team.');
                }
            })
            .catch(function (e) { showModalErr('team-modal-err', 'Request failed: ' + e.message); });
    };

    // ══════════════════════════════════════════════════════════════════
    //  WORKFLOW TEMPLATES
    // ══════════════════════════════════════════════════════════════════
    window.loadTemplates = function () {
        fetch('/api/wf/templates')
            .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
            .then(function (d) {
                allTemplates = d.templates || [];
                renderTemplatesList(allTemplates);
                populateAssignTemplateSelect();
            })
            .catch(function (e) {
                document.getElementById('templates-list').innerHTML =
                    '<div class="wt-empty" style="color:var(--wt-danger);">Failed to load templates (' + e + ')</div>';
            });
    };

    function renderTemplatesList(templates) {
        var el = document.getElementById('templates-list');
        if (!templates || templates.length === 0) {
            el.innerHTML = '<div class="wt-empty">No workflow templates yet.</div>';
            return;
        }
        el.innerHTML = templates.map(function (t) {
            var stagesPreview = '';
            try { stagesPreview = JSON.stringify(JSON.parse(t.stages_json)); } catch(e) { stagesPreview = t.stages_json || ''; }
            var canvasBadge = canvasBadgeClass(t.canvas_type);
            var canvasLabel = t.canvas_type || 'Global';
            var sysTag = t.is_system ? '<span class="badge badge-system">SYSTEM</span> ' : '';
            return '<div class="wt-tmpl-row">' +
                '<div style="flex:1;min-width:0;">' +
                    '<div class="wt-tmpl-name">' + sysTag + escHtml(t.name) + '</div>' +
                    '<div class="wt-tmpl-meta">' +
                        '<span class="badge ' + canvasBadge + '" style="margin-right:6px;">' + escHtml(canvasLabel) + '</span>' +
                        'Policy: <strong>' + escHtml(t.approval_policy) + '</strong> &bull; ' +
                        'Kickback limit: <strong>' + escHtml(String(t.kickback_limit)) + '</strong>' +
                        (t.created_by ? ' &bull; by ' + escHtml(t.created_by) : '') +
                    '</div>' +
                    '<div class="wt-tmpl-preview" title="Stages JSON">' + escHtml(stagesPreview) + '</div>' +
                '</div>' +
                '<div class="wt-tmpl-actions">' +
                    (t.is_system ? '' : '<button class="wt-btn wt-btn-ghost wt-btn-sm" onclick="openForkModal(\'' + escHtml(t.id) + '\',\'' + escHtml(t.name) + '\')">Fork</button>') +
                    (!t.is_system ? '' : '<button class="wt-btn wt-btn-ghost wt-btn-sm" onclick="openForkModal(\'' + escHtml(t.id) + '\',\'' + escHtml(t.name) + '\')">Fork</button>') +
                '</div>' +
            '</div>';
        }).join('');
    }

    window.openTemplateModal = function () {
        ['tmpl-name','tmpl-stages','tmpl-roles'].forEach(function (id) { document.getElementById(id).value = ''; });
        document.getElementById('tmpl-canvas').value  = '';
        document.getElementById('tmpl-policy').value  = 'any_one';
        document.getElementById('tmpl-klimit').value  = '3';
        document.getElementById('tmpl-modal-err').style.display = 'none';
        openModal('tmpl-modal');
    };

    window.createTemplate = function () {
        var name      = document.getElementById('tmpl-name').value.trim();
        var canvas    = document.getElementById('tmpl-canvas').value;
        var stagesRaw = document.getElementById('tmpl-stages').value.trim();
        var rolesRaw  = document.getElementById('tmpl-roles').value.trim();
        var policy    = document.getElementById('tmpl-policy').value;
        var klimit    = parseInt(document.getElementById('tmpl-klimit').value) || 3;

        if (!name) { showModalErr('tmpl-modal-err', 'Name is required.'); return; }
        if (!stagesRaw) { showModalErr('tmpl-modal-err', 'Stages JSON is required.'); return; }

        try { JSON.parse(stagesRaw); } catch(e) { showModalErr('tmpl-modal-err', 'Stages JSON is invalid: ' + e.message); return; }
        if (rolesRaw) { try { JSON.parse(rolesRaw); } catch(e) { showModalErr('tmpl-modal-err', 'Roles JSON is invalid: ' + e.message); return; } }

        fetch('/api/wf/templates', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                name: name,
                canvas_type: canvas || null,
                stages_json: stagesRaw,
                roles_json: rolesRaw || '{}',
                approval_policy: policy,
                kickback_limit: klimit
            })
        })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
            .then(function (res) {
                if (res.ok) { closeModal('tmpl-modal'); gFlashSuccess('Template created.'); loadTemplates(); }
                else { showModalErr('tmpl-modal-err', res.data.error || 'Failed to create template.'); }
            })
            .catch(function (e) { showModalErr('tmpl-modal-err', 'Request failed: ' + e.message); });
    };

    // ── Fork template ──────────────────────────────────────────────────
    window.openForkModal = function (sourceId, sourceName) {
        document.getElementById('fork-source-id').value = sourceId;
        document.getElementById('fork-name').value = 'Copy of ' + sourceName;
        document.getElementById('fork-modal-err').style.display = 'none';
        openModal('fork-modal');
    };

    window.submitFork = function () {
        var sourceId = document.getElementById('fork-source-id').value;
        var newName  = document.getElementById('fork-name').value.trim();
        if (!newName) { showModalErr('fork-modal-err', 'New name is required.'); return; }

        fetch('/api/wf/templates/' + sourceId + '/fork', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name: newName })
        })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
            .then(function (res) {
                if (res.ok) { closeModal('fork-modal'); gFlashSuccess('Template forked: ' + newName); loadTemplates(); }
                else { showModalErr('fork-modal-err', res.data.error || 'Fork failed.'); }
            })
            .catch(function (e) { showModalErr('fork-modal-err', 'Request failed: ' + e.message); });
    };

    // ══════════════════════════════════════════════════════════════════
    //  DOCUMENT TEMPLATES
    // ══════════════════════════════════════════════════════════════════
    window.loadDocTemplates = function () {
        fetch('/api/wf/doc-templates')
            .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
            .then(function (d) {
                renderDocTemplatesTable(d.doc_templates || []);
            })
            .catch(function (e) {
                document.getElementById('doc-templates-body').innerHTML =
                    '<tr><td colspan="5" class="wt-empty" style="color:var(--wt-danger);">Failed to load doc templates (' + e + ')</td></tr>';
            });
    };

    var _currentIngestTemplateId = null;

    function renderDocTemplatesTable(templates) {
        var tbody = document.getElementById('doc-templates-body');
        if (!templates || templates.length === 0) {
            tbody.innerHTML = '<tr><td colspan="7" class="wt-empty">No document templates yet.</td></tr>';
            return;
        }
        tbody.innerHTML = templates.map(function (t) {
            var dtBadge  = docTypeBadgeClass(t.doc_type);
            var canvasBadge = canvasBadgeClass(t.canvas_type);
            var flags = '';
            if (t.is_ai_reference) flags += '<span class="badge badge-ai-ref" style="margin-right:4px;">AI Ref</span>';
            if (t.is_human_required) flags += '<span class="badge badge-human">Human Req</span>';
            if (t.is_system) flags += ' <span class="badge badge-system">SYS</span>';
            return '<tr>' +
                '<td><strong>' + escHtml(t.name) + '</strong></td>' +
                '<td><span class="badge ' + dtBadge + '">' + escHtml(t.doc_type) + '</span></td>' +
                '<td>' + (t.canvas_type ? '<span class="badge ' + canvasBadge + '">' + escHtml(t.canvas_type) + '</span>' : '<span style="color:var(--wt-muted);">Global</span>') + '</td>' +
                '<td style="color:var(--wt-muted);">' + escHtml(t.stage_scope || '&mdash;') + '</td>' +
                '<td>' + (flags || '<span style="color:var(--wt-muted);">—</span>') + '</td>' +
                '<td id="file-count-' + t.id + '" style="color:var(--wt-muted);font-size:12px;">—</td>' +
                '<td><button class="wt-btn wt-btn-ghost wt-btn-sm" onclick="openIngestPanel(' + JSON.stringify(t.id) + ',' + JSON.stringify(t.name) + ')">📁 Files</button></td>' +
            '</tr>';
        }).join('');
        // Load file counts async
        templates.forEach(function(t) { loadFileCount(t.id); });
    }

    function loadFileCount(templateId) {
        fetch('/api/wf/doc-templates/' + templateId + '/ingested-files')
            .then(function(r){ return r.ok ? r.json() : null; })
            .then(function(d) {
                if (!d) return;
                var el = document.getElementById('file-count-' + templateId);
                if (el) el.textContent = (d.count || 0) + ' file(s)';
            }).catch(function(){});
    }

    window.openIngestPanel = function(templateId, templateName) {
        _currentIngestTemplateId = templateId;
        document.getElementById('ingest-tmpl-name').textContent = templateName;
        document.getElementById('ingest-panel').style.display = '';
        document.getElementById('ingest-panel').scrollIntoView({behavior:'smooth'});
        loadIngestedFiles();
    };

    window.closeIngestPanel = function() {
        document.getElementById('ingest-panel').style.display = 'none';
        _currentIngestTemplateId = null;
    };

    window.handleIngestDrop = function(event) {
        event.preventDefault();
        document.getElementById('ingest-drop-zone').style.borderColor = '#3d444d';
        var file = event.dataTransfer.files[0];
        if (file) uploadIngestFile(file);
    };

    window.uploadIngestFile = function(file) {
        if (!file || !_currentIngestTemplateId) return;
        var prog = document.getElementById('ingest-progress');
        var bar  = document.getElementById('ingest-progress-bar');
        var msg  = document.getElementById('ingest-status-msg');
        prog.style.display = '';
        bar.style.width = '10%';
        msg.textContent = 'Uploading ' + file.name + '…';
        var fd = new FormData();
        fd.append('file', file);
        fetch('/api/wf/doc-templates/' + _currentIngestTemplateId + '/ingest', {
            method: 'POST', body: fd
        }).then(function(r) {
            bar.style.width = '60%';
            return r.json().then(function(d){ return {ok: r.ok, data: d}; });
        }).then(function(res) {
            if (res.ok) {
                bar.style.width = '100%';
                bar.style.background = '#3fb950';
                msg.textContent = '✓ Ingested: ' + file.name;
                setTimeout(function(){ prog.style.display='none'; bar.style.width='0%'; bar.style.background='#58a6ff'; }, 3000);
                loadIngestedFiles();
                loadFileCount(_currentIngestTemplateId);
            } else {
                bar.style.background = '#f85149';
                msg.textContent = '✗ Error: ' + (res.data.error || 'Upload failed');
            }
        }).catch(function(e) {
            bar.style.background = '#f85149';
            msg.textContent = '✗ Network error: ' + e.message;
        });
    };

    window.loadIngestedFiles = function() {
        if (!_currentIngestTemplateId) return;
        fetch('/api/wf/doc-templates/' + _currentIngestTemplateId + '/ingested-files')
            .then(function(r){ return r.json(); })
            .then(function(d) {
                var list = document.getElementById('ingested-files-list');
                if (!d.files || d.files.length === 0) {
                    list.innerHTML = '<p style="color:#484f58;font-size:12px;">No files ingested yet.</p>';
                    return;
                }
                list.innerHTML = d.files.map(function(f) {
                    var statusColor = {completed:'#3fb950',failed:'#f85149',processing:'#f0a500',pending:'#8b949e'}[f.ingestion_status] || '#8b949e';
                    return '<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:#161b22;border:1px solid #30363d;border-radius:6px;margin-bottom:6px;">' +
                        '<div style="min-width:0;">' +
                            '<div style="font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + escHtml(f.filename) + '</div>' +
                            '<div style="font-size:10px;color:#8b949e;margin-top:2px;">' +
                                escHtml(f.file_type.toUpperCase()) + ' · ' +
                                (f.chunk_count || 0) + ' chunks · ' +
                                (f.page_count || '?') + ' pages' +
                            '</div>' +
                        '</div>' +
                        '<div style="display:flex;align-items:center;gap:8px;flex-shrink:0;">' +
                            '<span style="font-size:10px;color:' + statusColor + ';">' + f.ingestion_status + '</span>' +
                            '<button style="background:none;border:none;color:#f85149;cursor:pointer;font-size:12px;" title="Delete" onclick="deleteIngestedFile(' + JSON.stringify(f.id) + ')">✕</button>' +
                        '</div>' +
                    '</div>';
                }).join('');
            }).catch(function(e){ console.error('loadIngestedFiles:', e); });
    };

    window.deleteIngestedFile = function(ingestId) {
        if (!_currentIngestTemplateId || !confirm('Delete this ingested file and its chunks?')) return;
        fetch('/api/wf/doc-templates/' + _currentIngestTemplateId + '/ingested-files/' + ingestId, {method:'DELETE'})
            .then(function(r){ if(r.ok) { loadIngestedFiles(); loadFileCount(_currentIngestTemplateId); } })
            .catch(function(e){ console.error('deleteIngestedFile:', e); });
    };

    window.openDocTemplateModal = function () {
        ['dt-name','dt-stage','dt-schema'].forEach(function (id) { document.getElementById(id).value = ''; });
        document.getElementById('dt-type').value   = 'checklist';
        document.getElementById('dt-canvas').value = '';
        document.getElementById('dt-ai-ref').checked    = false;
        document.getElementById('dt-human-req').checked = false;
        document.getElementById('doc-modal-err').style.display = 'none';
        openModal('doc-tmpl-modal');
    };

    window.createDocTemplate = function () {
        var name    = document.getElementById('dt-name').value.trim();
        var docType = document.getElementById('dt-type').value;
        var canvas  = document.getElementById('dt-canvas').value;
        var stage   = document.getElementById('dt-stage').value.trim();
        var schema  = document.getElementById('dt-schema').value.trim();
        var aiRef   = document.getElementById('dt-ai-ref').checked;
        var humanReq = document.getElementById('dt-human-req').checked;

        if (!name) { showModalErr('doc-modal-err', 'Name is required.'); return; }
        if (!schema) { showModalErr('doc-modal-err', 'Schema JSON is required.'); return; }
        try { JSON.parse(schema); } catch(e) { showModalErr('doc-modal-err', 'Schema JSON is invalid: ' + e.message); return; }

        fetch('/api/wf/doc-templates', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                name: name,
                doc_type: docType,
                schema_json: schema,
                canvas_type: canvas || null,
                stage_scope: stage || null,
                is_ai_reference: aiRef,
                is_human_required: humanReq
            })
        })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
            .then(function (res) {
                if (res.ok) { closeModal('doc-tmpl-modal'); gFlashSuccess('Document template created.'); loadDocTemplates(); }
                else { showModalErr('doc-modal-err', res.data.error || 'Failed to create doc template.'); }
            })
            .catch(function (e) { showModalErr('doc-modal-err', 'Request failed: ' + e.message); });
    };

    // ══════════════════════════════════════════════════════════════════
    //  MODAL HELPERS
    // ══════════════════════════════════════════════════════════════════
    window.openModal = function (id) {
        var m = document.getElementById(id);
        m.classList.add('open');
        // close on backdrop click
        m.addEventListener('click', function backdropHandler(e) {
            if (e.target === m) { closeModal(id); m.removeEventListener('click', backdropHandler); }
        });
    };
    window.closeModal = function (id) { document.getElementById(id).classList.remove('open'); };

    function showModalErr(errElId, msg) {
        var el = document.getElementById(errElId);
        el.textContent = msg;
        el.style.display = 'block';
    }

    // ── Global flash ───────────────────────────────────────────────────
    function gFlashSuccess(msg) {
        var el = document.getElementById('g-flash-success');
        el.textContent = msg;
        el.style.display = 'block';
        setTimeout(function () { el.style.display = 'none'; }, 3500);
    }
    function gFlashError(msg) {
        var el = document.getElementById('g-flash-error');
        el.textContent = msg;
        el.style.display = 'block';
        setTimeout(function () { el.style.display = 'none'; }, 5000);
    }
    window.gFlashSuccess = gFlashSuccess;
    window.gFlashError   = gFlashError;

    // ── Badge helpers ──────────────────────────────────────────────────
    function canvasBadgeClass(canvas) {
        var map = { NDC: 'badge-ndc', SDC: 'badge-sdc', PDC: 'badge-pdc', BDC: 'badge-bdc', DDC: 'badge-ddc', ODC: 'badge-odc', IDC: 'badge-idc' };
        return (canvas && map[canvas]) ? map[canvas] : 'badge-global';
    }

    function docTypeBadgeClass(docType) {
        var map = { checklist: 'badge-checklist', form: 'badge-form', sop_reference: 'badge-sop', standard: 'badge-standard' };
        return map[docType] || 'badge-global';
    }

    // ── HTML escape ────────────────────────────────────────────────────
    function escHtml(str) {
        if (str == null) return '';
        return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    // ── Boot (after all functions are defined) ─────────────────────────
    loadTeams();
    loadTemplates();
    loadDocTemplates();

})();
</script>
{% endblock %}