{{ define "logs" }}{{ template "header" . }}

<div class="container-fluid py-4" style="max-width: 1200px;">
    
    <div class="row g-3 mb-4">
        <div class="col-6 col-lg-2">
            <div class="card stat-card border-0 shadow-sm h-100">
                <div class="card-body p-3">
                    <div class="text-muted small text-uppercase fw-bold mb-1">Uptime</div>
                    <div class="h5 mb-0 text-light"><span id="uptime"></span></div>
                </div>
            </div>
        </div>

        <div class="col-6 col-lg-2">
            <div class="card stat-card border-0 shadow-sm h-100">
                <div class="card-body p-3">
                    <div class="text-muted small text-uppercase fw-bold mb-1">CPU Load</div>
                    <div class="h5 mb-2 text-light" id="labelCpu">{{ .CpuLoad}}%</div>
                    <div class="progress progress-stat">
                        <div class="progress-bar" id="barCpu" style="width: {{ .CpuLoad}}%"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-6 col-lg-2">
            <div class="card stat-card border-0 shadow-sm h-100">
                <div class="card-body p-3">
                    <div class="text-muted small text-uppercase fw-bold mb-1">Memory</div>
                    <div class="h5 mb-2 text-light text-nowrap"><span id="usedMemory"></span> / <span id="totalMemory"></span> <span id="memoryUnit" class="small opacity-50"></span></div>
                    <div class="progress progress-stat">
                        <div class="progress-bar" id="barMemory" style="width: {{.MemoryUsagePercent}}%"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-6 col-lg-2">
            <div class="card stat-card border-0 shadow-sm h-100">
                <div class="card-body p-3">
                    <div class="text-muted small text-uppercase fw-bold mb-1">Disk Usage</div>
                    <div class="h5 mb-2 text-light text-nowrap"><span id="usedDisk"></span> / <span id="totalDisk"></span> <span id="diskUnit" class="small opacity-50"></span></div>
                    <div class="progress progress-stat">
                        <div class="progress-bar" id="barDisk" style="width: {{.DiskUsagePercent}}%"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-6 col-lg-2">
            <div class="card stat-card border-0 shadow-sm h-100">
                <div class="card-body p-3">
                    <div class="text-muted small text-uppercase fw-bold mb-1">Data Served</div>
                    <div class="h5 mb-0 text-light"><span id="totalTraffic"></span> <span id="totalTrafficUnit" class="small opacity-50"></span></div>
                </div>
            </div>
        </div>

        <div class="col-6 col-lg-2">
            <div class="card stat-card border-0 shadow-sm h-100">
                <div class="card-body p-3">
                    <div class="text-muted small text-uppercase fw-bold mb-1">Uploaded Files</div>
                    <div class="h5 mb-0 text-light"><span id="labelActiveFiles"> {{ .TotalFiles }}</span> <span class="small opacity-50">Total</span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-lg bg-dark overflow-hidden">
        <div class="card-header bg-dark border-bottom border-secondary py-3 d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center">
                <h6 class="mb-0 fw-bold text-light me-3">System Logs</h6>
            </div>
        </div>
        
        <div class="card-body p-0 bg-black">
            <textarea 
                class="form-control bg-black text-info font-monospace border-0 p-4" 
                id="logviewer" 
                rows="20" 
                readonly 
                style="resize: none; font-size: 0.85rem; line-height: 1.5; outline: none; border-radius: 0;">
                	Loading...
            </textarea>
        </div>

        <div class="card-footer bg-dark border-top border-secondary p-3">
            <div class="row g-2 align-items-center">
                <div class="col-md-5">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text input-group-text-dark">Filter</span>
                        <select id="logFilter" class="form-select log-dark-input" onchange="filterLogs(this.value)">
                            <option value="all">All Events</option>
                            <option value="warning">Warnings</option>
                            <option value="auth">Security</option>
                            <option value="upload">Uploads</option>
                            <option value="edit">Modifications</option>
                            <option value="download">Downloads</option>
                            <option value="info">Info</option>
                        </select>
                    </div>
                </div>
                
                <div class="col-md-2"></div>

                <div class="col-md-5">
                    <div class="d-flex gap-2 justify-content-md-end">
{{ if or (eq .ActiveUser.UserLevel 0) (eq .ActiveUser.UserLevel 1) }}
                        <select id="deleteLogsSel" class="form-select form-select-sm log-dark-input w-auto">
                            <option value="none">Delete Logs...</option>
                            <option value="30">Older than 30 days</option>
                            <option value="14">Older than 14 days</option>
                            <option value="7">Older than 7 days</option>
                            <option value="2">Older than 2 days</option>
                            <option value="all">Delete all logs</option>
                        </select>
                        <button class="btn btn-sm btn-outline-light px-3" onclick="deleteLogs()">Execute</button>
{{ else }}
                    <select id="deleteLogsSel" disabled class="form-select form-select-sm log-dark-input w-auto disabled">
                        <option value="none">Only administrators can delete logs</option>
                    </select>
                        <button class="btn btn-sm btn-outline-light px-3" disabled onclick="">Execute</button>
{{ end }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="./js/min/admin.min.{{ template "js_admin_version"}}.js"></script>
<script>

  
    const POLL_INTERVAL_S = 10;
    
    var logContent = '';
    var lastLogUpdate = 0;
    var currentUptime = {{.Uptime}};
    
    setPercentageBar("barCpu", {{ .CpuLoad}});
    setPercentageBar("barDisk", {{ .DiskUsage}}, {{.DiskTotal}});
    setPercentageBar("barMemory", {{.MemoryUsage}}, {{.MemoryTotal}});
    setMemoryUsage({{.MemoryUsage}}, {{.MemoryTotal}});
    setDiskUsage({{.DiskUsage}}, {{.DiskTotal}});
    document.getElementById('uptime').innerText = formatDuration(currentUptime);
    insertReadableSizeTwoOutputs({{.TotalTraffic}}, 'totalTraffic', 'totalTrafficUnit');
    
    addUptime();
    pollInfo();
    
</script>

{{ template "pagename" "LogOverview"}}
{{ template "customjs" .}}
{{ template "footer" true}}
{{ end }}
