{% extends "base.html" %}

{% block title %}Logs - certmesh{% endblock %}

{% block content %}
<meta name="csrf-token" content="{{ csrf_token }}">

<!-- Log Controls -->
<div class="card mb-4">
    <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
        <h5 class="mb-0"><i class="bi bi-journal-text me-2"></i>Application Logs</h5>
        <div class="d-flex flex-wrap gap-2 align-items-center">
            <!-- Level Filter -->
            <select class="form-select form-select-sm" id="logLevelFilter" style="width: auto;">
                <option value="">All Levels</option>
                <option value="DEBUG">DEBUG</option>
                <option value="INFO">INFO</option>
                <option value="WARNING">WARNING</option>
                <option value="ERROR">ERROR</option>
                <option value="CRITICAL">CRITICAL</option>
            </select>
            <!-- Search -->
            <div class="input-group input-group-sm" style="max-width: 300px;">
                <span class="input-group-text"><i class="bi bi-search"></i></span>
                <input type="text" class="form-control" id="logSearch"
                       placeholder="Search logs..." aria-label="Search logs">
            </div>
            <!-- Date picker for historical queries -->
            <input type="date" class="form-control form-control-sm" id="logDatePicker"
                   style="width: auto;" title="Query historical logs">
            <!-- Refresh -->
            <button class="btn btn-sm btn-outline-primary" id="logRefreshBtn" title="Refresh">
                <i class="bi bi-arrow-clockwise"></i>
            </button>
            <!-- Auto-scroll toggle -->
            <div class="form-check form-switch ms-2">
                <input class="form-check-input" type="checkbox" id="logAutoScroll" checked>
                <label class="form-check-label small" for="logAutoScroll">Auto-scroll</label>
            </div>
        </div>
    </div>
    <div class="card-body p-0">
        <!-- Log stats bar -->
        <div class="d-flex gap-3 px-3 py-2 border-bottom small text-body-secondary" id="logStats">
            <span id="logTotalCount">--</span>
            <span id="logStoreInfo">--</span>
        </div>
        <!-- Log entries -->
        <div class="cm-log-container" id="logContainer">
            <table class="table table-sm table-hover mb-0 cm-log-table">
                <caption>Application Logs</caption>
                <thead class="sticky-top">
                    <tr>
                        <th style="width: 180px;">Timestamp</th>
                        <th style="width: 80px;">Level</th>
                        <th style="width: 180px;">Logger</th>
                        <th>Message</th>
                    </tr>
                </thead>
                <tbody id="logTableBody">
                    <tr>
                        <td colspan="4" class="text-center py-5 text-body-secondary">
                            <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                            Loading logs...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- Pagination -->
    <div class="card-footer d-flex justify-content-between align-items-center">
        <small class="text-body-secondary" id="logPagination">Showing 0 logs</small>
        <div class="btn-group btn-group-sm">
            <button class="btn btn-outline-secondary" id="logPrevBtn" disabled>
                <i class="bi bi-chevron-left"></i> Prev
            </button>
            <button class="btn btn-outline-secondary" id="logNextBtn" disabled>
                Next <i class="bi bi-chevron-right"></i>
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts_extra %}
<script src="/dashboard/static/logs.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        CertMeshLogs.init();
    });
</script>
{% endblock %}