<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unique Devices</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: Arial, sans-serif;
        }
        h1 {
            text-align: center;
            color: #343a40;
        }
        .table-container {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        .table {
            margin-bottom: 0;
            table-layout: fixed; /* Ensures consistent column widths */
            width: 100%; /* Makes the table take up the full container width */
        }
        .table th, .table td {
            text-align: center;
            word-wrap: break-word; /* Ensures long text wraps within the cell */
        }
        .table th:nth-child(1), .table td:nth-child(1) {
            width: 25%; /* Hostname column */
        }
        .table th:nth-child(2), .table td:nth-child(2) {
            width: 25%; /* Device IP column */
        }
        .table th:nth-child(3), .table td:nth-child(3) {
            width: 25%; /* Last Log column */
        }
        .table th:nth-child(4), .table td:nth-child(4) {
            width: 25%; /* Event Description column */
        }
        .back-button {
            margin-bottom: 20px;
            text-align: center;
        }
        .search-container {
            margin-bottom: 20px;
        }
        .search-input {
            max-width: 400px;
            margin: 0 auto;
        }
        .no-results {
            display: none;
            text-align: center;
            color: #6c757d;
            font-style: italic;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">Unique Devices</h1>
        <div class="back-button">
            <a href="/dashboard" class="btn btn-primary">Back to Dashboard</a>
        </div>
        
        <!-- Search Filter -->
        <div class="search-container">
            <div class="search-input">
                <input type="text" id="searchInput" class="form-control" placeholder="Search devices by hostname, IP, or event description...">
            </div>
        </div>
        
        <div class="table-container">
            <table class="table table-striped table-bordered" id="devicesTable">
                <thead class="table-dark">
                    <tr>
                        <th>Hostname</th>
                        <th>Device IP</th>
                        <th>Last Log</th>
                        <th>Event Description</th>
                    </tr>
                </thead>
                <tbody>
                    {% for device in devices %}
                    <tr>
                        <!-- Make the Hostname column clickable -->
                        <td>
                            <a href="/hostname_logs/{{ device[0] }}">{{ device[0] }}</a>
                        </td>
                        <td>{{ device[1] }}</td> <!-- Device IP -->
                        <td>{{ device[2] }}</td> <!-- Last Log -->
                        <td>{{ device[3] }}</td> <!-- Event Description -->
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <div id="noResults" class="no-results">
                No devices found matching your search criteria.
            </div>
        </div>
    </div>
    
    <!-- JavaScript for filtering -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('searchInput');
            const table = document.getElementById('devicesTable');
            const tableBody = table.getElementsByTagName('tbody')[0];
            const noResultsDiv = document.getElementById('noResults');
            
            searchInput.addEventListener('keyup', function() {
                const filter = this.value.toLowerCase();
                const rows = tableBody.getElementsByTagName('tr');
                let visibleRowCount = 0;
                
                for (let i = 0; i < rows.length; i++) {
                    const row = rows[i];
                    const cells = row.getElementsByTagName('td');
                    let found = false;
                    
                    // Search through all cells in the row
                    for (let j = 0; j < cells.length; j++) {
                        const cellText = cells[j].textContent || cells[j].innerText;
                        if (cellText.toLowerCase().indexOf(filter) > -1) {
                            found = true;
                            break;
                        }
                    }
                    
                    if (found) {
                        row.style.display = '';
                        visibleRowCount++;
                    } else {
                        row.style.display = 'none';
                    }
                }
                
                // Show/hide "no results" message
                if (visibleRowCount === 0 && filter !== '') {
                    noResultsDiv.style.display = 'block';
                } else {
                    noResultsDiv.style.display = 'none';
                }
            });
        });
    </script>
    
    <footer>
        <p class="text-center mt-4">&copy; 2023 Unique Devices Dashboard. All rights reserved.</p>
    </footer>
</body>
</html>