<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Panel</title>
    <link href="/fa/css/all.css" rel="stylesheet">
    <link href="/styles/style.css" rel="stylesheet" type="text/css">
    <link href="/styles/users.css" rel="stylesheet" type="text/css">
</head>
<body>

<%- include('components/header') %>


<div class="content-wrapper">

    <%- include('components/sidebar') %>

    <div class="main-content">
        <!-- Filters Section -->
        <div class="filters">
            <div class="filters">
                <input type="text" id="search-subscription" placeholder="Search By Subscription">
                <select id="batch-name">
                    <option value="">Select Batch Name</option>
                    <option value="batch1">Batch 1</option>
                    <option value="batch2">Batch 2</option>
                    <!-- Add more batches as needed -->
                </select>
                <select id="rate-plan">
                    <option value="">All Rate Plans</option>
                    <option value="plan1">Plan 1</option>
                    <option value="plan2">Plan 2</option>
                    <!-- Add more rate plans as needed -->
                </select>
                <select id="subscriber-status">
                    <option value="">Active Subscribers</option>
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                    <!-- Add more statuses as needed -->
                </select>
                <input type="text" id="search-uuid" placeholder="Search UUID">
                <button id="search-button">Search</button>
            </div>
        </div>

        <div class="refresh-container">
            <button id="refresh-button" title="Refresh">
                <i class="fa fa-refresh"></i> Refresh
            </button>
        </div>
        <% if (isError) { %>
            <p>Error: There was a problem fetching user data.</p>
        <% } else { %>
            <table>
                <tr>
                    <th>ID</th>
                    <th>Email</th>
                    <th>Is Email Verified</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Signup Method</th>
                    <th>Subscription</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Created At</th>
                    <th>Updated At</th>
                </tr>
                <% users.forEach(function(user) { %>
                    <tr>
                        <td><%= user.id %></td>
                        <td><%= user.email %></td>
                        <td><%= user.is_email_verified ? 'Yes' : 'No' %></td>
                        <td><%= user.first_name %></td>
                        <td><%= user.last_name %></td>
                        <td><%= user.signup_method %></td>
                        <td><%= user.subscription %></td>
                        <td><%= user.role %></td>
                        <td><%= user.status %></td>
                        <td><%= user.createdAt.toISOString().split('T')[0] %></td>
                        <td><%= user.updatedAt.toISOString().split('T')[0] %></td>
                    </tr>
                <% }); %>
            </table>
        <% } %>

        <!-- Pagination Section -->
        <div class="pagination">
            <!-- Pagination buttons should be dynamic based on the total number of pages -->
            <a href="#">&laquo;</a>
            <a href="#">1</a>
            <a href="#" class="active">2</a>
            <a href="#">3</a>
            <!-- ... other page numbers ... -->
            <a href="#">&raquo;</a>
        </div>
    </div>
</div>

</body>
</html>
