{% extends "base.html" %}
{% block title %}Compliance Gaps — {{ opp.title }} - ICDEV™{% endblock %}
{% block content %}
<div class="page-header">
    <div>
        <h1>Compliance Gaps</h1>
        <div style="color:var(--text-secondary); font-size:13px;">{{ opp.agency }} · {{ opp.solicitation_number }}</div>
    </div>
    <div style="display:flex; gap:8px;">
        <a href="/proposals/{{ opp.id }}" class="btn btn-secondary">&larr; Back to Opportunity</a>
    </div>
</div>

<div class="stat-grid" style="grid-template-columns: repeat(4, 1fr); margin-bottom:20px;">
    <div class="stat-card">
        <div class="stat-value" style="color:var(--status-red);">{{ orphaned|length }}</div>
        <div class="stat-label">Not Addressed</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ compliance_total }}</div>
        <div class="stat-label">Total Requirements</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ sections|length }}</div>
        <div class="stat-label">Available Sections</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" style="color:var(--status-yellow,#ffc107);">{{ gap_pct|round(1) }}%</div>
        <div class="stat-label">Gap Coverage</div>
    </div>
</div>

{% if orphaned %}
<div class="table-container">
    <table id="gaps-table">
        <thead>
            <tr>
                <th>#</th>
                <th>Requirement Text</th>
                <th>RFP Section</th>
                <th>Volume</th>
                <th>Type</th>
                <th>Assign to Section</th>
            </tr>
        </thead>
        <tbody>
            {% for item in orphaned %}
            <tr>
                <td>{{ item.sort_order or loop.index }}</td>
                <td style="max-width:400px;" title="{{ item.requirement_text }}">
                    {{ item.requirement_text[:120] if item.requirement_text else '—' }}{% if item.requirement_text and item.requirement_text|length > 120 %}...{% endif %}
                </td>
                <td>{{ item.section_ref or '—' }}</td>
                <td>{{ item.volume_ref or '—' }}</td>
                <td>
                    {% set type_colors = {'shall': 'error', 'must': 'error', 'will': 'warning', 'should': 'info'} %}
                    <span class="badge badge-{{ type_colors.get(item.requirement_type, 'info') }}">{{ item.requirement_type or '—' }}</span>
                </td>
                <td>
                    <select onchange="assignToSection('{{ item.id }}', this.value)"
                            style="background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);padding:4px;border-radius:4px;min-width:180px;">
                        <option value="">— Assign Section —</option>
                        {% for sec in sections %}
                        <option value="{{ sec.id }}">{{ sec.section_number }} — {{ sec.title[:40] }}</option>
                        {% endfor %}
                    </select>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="card" style="padding:32px; text-align:center;">
    <div style="font-size:48px; margin-bottom:16px;">✓</div>
    <h3>No compliance gaps found</h3>
    <p style="color:var(--text-secondary);">All requirements have been addressed or marked not applicable.</p>
</div>
{% endif %}

<script>
function assignToSection(complianceId, sectionId) {
    if (!sectionId) return;
    fetch('/api/proposals/compliance/' + complianceId, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({proposal_section_id: sectionId})
    }).then(function(r) { return r.json(); }).then(function(resp) {
        if (resp.error) { alert(resp.error); }
        else { location.reload(); }
    });
}
</script>
{% endblock %}