{{ define "content" }}
<div class="page-header activity-header">
    <div>
        <h1>Activity Log</h1>
        <p>Recent account, security, and inventory actions for your account.</p>
    </div>
    <button type="button" class="btn btn-secondary activity-refresh" onclick="loadActivityLog(true)">Refresh</button>
</div>

<div class="card activity-controls-card">
    <div class="activity-control-panel">
        <div class="activity-control-copy">
            <span class="activity-eyebrow">Display</span>
            <h2>Entries per page</h2>
            <p>Choose how many log entries should be loaded at once.</p>
        </div>
        <div class="activity-entry-menu" role="group" aria-label="Entries per page">
            <button type="button" class="activity-entry-option" data-limit="25" aria-pressed="false" onclick="setActivityLimit(25)">25</button>
            <button type="button" class="activity-entry-option active" data-limit="50" aria-pressed="true" onclick="setActivityLimit(50)">50</button>
            <button type="button" class="activity-entry-option" data-limit="100" aria-pressed="false" onclick="setActivityLimit(100)">100</button>
        </div>
    </div>
    <div class="activity-note">
        <strong>Privacy:</strong> Sensitive request bodies are never stored. The log keeps request metadata, action type, status, IP address, and user agent.
    </div>
</div>

<div class="table-container activity-table-container">
    <table>
        <thead>
        <tr>
            <th>Time</th>
            <th>Action</th>
            <th>Target</th>
            <th>Status</th>
            <th>IP</th>
            <th>Client</th>
        </tr>
        </thead>
        <tbody id="activity-log-body">
        <tr><td colspan="6" class="table-loader">Loading activity...</td></tr>
        </tbody>
    </table>
</div>

<div class="activity-load-more-wrap">
    <button type="button" id="activity-load-more" class="btn btn-secondary activity-load-more" onclick="loadMoreActivity()">Load more</button>
</div>
{{ end }}