<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Activity Logs</title>
    <style>
        body {
            font-family: "Segoe UI", Tahoma, sans-serif;
            background-color: #f8f9fa;
            margin: 20px;
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        form {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        input,
        button {
            padding: 8px;
            border-radius: 6px;
            border: 1px solid #ccc;
        }

        button {
            background-color: #007bff;
            color: white;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        table {
            width: 90%;
            margin: auto;
            border-collapse: collapse;
            background: white;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
        }

        th,
        td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: center;
        }

        th {
            background-color: #007bff;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
    <h2>Activity Logs</h2>

    <form method="get" action="{{ url_for('log.activity_log') }}" class="filter-form">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" placeholder="Enter username" value="{{ username or '' }}">

        <label for="start_date">Start Date:</label>
        <input type="date" id="start_date" name="start_date" value="{{ start_date or '' }}">

        <label for="end_date">End Date:</label>
        <input type="date" id="end_date" name="end_date" value="{{ end_date or '' }}">

        <button type="submit" class="btn btn-primary">Filter</button>
        <button type="button" style="background-color: #6c757d;" onclick="resetFilter()">Reset</button>
    </form>

    <table>
        <tr>
            <th>Timestamp</th>
            <th>User</th>
            <th>Action</th>
            <th>Details</th>
        </tr>
        {% for log in logs %}
        <tr>
            <td>{{ log.timestamp }}</td>
            <td>{{ log.user }}</td>
            <td>{{ log.action }}</td>
            <td>{{ log.details }}</td>
        </tr>
        {% endfor %}
        {% if logs|length == 0 %}
        <tr>
            <td colspan="4">No logs found</td>
        </tr>
        {% endif %}
    </table>

    <script>
        function resetFilter() {
            window.location.href = "{{ url_for('log.activity_log') }}";
        }
    </script>
</body>

</html>