{% extends "base.html" %}
{% block title %}Network Monitor{% endblock %}
{% block page_title %}Network Traffic Analysis{% endblock %}

{% block content %}
<div class="row g-4 mt-2">
    <div class="col-md-3 fade-in-up">
        <div class="cyber-card p-3 text-center border-primary">
            <h6 class="text-muted text-uppercase">Total Packets</h6>
            <h2 class="text-white display-6 fw-bold" id="count-All">0</h2>
        </div>
    </div>
    <div class="col-md-3 fade-in-up" style="animation-delay: 0.1s;">
        <div class="cyber-card p-3 text-center border-info">
            <h6 class="text-muted text-uppercase">TCP Traffic</h6>
            <h2 class="text-info display-6 fw-bold" id="count-TCP">0</h2>
        </div>
    </div>
    <div class="col-md-3 fade-in-up" style="animation-delay: 0.2s;">
        <div class="cyber-card p-3 text-center border-warning">
            <h6 class="text-muted text-uppercase">UDP Traffic</h6>
            <h2 class="text-warning display-6 fw-bold" id="count-UDP">0</h2>
        </div>
    </div>
    <div class="col-md-3 fade-in-up" style="animation-delay: 0.3s;">
        <div class="cyber-card p-3 text-center border-danger">
            <h6 class="text-muted text-uppercase">DNS Queries</h6>
            <h2 class="text-danger display-6 fw-bold" id="count-DNS">0</h2>
        </div>
    </div>
</div>

<div class="row g-4 mt-3">
    <div class="col-lg-4 fade-in-up" style="animation-delay: 0.4s;">
        <div class="cyber-card p-4 h-100">
            <h5 class="mb-4 text-accent">Protocol Distribution</h5>
            <div style="height: 300px;">
                <canvas id="protocolChart"></canvas>
            </div>
            <div class="mt-4">
                <h6 class="text-muted mb-3">Top Talkers (Source IP)</h6>
                <ul class="list-group list-group-flush" id="top-sources">
                    <li class="list-group-item bg-transparent text-muted">Listening...</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-lg-8 fade-in-up" style="animation-delay: 0.5s;">
        <div class="cyber-card p-4 h-100">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="text-white"><i class="bi bi-list-columns-reverse me-2"></i>Live Packet Feed</h5>
                <button class="btn btn-sm btn-outline-success" id="download-btn">
                    <i class="bi bi-download me-1"></i> Export Log
                </button>
            </div>
            <div class="table-responsive">
                <table id="packet-table" class="table table-dark table-hover table-sm w-100" style="font-size: 0.9rem;">
                    <thead>
                        <tr class="text-accent">
                            <th>Time</th>
                            <th>Source</th>
                            <th>Destination</th>
                            <th>Protocol</th>
                            <th>Length</th>
                        </tr>
                    </thead>
                    <tbody class="font-monospace">
                        </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="packetDetailModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="cyber-card modal-content bg-dark text-white">
            <div class="modal-header border-bottom border-secondary">
                <h5 class="modal-title">Packet Inspection</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="packet-detail-body">
                </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
<script src="{{ url_for('static', filename='js/network.js') }}"></script>
{% endblock %}