<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LogLama Viewer</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">LogLama Viewer</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Logs</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="stats-link">Statistics</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="export-logs">Export</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center">
                    <div class="form-check form-switch me-3">
                        <input class="form-check-input" type="checkbox" id="auto-refresh">
                        <label class="form-check-label text-light" for="auto-refresh">Auto-refresh</label>
                        <span id="auto-refresh-indicator" class="badge bg-success ms-1" style="display: none;">•</span>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="dark-mode-toggle">
                        <label class="form-check-label text-light" for="dark-mode-toggle">Dark Mode</label>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    
    <!-- Notification Area - Moved to center -->
    <div id="notification-area" class="position-fixed top-50 start-50 translate-middle" style="z-index: 1050;"></div>

    <div class="container-fluid mt-3">
        <div class="row">
            <!-- Filters Panel -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header">
                        <h5>Filters</h5>
                    </div>
                    <div class="card-body">
                        <form id="filter-form">
                            <div class="mb-3">
                                <label for="level-filter" class="form-label">Log Level</label>
                                <select class="form-select" id="level-filter">
                                    <option value="">All Levels</option>
                                    <!-- Levels will be populated dynamically -->
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="component-filter" class="form-label">Component</label>
                                <select class="form-select" id="component-filter">
                                    <option value="">All Components</option>
                                    <!-- Components will be populated dynamically -->
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="start-date" class="form-label">Start Date</label>
                                <input type="datetime-local" class="form-control" id="start-date">
                            </div>
                            <div class="mb-3">
                                <label for="end-date" class="form-label">End Date</label>
                                <input type="datetime-local" class="form-control" id="end-date">
                            </div>
                            <div class="mb-3">
                                <label for="search" class="form-label">Search</label>
                                <input type="text" class="form-control" id="search" placeholder="Search logs...">
                            </div>
                            <button type="submit" class="btn btn-primary w-100">Apply Filters</button>
                            <button type="button" class="btn btn-secondary w-100 mt-2" id="reset-filters">Reset Filters</button>
                        </form>
                    </div>
                </div>
                
                <!-- Statistics Panel (initially hidden) -->
                <div class="card mt-3" id="stats-panel" style="display: none;">
                    <div class="card-header">
                        <h5>Statistics</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <h6>Log Levels</h6>
                            <div id="level-stats"></div>
                        </div>
                        <div class="mb-3">
                            <h6>Components</h6>
                            <div id="component-stats"></div>
                        </div>
                        <div class="mb-3">
                            <h6>Date Range</h6>
                            <div id="date-range-stats"></div>
                        </div>
                        <div class="mb-3">
                            <h6>Total Logs</h6>
                            <div id="total-logs"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Logs Panel -->
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5>Logs</h5>
                        <div>
                            <select class="form-select form-select-sm d-inline-block w-auto" id="page-size">
                                <option value="50">50 per page</option>
                                <option value="100" selected>100 per page</option>
                                <option value="200">200 per page</option>
                                <option value="500">500 per page</option>
                            </select>
                            <button class="btn btn-sm btn-outline-secondary ms-2" id="refresh-logs">
                                <i class="bi bi-arrow-clockwise"></i> Refresh
                            </button>
                            <button class="btn btn-sm btn-outline-danger ms-2" id="clear-logs">
                                <i class="bi bi-trash"></i> Clear All Logs
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th class="sortable" data-sort="timestamp">Timestamp <span class="sort-icon"></span></th>
                                        <th class="sortable" data-sort="level">Level <span class="sort-icon"></span></th>
                                        <th class="sortable" data-sort="logger_name">Component <span class="sort-icon"></span></th>
                                        <th class="sortable" data-sort="message">Message <span class="sort-icon"></span></th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="logs-table-body">
                                    <!-- Logs will be populated dynamically -->
                                </tbody>
                            </table>
                        </div>
                        <div id="pagination" class="d-flex justify-content-between align-items-center mt-3">
                            <div>
                                <span id="pagination-info">Showing 0 of 0 logs</span>
                            </div>
                            <nav>
                                <ul class="pagination mb-0">
                                    <!-- Pagination will be populated dynamically -->
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Log Detail Modal -->
    <div class="modal fade" id="log-detail-modal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Log Detail</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>ID:</strong> <span id="detail-id"></span></p>
                            <p><strong>Timestamp:</strong> <span id="detail-timestamp"></span></p>
                            <p><strong>Level:</strong> <span id="detail-level"></span></p>
                            <p><strong>Component:</strong> <span id="detail-component"></span></p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Thread:</strong> <span id="detail-thread"></span></p>
                            <p><strong>Process:</strong> <span id="detail-process"></span></p>
                            <p><strong>File:</strong> <span id="detail-file"></span></p>
                            <p><strong>Line:</strong> <span id="detail-line"></span></p>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12">
                            <h6>Message</h6>
                            <pre id="detail-message" class="p-2 bg-light"></pre>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12">
                            <h6>Context</h6>
                            <pre id="detail-context" class="p-2 bg-light"></pre>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>
