{% extends "base.html" %}
{% block title %}Vulnerabilities - Hermetic Suite{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="icon" id="vulnerabilities">Vulnerabilities</h1>
    <p class="subtitle">All discovered security vulnerabilities</p>
</div>

<div class="filters">
    <form action="" method="GET" class="filter-form">
        <div class="form-group">
            <label>Severity:</label>
            <select name="severity" onchange="this.form.submit()">
                <option value="">All</option>
                <option value="critical" {% if severity_filter == 'critical' %}selected{% endif %}>Critical</option>
                <option value="high" {% if severity_filter == 'high' %}selected{% endif %}>High</option>
                <option value="medium" {% if severity_filter == 'medium' %}selected{% endif %}>Medium</option>
                <option value="low" {% if severity_filter == 'low' %}selected{% endif %}>Low</option>
                <option value="info" {% if severity_filter == 'info' %}selected{% endif %}>Info</option>
            </select>
        </div>
        <div class="form-group">
            <label>Status:</label>
            <select name="status" onchange="this.form.submit()">
                <option value="open" {% if status_filter == 'open' %}selected{% endif %}>Open</option>
                <option value="acknowledged" {% if status_filter == 'acknowledged' %}selected{% endif %}>Acknowledged</option>
                <option value="resolved" {% if status_filter == 'resolved' %}selected{% endif %}>Resolved</option>
                <option value="all" {% if status_filter == 'all' %}selected{% endif %}>All</option>
            </select>
        </div>
    </form>
</div>

<div class="card">
    <div class="card-body">
        {% if vulnerabilities %}
        <table class="table">
            <thead>
                <tr>
                    <th>Severity</th>
                    <th>CVE</th>
                    <th>Title</th>
                    <th>Server</th>
                    <th>Service</th>
                    <th>CVSS</th>
                    <th>Detected</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for vuln in vulnerabilities %}
                <tr class="{% if vuln.is_acknowledged %}acknowledged{% endif %} {% if vuln.is_resolved %}resolved{% endif %}">
                    <td>
                        <span class="badge badge-{{ vuln.severity.value if vuln.severity else 'info' }}">
                            {{ vuln.severity.value.upper() if vuln.severity else 'INFO' }}
                        </span>
                    </td>
                    <td>
                        {% if vuln.cve_id %}
                        <a href="{{ url_for('cve.cve_detail', cve_id=vuln.cve_id) }}" class="cve-link">
                            {{ vuln.cve_id }}
                        </a>
                        {% else %}
                        -
                        {% endif %}
                    </td>
                    <td>
                        <strong>{{ vuln.title }}</strong>
                        {% if vuln.recommendation %}
                        <p class="text-muted small">💡 {{ vuln.recommendation[:80] }}...</p>
                        {% endif %}
                    </td>
                    <td>
                        {% if vuln.server %}
                        <a href="{{ url_for('servers.server_detail', server_id=vuln.server_id) }}">
                            {{ vuln.server.ip_address }}
                        </a>
                        {% endif %}
                    </td>
                    <td>
                        {{ vuln.affected_service or '-' }}
                        {% if vuln.affected_port %}:{{ vuln.affected_port }}{% endif %}
                    </td>
                    <td>{{ vuln.cvss_score or '-' }}</td>
                    <td>{{ vuln.first_detected.strftime('%Y-%m-%d') if vuln.first_detected else '-' }}</td>
                    <td class="actions">
                        {% if not vuln.is_resolved %}
                            {% if not vuln.is_acknowledged %}
                            <button type="button" class="btn btn-sm btn-secondary" title="Acknowledge" 
                                onclick="showAcknowledgeModal({{ vuln.id }}, '{{ vuln.cve_id or vuln.title | e }}')">✓</button>
                            {% endif %}
                            <button type="button" class="btn btn-sm btn-success" title="Mark Resolved"
                                onclick="showResolveModal({{ vuln.id }}, '{{ vuln.cve_id or vuln.title | e }}')">✔</button>
                        {% else %}
                            <span class="text-muted">Resolved</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p class="empty-state">
            {% if status_filter == 'open' %}
            No open vulnerabilities found 🎉
            {% else %}
            No vulnerabilities matching your filters.
            {% endif %}
        </p>
        {% endif %}
    </div>
</div>

<!-- Acknowledge Modal -->
<div id="acknowledge-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Acknowledge Vulnerability</h3>
            <button type="button" class="modal-close" onclick="closeModal('acknowledge-modal')">&times;</button>
        </div>
        <form id="acknowledge-form" method="POST">
            <div class="modal-body">
                <p>Acknowledging: <strong id="ack-vuln-name"></strong></p>
                <div class="form-group">
                    <label for="ack-reason">Reason / Notes</label>
                    <textarea id="ack-reason" name="reason" rows="3" 
                        placeholder="e.g., Reviewed - low risk in our environment, will patch in next maintenance window"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('acknowledge-modal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Acknowledge</button>
            </div>
        </form>
    </div>
</div>

<!-- Resolve Modal -->
<div id="resolve-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Resolve Vulnerability</h3>
            <button type="button" class="modal-close" onclick="closeModal('resolve-modal')">&times;</button>
        </div>
        <form id="resolve-form" method="POST">
            <div class="modal-body">
                <p>Resolving: <strong id="resolve-vuln-name"></strong></p>
                <div class="form-group">
                    <label for="resolve-reason">Resolution Reason</label>
                    <select id="resolve-reason" name="reason">
                        <option value="patched">Patched - Applied security update</option>
                        <option value="mitigated">Mitigated - Applied workaround</option>
                        <option value="false_positive">False Positive - Not actually vulnerable</option>
                        <option value="accepted_risk">Accepted Risk - Will not fix</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="resolve-notes">Notes (optional)</label>
                    <textarea id="resolve-notes" name="notes" rows="2" 
                        placeholder="e.g., Updated nginx to 1.24.0"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('resolve-modal')">Cancel</button>
                <button type="submit" class="btn btn-success">Mark Resolved</button>
            </div>
        </form>
    </div>
</div>

<style>
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background: var(--bg-primary);
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.modal-header h3 {
    margin: 0;
}
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
}
.modal-close:hover {
    color: var(--text-primary);
}
.modal-body {
    padding: 1.5rem;
}
.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
</style>

<script>
function showAcknowledgeModal(vulnId, vulnName) {
    document.getElementById('ack-vuln-name').textContent = vulnName;
    document.getElementById('acknowledge-form').action = '/vulnerabilities/' + vulnId + '/acknowledge';
    document.getElementById('ack-reason').value = '';
    document.getElementById('acknowledge-modal').style.display = 'flex';
}

function showResolveModal(vulnId, vulnName) {
    document.getElementById('resolve-vuln-name').textContent = vulnName;
    document.getElementById('resolve-form').action = '/vulnerabilities/' + vulnId + '/resolve';
    document.getElementById('resolve-reason').value = 'patched';
    document.getElementById('resolve-notes').value = '';
    document.getElementById('resolve-modal').style.display = 'flex';
}

function closeModal(modalId) {
    document.getElementById(modalId).style.display = 'none';
}

// Close modal on escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        document.querySelectorAll('.modal').forEach(m => m.style.display = 'none');
    }
});

// Close modal on background click
document.querySelectorAll('.modal').forEach(modal => {
    modal.addEventListener('click', function(e) {
        if (e.target === this) {
            this.style.display = 'none';
        }
    });
});
</script>
{% endblock %}