{% extends "base.html" %}
{% block title %}Scan #{{ scan.id }} - Hermetic Suite{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="icon" id="scan">Scan #{{ scan.id }}</h1>
    <p class="subtitle">{{ scan.scan_type.value }} scan details</p>
</div>

<div class="info-cards">
    <div class="info-card">
        <h4>Scan Information</h4>
        <div class="info-item">
            <span class="info-label">Type:</span>
            <span>{{ scan.scan_type.value }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">Status:</span>
            <span class="badge badge-{{ scan.status.value }}">{{ scan.status.value }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">Started:</span>
            <span>{{ scan.started_at.strftime('%Y-%m-%d %H:%M:%S') if scan.started_at else 'N/A' }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">Completed:</span>
            <span>{{ scan.completed_at.strftime('%Y-%m-%d %H:%M:%S') if scan.completed_at else 'N/A' }}</span>
        </div>
        {% if scan.server %}
        <div class="info-item">
            <span class="info-label">Target:</span>
            <a href="{{ url_for('servers.server_detail', server_id=scan.server_id) }}">
                {{ scan.server.ip_address }}
            </a>
        </div>
        {% endif %}
    </div>
    
    <div class="info-card">
        <h4>Results Summary</h4>
        <div class="info-item">
            <span class="info-label">Hosts Scanned:</span>
            <span>{{ scan.hosts_scanned or 0 }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">Services Found:</span>
            <span>{{ scan.services_found or 0 }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">Vulnerabilities:</span>
            <span>{{ scan.vulnerabilities_found or 0 }}</span>
        </div>
    </div>
</div>

{% if scan.error_message %}
<div class="card">
    <div class="card-header">
        <h2>⚠️ Error</h2>
    </div>
    <div class="card-body">
        <pre class="error-output">{{ scan.error_message }}</pre>
    </div>
</div>
{% endif %}

{% if scan.parsed_results %}
<div class="card">
    <div class="card-header">
        <h2>Parsed Results</h2>
    </div>
    <div class="card-body">
        <pre class="code-block">{{ scan.parsed_results | tojson(indent=2) }}</pre>
    </div>
</div>
{% endif %}

{% if scan.raw_output %}
<div class="card">
    <div class="card-header">
        <h2>Raw Output</h2>
        <button onclick="toggleRawOutput()" class="btn btn-sm">Toggle</button>
    </div>
    <div class="card-body">
        <pre id="raw-output" class="code-block" style="display: none; max-height: 500px; overflow: auto;">{{ scan.raw_output }}</pre>
    </div>
</div>
{% endif %}

<script>
function toggleRawOutput() {
    var el = document.getElementById('raw-output');
    el.style.display = el.style.display === 'none' ? 'block' : 'none';
}
</script>
{% endblock %}