{% extends "base.html" %}
{% block title %}INTRUDEX{% endblock %}
{% block head %}
<script src="{{ url_for('static', filename='js/chart.umd.js') }}"></script>
{% endblock %}
{% block content %}
<div class="min-h-screen flex flex-col">
   <main class="flex-1 max-w-7xl mx-auto w-full px-4 py-6">
      <!-- Summary Cards -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
         <a href="/view/sysmon" class="bg-gradient-to-br from-blue-900 to-blue-600 rounded-2xl shadow-lg p-6 fade-in hover-raise block transition hover:scale-105">
            <div class="flex items-center mb-2"><i class="fa-solid fa-microchip text-blue-400 text-2xl mr-3"></i><span class="text-lg font-semibold">Sysmon</span></div>
            <div class="text-3xl font-bold text-blue-200" id="stat-sysmon">0</div>
         </a>
         <a href="/view/application" class="bg-gradient-to-br from-green-900 to-green-700 rounded-2xl shadow-lg p-6 fade-in hover-raise block transition hover:scale-105">
            <div class="flex items-center mb-2"><i class="fa-solid fa-rocket text-green-400 text-2xl mr-3"></i><span class="text-lg font-semibold">Application</span></div>
            <div class="text-3xl font-bold text-green-200" id="stat-application">0</div>
         </a>
         <a href="/view/security" class="bg-gradient-to-br from-purple-900 to-purple-700 rounded-2xl shadow-lg p-6 fade-in hover-raise block transition hover:scale-105">
            <div class="flex items-center mb-2"><i class="fa-solid fa-shield-halved text-purple-400 text-2xl mr-3"></i><span class="text-lg font-semibold">Security</span></div>
            <div class="text-3xl font-bold text-purple-200" id="stat-security">0</div>
         </a>
         <a href="/view/system" class="bg-gradient-to-br from-red-900 to-red-700 rounded-2xl shadow-lg p-6 fade-in hover-raise block transition hover:scale-105">
            <div class="flex items-center mb-2"><i class="fa-solid fa-server text-red-400 text-2xl mr-3"></i><span class="text-lg font-semibold">System</span></div>
            <div class="text-3xl font-bold text-red-200" id="stat-system">0</div>
         </a>
         <div class="bg-gradient-to-br from-cyan-400 to-blue-900 rounded-2xl shadow-lg p-6 fade-in hover-raise flex flex-col justify-between">
            <!-- Integration Status (not clickable) -->
            <div class="flex items-center mb-2">
               <i class="fa-solid fa-plug text-cyan-200 text-2xl mr-3"></i>
               <span class="text-lg font-semibold">Integration Status</span>
            </div>
            <div class="flex items-center gap-2 mt-2">
               <span id="integration-status-dot" class="inline-block w-3 h-3 rounded-full bg-green-400"></span>
               <span id="integration-status-label" class="text-cyan-100 font-bold">Connected</span>
            </div>
            <div class="text-xs text-cyan-200 mt-1" id="integration-status-desc">All integrations operational</div>
         </div>
      </div>
      <!-- Chart -->
      <div class="bg-gray-900 rounded-xl shadow-lg p-6 mb-8 fade-in hover-raise">
         <h2 class="text-xl font-bold mb-4">Event Distribution</h2>
         <canvas id="eventsChart" height="80"></canvas>
      </div>
      <!-- Logs Table -->
      <div class="bg-gray-900 rounded-xl shadow-lg p-6 mb-8 fade-in hover-raise">
         <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold">Recent Logs</h2>
         </div>
         <div class="overflow-x-auto no-scrollbar">
            <table class="min-w-full text-sm text-left">
               <thead>
                  <tr class="text-gray-400 border-b border-gray-700">
                     <th class="py-2 px-3">Type</th>
                     <th class="py-2 px-3">Time</th>
                     <th class="py-2 px-3">Event</th>
                     <th class="py-2 px-3">User</th>
                     <th class="py-2 px-3">Details</th>
                     <th class="py-2 px-3">Details</th>
                     <!-- Add column for View button -->
                  </tr>
               </thead>
               <tbody id="log-table-body" hx-get="/api/logs/recent" hx-trigger="load, every 5s" hx-swap="outerHTML">
                  <!-- Server will render <tbody>...</tbody> here -->
               </tbody>
            </table>
         </div>
      </div>
      <!-- More Widgets -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
         <!-- Top Users -->
         <div class="bg-gray-900 rounded-xl shadow-lg p-6 fade-in hover-raise flex flex-col dashboard-widget-min-h">
            <h2 class="text-xl font-bold mb-4">Top Users</h2>
            <div class="flex-1 dashboard-widget-scroll">
               <ul id="top-users" class="space-y-3" hx-get="/api/logs/top-users" hx-trigger="load, every 5s" hx-swap="outerHTML">
                  <!-- Server will render <ul>...</ul> here -->
               </ul>
            </div>
         </div>
         <!-- Recent Alerts -->
         <div class="bg-gray-900 rounded-xl shadow-lg p-6 fade-in hover-raise flex flex-col dashboard-widget-min-h">
            <h2 class="text-xl font-bold mb-4">Recent Alerts</h2>
            <div class="flex-1 dashboard-widget-scroll">
               <ul id="recent-alerts" class="space-y-3" hx-get="/api/logs/alerts" hx-trigger="load, every 5s" hx-swap="outerHTML">
                  <!-- Server will render <ul>...</ul> here -->
               </ul>
            </div>
         </div>
      </div>
   </main>
</div>
<!-- Modal -->
<div id="modal-bg" class="modal-bg" style="display:none;">
   <div class="modal-content relative">
      <span class="modal-close" onclick="closeModal()">&times;</span>
      <div id="modal-body"></div>
   </div>
</div>
<!-- Popover for enrichment -->
<div id="popover-bg" class="popover-bg" style="display:none;">
   <div id="popover-content" class="popover-content" style="display:none;">
      <div class="popover-arrow"></div>
      <div id="popover-inner"></div>
   </div>
</div>
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
{% endblock %}