{% macro logs_tab() %}
<div class="row">
    <div class="col-12">
        <!-- Filters -->
        <div class="card mb-4">
            <div class="card-body">
                <form id="logFiltersForm" class="row g-3">
                    <div class="col-md-3">
                        <label for="logLevel" class="form-label">Log Level</label>
                        <select class="form-select" id="logLevel" name="level">
                            <option value="">All Levels</option>
                            <option value="INFO">Info</option>
                            <option value="WARNING">Warning</option>
                            <option value="ERROR">Error</option>
                            <option value="DEBUG">Debug</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="logCategory" class="form-label">Category</label>
                        <select class="form-select" id="logCategory" name="category">
                            <option value="">All Categories</option>
                            <option value="AUTH">Authentication</option>
                            <option value="FILE">File Operations</option>
                            <option value="USER">User Management</option>
                            <option value="SYSTEM">System</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="startDate" class="form-label">Start Date</label>
                        <input type="date" class="form-control" id="startDate" name="start_date">
                    </div>
                    <div class="col-md-3">
                        <label for="endDate" class="form-label">End Date</label>
                        <input type="date" class="form-control" id="endDate" name="end_date">
                    </div>
                    <div class="col-md-6">
                        <label for="searchLogs" class="form-label">Search</label>
                        <input type="text" class="form-control" id="searchLogs" name="search" placeholder="Search in logs...">
                    </div>
                    <div class="col-md-6 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary me-2">
                            <i class="fas fa-search me-1"></i> Apply Filters
                        </button>
                        <button type="reset" class="btn btn-secondary">
                            <i class="fas fa-undo me-1"></i> Reset
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Logs Table -->
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Timestamp</th>
                                <th>Level</th>
                                <th>Category</th>
                                <th>Action</th>
                                <th>Description</th>
                                <th>User</th>
                                <th>IP Address</th>
                            </tr>
                        </thead>
                        <tbody id="logsTableBody">
                            <!-- Logs will be loaded here via JavaScript -->
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                <nav aria-label="Logs pagination" class="mt-4">
                    <ul class="pagination justify-content-center" id="logsPagination">
                        <!-- Pagination will be loaded here via JavaScript -->
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

<!-- Log Details Modal -->
<div class="modal fade" id="logDetailsModal" tabindex="-1" aria-labelledby="logDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logDetailsModalLabel">Log Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="logDetailsContent">
                <!-- Log details will be loaded here -->
            </div>
        </div>
    </div>
</div>
{% endmacro %}