{{define "title"}}Performance{{end}}
{{define "page"}}performance{{end}}
{{define "content"}}
    <div class="csm-page-header mb-3">
        <div class="csm-page-header__main">
            <h1 class="csm-page-header__title"><i class="ti ti-activity"></i>&nbsp;Performance</h1>
        </div>
        <div class="csm-page-header__actions">
            <div class="btn-group">
                <button type="button" class="btn btn-ghost-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Export performance findings">
                    <i class="ti ti-download"></i>&nbsp;Export
                </button>
                <div class="dropdown-menu dropdown-menu-end">
                    <a class="dropdown-item" href="#" data-export="csv">CSV</a>
                    <a class="dropdown-item" href="#" data-export="json">JSON</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Stat Cards -->
    <div class="row row-deck row-cards mb-3">
        <div class="col-6 col-lg">
            <div class="card">
                <div class="card-body">
                    <div class="subheader" title="1/5/15 minute system load averages">Load Average</div>
                    <div class="h1 mb-0" id="stat-load">&mdash;</div>
                    <div class="small text-muted mt-1" id="stat-load-detail"></div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg">
            <div class="card">
                <div class="card-body">
                    <div class="subheader" title="Number of available CPU cores">CPU Cores</div>
                    <div class="h1 mb-0" id="stat-cores">&mdash;</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg">
            <div class="card">
                <div class="card-body">
                    <div class="subheader" title="Memory usage (used / total)">RAM</div>
                    <div class="h1 mb-0" id="stat-ram">&mdash;</div>
                    <div class="progress progress-sm mt-2"><div class="progress-bar csm-progress-zero" id="stat-ram-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div></div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg">
            <div class="card">
                <div class="card-body">
                    <div class="subheader" title="Total running PHP-FPM/lsphp worker processes">PHP Processes</div>
                    <div class="h1 mb-0" id="stat-php">&mdash;</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg">
            <div class="card">
                <div class="card-body">
                    <div class="subheader" title="MySQL/MariaDB server status">MySQL</div>
                    <div class="h1 mb-0" id="stat-mysql">&mdash;</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg">
            <div class="card">
                <div class="card-body">
                    <div class="subheader" title="Redis server status and memory usage">Redis</div>
                    <div class="h1 mb-0" id="stat-redis">&mdash;</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Second Row -->
    <div class="row row-deck row-cards mb-3">
        <!-- Left: Top PHP Consumers -->
        <div class="col-lg-5">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title"><i class="ti ti-brand-php"></i>&nbsp;Top PHP Consumers</h2>
                </div>
                <div class="table-responsive">
                    <table class="table table-vcenter card-table table-sm">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Processes</th>
                                <th><span class="visually-hidden">Actions</span></th>
                            </tr>
                        </thead>
                        <tbody id="php-consumers">
                            <tr><td colspan="3" class="text-center text-muted py-3"><span class="spinner-border spinner-border-sm"></span> Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- Right: Performance Findings -->
        <div class="col-lg-7">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title"><i class="ti ti-activity"></i>&nbsp;Performance Findings</h2>
                    <div class="card-actions" id="perf-bulk-actions"></div>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush" id="perf-findings" aria-busy="true">
                        <div class="list-group-item text-muted"><span class="spinner-border spinner-border-sm" role="status"><span class="visually-hidden">Loading</span></span> Loading...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{{end}}
{{define "scripts"}}
<script src="{{asset "js/performance.js"}}"></script>
{{end}}
{{template "layout" .}}