<?php
namespace OxygenApp\Views\Admin\Users;
if ( ! defined( 'ABSPATH' ) ) exit;

use OxygenApp\Views\BaseView;
use OxygenApp\Views\IView;

class Dashboard extends BaseView implements IView{
    public function render(): void {
        ?>
        <div id="users-dashboard-ui" class="container-fluid mt-4">
            <div class="row mt-4">
                <div class="col-md-12">

                    <div class="main_preloader" style="display: none;">
                        <div class="oxygen_center_body">
                            <div class="oxygen_loader_circle"></div>
                        </div>
                    </div>

                    <div class="users_table_wrapper">
                        <table class="table users_table">
                            <thead>
                                <tr>
                                    <th scope="col"><?php esc_html_e('ID', 'oxyleaf-app-working-and-relaxing-app') ?></th>
                                    <th scope="col"><?php esc_html_e('Email', 'oxyleaf-app-working-and-relaxing-app') ?></th>
                                    <th scope="col"><?php esc_html_e('Name', 'oxyleaf-app-working-and-relaxing-app') ?></th>
                                    <th scope="col"><?php esc_html_e('Active', 'oxyleaf-app-working-and-relaxing-app') ?></th>
                                    <th scope="col"><?php esc_html_e('Created', 'oxyleaf-app-working-and-relaxing-app') ?></th>
                                    <th scope="col"><?php esc_html_e('Last Login', 'oxyleaf-app-working-and-relaxing-app') ?></th>
                                    <th scope="col"><?php esc_html_e('Delete', 'oxyleaf-app-working-and-relaxing-app') ?></th>
                                </tr>
                            </thead>
                            <tbody class="users_tbody">
                                <!-- User rows will be inserted here via JavaScript -->
                            </tbody>
                        </table>

                        <div class="no_users" style="display: none;">
                            <div class="alert alert-info">
                                <strong><?php esc_html_e('No users found', 'oxyleaf-app-working-and-relaxing-app') ?></strong>
                            </div>
                        </div>

                        <!-- Pagination -->
                        <div class="users_pagination" style="display: none;">
                            <div class="users_pagination_info">
                                <span class="pagination_text"></span>
                            </div>
                            <div class="users_pagination_controls">
                                <select class="form-select form-select-sm users_per_page" style="width: auto; display: inline-block;">
                                    <option value="10">10 <?php esc_html_e('per page', 'oxyleaf-app-working-and-relaxing-app') ?></option>
                                    <option value="20" selected>20 <?php esc_html_e('per page', 'oxyleaf-app-working-and-relaxing-app') ?></option>
                                    <option value="50">50 <?php esc_html_e('per page', 'oxyleaf-app-working-and-relaxing-app') ?></option>
                                    <option value="100">100 <?php esc_html_e('per page', 'oxyleaf-app-working-and-relaxing-app') ?></option>
                                </select>
                                <a href="#" class="users_pagination_prev btn btn-sm btn-outline-secondary"><?php esc_html_e('Previous', 'oxyleaf-app-working-and-relaxing-app') ?></a>
                                <a href="#" class="users_pagination_next btn btn-sm btn-outline-secondary"><?php esc_html_e('Next', 'oxyleaf-app-working-and-relaxing-app') ?></a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <?php
    }
}