/**
 * main-interface.php
 *
 * @package    care-book-block-ultimate.templates.admin
 * @author     Descomplicar® Crescimento Digital
 * @link       https://descomplicar.pt
 * @copyright  2025 Descomplicar® - Todos os direitos reservados
 */

<?php
/**
 * Main Admin Interface Template - Care Book Ultimate
 * 
 * Modern WordPress admin interface with exceptional user experience
 * - Learning curve <30 seconds
 * - Intuitive toggle operations
 * - Responsive design
 * - Accessibility compliance (WCAG 2.1)
 * 
 * @package CareBook\Ultimate
 * @since 1.0.0
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}
?>

<div class="wrap care-book-ultimate-admin">
    <!-- Header Section -->
    <div class="cbu-header">
        <div class="cbu-header-content">
            <div class="cbu-header-title">
                <h1>
                    <span class="cbu-logo">
                        <svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
                            <circle cx="16" cy="16" r="14" fill="#0073aa" stroke="#fff" stroke-width="2"/>
                            <path d="M12 10h8v2h-8zm0 4h8v2h-8zm0 4h6v2h-6z" fill="#fff"/>
                        </svg>
                    </span>
                    <?php esc_html_e('Care Book Ultimate', 'care-book-ultimate'); ?>
                    <span class="cbu-version">v<?php echo esc_html(CARE_BOOK_ULTIMATE_VERSION); ?></span>
                </h1>
                <p class="cbu-subtitle">
                    <?php esc_html_e('Advanced appointment control for KiviCare with intelligent filtering', 'care-book-ultimate'); ?>
                </p>
            </div>
            
            <div class="cbu-header-actions">
                <button type="button" class="button button-secondary cbu-help-toggle" aria-expanded="false">
                    <span class="dashicons dashicons-editor-help"></span>
                    <?php esc_html_e('Quick Help', 'care-book-ultimate'); ?>
                </button>
                
                <div class="cbu-theme-toggle">
                    <label class="cbu-toggle-switch">
                        <input type="checkbox" id="cbu-dark-mode" />
                        <span class="cbu-toggle-slider"></span>
                        <span class="cbu-toggle-label"><?php esc_html_e('Dark Mode', 'care-book-ultimate'); ?></span>
                    </label>
                </div>
            </div>
        </div>
        
        <!-- Quick Help Panel -->
        <div class="cbu-help-panel" aria-hidden="true">
            <div class="cbu-help-content">
                <h3><?php esc_html_e('Quick Start Guide', 'care-book-ultimate'); ?></h3>
                <div class="cbu-help-steps">
                    <div class="cbu-help-step">
                        <span class="cbu-step-number">1</span>
                        <span><?php esc_html_e('Navigate to Doctors tab to manage doctor availability', 'care-book-ultimate'); ?></span>
                    </div>
                    <div class="cbu-help-step">
                        <span class="cbu-step-number">2</span>
                        <span><?php esc_html_e('Use toggle buttons to block/unblock instantly', 'care-book-ultimate'); ?></span>
                    </div>
                    <div class="cbu-help-step">
                        <span class="cbu-step-number">3</span>
                        <span><?php esc_html_e('Switch to Services for specific service management', 'care-book-ultimate'); ?></span>
                    </div>
                    <div class="cbu-help-step">
                        <span class="cbu-step-number">4</span>
                        <span><?php esc_html_e('Use bulk operations for efficient management', 'care-book-ultimate'); ?></span>
                    </div>
                </div>
                <p class="cbu-help-footer">
                    <strong><?php esc_html_e('Learning time: Less than 30 seconds!', 'care-book-ultimate'); ?></strong>
                </p>
            </div>
        </div>
    </div>

    <!-- Status Dashboard -->
    <div class="cbu-status-dashboard">
        <div class="cbu-status-cards">
            <div class="cbu-status-card cbu-card-doctors">
                <div class="cbu-status-icon">
                    <span class="dashicons dashicons-admin-users" aria-hidden="true"></span>
                </div>
                <div class="cbu-status-info">
                    <div class="cbu-status-number" id="cbu-blocked-doctors">0</div>
                    <div class="cbu-status-label"><?php esc_html_e('Blocked Doctors', 'care-book-ultimate'); ?></div>
                </div>
            </div>
            
            <div class="cbu-status-card cbu-card-services">
                <div class="cbu-status-icon">
                    <span class="dashicons dashicons-admin-settings" aria-hidden="true"></span>
                </div>
                <div class="cbu-status-info">
                    <div class="cbu-status-number" id="cbu-blocked-services">0</div>
                    <div class="cbu-status-label"><?php esc_html_e('Blocked Services', 'care-book-ultimate'); ?></div>
                </div>
            </div>
            
            <div class="cbu-status-card cbu-card-cache">
                <div class="cbu-status-icon">
                    <span class="dashicons dashicons-performance" aria-hidden="true"></span>
                </div>
                <div class="cbu-status-info">
                    <div class="cbu-status-number" id="cbu-cache-status"><?php esc_html_e('Active', 'care-book-ultimate'); ?></div>
                    <div class="cbu-status-label"><?php esc_html_e('Cache Status', 'care-book-ultimate'); ?></div>
                </div>
            </div>
            
            <div class="cbu-status-card cbu-card-performance">
                <div class="cbu-status-icon">
                    <span class="dashicons dashicons-chart-area" aria-hidden="true"></span>
                </div>
                <div class="cbu-status-info">
                    <div class="cbu-status-number" id="cbu-performance-score">100%</div>
                    <div class="cbu-status-label"><?php esc_html_e('Performance', 'care-book-ultimate'); ?></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation Tabs with Modern Design -->
    <nav class="cbu-nav-tabs" role="tablist" aria-label="<?php esc_attr_e('Main navigation', 'care-book-ultimate'); ?>">
        <button type="button" class="cbu-nav-tab cbu-nav-tab-active" 
                role="tab" aria-selected="true" aria-controls="cbu-doctors-panel" 
                data-tab="doctors" id="cbu-tab-doctors">
            <span class="dashicons dashicons-admin-users" aria-hidden="true"></span>
            <?php esc_html_e('Doctors', 'care-book-ultimate'); ?>
            <span class="cbu-tab-badge" id="cbu-doctors-count">0</span>
        </button>
        
        <button type="button" class="cbu-nav-tab" 
                role="tab" aria-selected="false" aria-controls="cbu-services-panel" 
                data-tab="services" id="cbu-tab-services">
            <span class="dashicons dashicons-admin-settings" aria-hidden="true"></span>
            <?php esc_html_e('Services', 'care-book-ultimate'); ?>
            <span class="cbu-tab-badge" id="cbu-services-count">0</span>
        </button>
        
        <button type="button" class="cbu-nav-tab" 
                role="tab" aria-selected="false" aria-controls="cbu-bulk-panel" 
                data-tab="bulk" id="cbu-tab-bulk">
            <span class="dashicons dashicons-editor-ul" aria-hidden="true"></span>
            <?php esc_html_e('Bulk Operations', 'care-book-ultimate'); ?>
        </button>
        
        <button type="button" class="cbu-nav-tab" 
                role="tab" aria-selected="false" aria-controls="cbu-settings-panel" 
                data-tab="settings" id="cbu-tab-settings">
            <span class="dashicons dashicons-admin-generic" aria-hidden="true"></span>
            <?php esc_html_e('Settings', 'care-book-ultimate'); ?>
        </button>
    </nav>

    <!-- Loading Overlay -->
    <div class="cbu-loading-overlay" aria-hidden="true">
        <div class="cbu-loading-content">
            <div class="cbu-loading-spinner"></div>
            <p class="cbu-loading-text"><?php esc_html_e('Loading...', 'care-book-ultimate'); ?></p>
        </div>
    </div>

    <!-- Doctors Panel -->
    <div id="cbu-doctors-panel" class="cbu-tab-panel cbu-tab-panel-active" 
         role="tabpanel" aria-labelledby="cbu-tab-doctors">
        
        <!-- Toolbar -->
        <div class="cbu-toolbar">
            <div class="cbu-toolbar-left">
                <div class="cbu-search-box">
                    <input type="search" 
                           id="cbu-doctors-search" 
                           class="cbu-search-input"
                           placeholder="<?php esc_attr_e('Search doctors...', 'care-book-ultimate'); ?>"
                           aria-label="<?php esc_attr_e('Search doctors', 'care-book-ultimate'); ?>" />
                    <button type="button" class="cbu-search-clear" aria-label="<?php esc_attr_e('Clear search', 'care-book-ultimate'); ?>">
                        <span class="dashicons dashicons-no-alt"></span>
                    </button>
                </div>
                
                <div class="cbu-filter-controls">
                    <select id="cbu-doctors-filter" class="cbu-select" aria-label="<?php esc_attr_e('Filter doctors by status', 'care-book-ultimate'); ?>">
                        <option value="all"><?php esc_html_e('All Doctors', 'care-book-ultimate'); ?></option>
                        <option value="blocked"><?php esc_html_e('Blocked Only', 'care-book-ultimate'); ?></option>
                        <option value="available"><?php esc_html_e('Available Only', 'care-book-ultimate'); ?></option>
                    </select>
                </div>
            </div>
            
            <div class="cbu-toolbar-right">
                <button type="button" class="button cbu-button-refresh" id="cbu-refresh-doctors">
                    <span class="dashicons dashicons-update-alt" aria-hidden="true"></span>
                    <?php esc_html_e('Refresh', 'care-book-ultimate'); ?>
                </button>
                
                <div class="cbu-bulk-actions">
                    <button type="button" class="button cbu-button-bulk-block" id="cbu-bulk-block-doctors" disabled>
                        <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
                        <?php esc_html_e('Block Selected', 'care-book-ultimate'); ?>
                    </button>
                    
                    <button type="button" class="button cbu-button-bulk-unblock" id="cbu-bulk-unblock-doctors" disabled>
                        <span class="dashicons dashicons-visibility" aria-hidden="true"></span>
                        <?php esc_html_e('Unblock Selected', 'care-book-ultimate'); ?>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Doctors Table -->
        <div class="cbu-table-container">
            <table class="cbu-table" role="table" aria-label="<?php esc_attr_e('Doctors list', 'care-book-ultimate'); ?>">
                <thead>
                    <tr role="row">
                        <th class="cbu-table-checkbox" role="columnheader">
                            <label class="cbu-checkbox-label">
                                <input type="checkbox" id="cbu-select-all-doctors" class="cbu-select-all" />
                                <span class="cbu-checkbox-custom"></span>
                                <span class="screen-reader-text"><?php esc_html_e('Select all doctors', 'care-book-ultimate'); ?></span>
                            </label>
                        </th>
                        <th class="cbu-table-name" role="columnheader" tabindex="0" data-sort="name">
                            <?php esc_html_e('Doctor Name', 'care-book-ultimate'); ?>
                            <span class="cbu-sort-indicator" aria-hidden="true"></span>
                        </th>
                        <th class="cbu-table-email" role="columnheader" tabindex="0" data-sort="email">
                            <?php esc_html_e('Email', 'care-book-ultimate'); ?>
                            <span class="cbu-sort-indicator" aria-hidden="true"></span>
                        </th>
                        <th class="cbu-table-speciality" role="columnheader" tabindex="0" data-sort="speciality">
                            <?php esc_html_e('Speciality', 'care-book-ultimate'); ?>
                            <span class="cbu-sort-indicator" aria-hidden="true"></span>
                        </th>
                        <th class="cbu-table-status" role="columnheader" tabindex="0" data-sort="status">
                            <?php esc_html_e('Status', 'care-book-ultimate'); ?>
                            <span class="cbu-sort-indicator" aria-hidden="true"></span>
                        </th>
                        <th class="cbu-table-actions" role="columnheader">
                            <?php esc_html_e('Actions', 'care-book-ultimate'); ?>
                        </th>
                    </tr>
                </thead>
                <tbody id="cbu-doctors-list">
                    <tr class="cbu-empty-state">
                        <td colspan="6" class="cbu-empty-state-content">
                            <div class="cbu-empty-icon">
                                <span class="dashicons dashicons-admin-users" aria-hidden="true"></span>
                            </div>
                            <h3><?php esc_html_e('Loading doctors...', 'care-book-ultimate'); ?></h3>
                            <p><?php esc_html_e('Please wait while we fetch the doctors list from KiviCare.', 'care-book-ultimate'); ?></p>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <!-- Pagination -->
            <div class="cbu-pagination" id="cbu-doctors-pagination" aria-label="<?php esc_attr_e('Doctors pagination', 'care-book-ultimate'); ?>">
                <!-- Pagination will be generated by JavaScript -->
            </div>
        </div>
    </div>

    <!-- Services Panel -->
    <div id="cbu-services-panel" class="cbu-tab-panel" 
         role="tabpanel" aria-labelledby="cbu-tab-services" aria-hidden="true">
        
        <!-- Toolbar -->
        <div class="cbu-toolbar">
            <div class="cbu-toolbar-left">
                <div class="cbu-search-box">
                    <input type="search" 
                           id="cbu-services-search" 
                           class="cbu-search-input"
                           placeholder="<?php esc_attr_e('Search services...', 'care-book-ultimate'); ?>"
                           aria-label="<?php esc_attr_e('Search services', 'care-book-ultimate'); ?>" />
                    <button type="button" class="cbu-search-clear" aria-label="<?php esc_attr_e('Clear search', 'care-book-ultimate'); ?>">
                        <span class="dashicons dashicons-no-alt"></span>
                    </button>
                </div>
                
                <div class="cbu-filter-controls">
                    <select id="cbu-services-doctor-filter" class="cbu-select" aria-label="<?php esc_attr_e('Filter services by doctor', 'care-book-ultimate'); ?>">
                        <option value=""><?php esc_html_e('All Doctors', 'care-book-ultimate'); ?></option>
                        <!-- Options populated by JavaScript -->
                    </select>
                    
                    <select id="cbu-services-status-filter" class="cbu-select" aria-label="<?php esc_attr_e('Filter services by status', 'care-book-ultimate'); ?>">
                        <option value="all"><?php esc_html_e('All Services', 'care-book-ultimate'); ?></option>
                        <option value="blocked"><?php esc_html_e('Blocked Only', 'care-book-ultimate'); ?></option>
                        <option value="available"><?php esc_html_e('Available Only', 'care-book-ultimate'); ?></option>
                    </select>
                </div>
            </div>
            
            <div class="cbu-toolbar-right">
                <button type="button" class="button cbu-button-refresh" id="cbu-refresh-services">
                    <span class="dashicons dashicons-update-alt" aria-hidden="true"></span>
                    <?php esc_html_e('Refresh', 'care-book-ultimate'); ?>
                </button>
                
                <div class="cbu-bulk-actions">
                    <button type="button" class="button cbu-button-bulk-block" id="cbu-bulk-block-services" disabled>
                        <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
                        <?php esc_html_e('Block Selected', 'care-book-ultimate'); ?>
                    </button>
                    
                    <button type="button" class="button cbu-button-bulk-unblock" id="cbu-bulk-unblock-services" disabled>
                        <span class="dashicons dashicons-visibility" aria-hidden="true"></span>
                        <?php esc_html_e('Unblock Selected', 'care-book-ultimate'); ?>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Services Table -->
        <div class="cbu-table-container">
            <table class="cbu-table" role="table" aria-label="<?php esc_attr_e('Services list', 'care-book-ultimate'); ?>">
                <thead>
                    <tr role="row">
                        <th class="cbu-table-checkbox" role="columnheader">
                            <label class="cbu-checkbox-label">
                                <input type="checkbox" id="cbu-select-all-services" class="cbu-select-all" />
                                <span class="cbu-checkbox-custom"></span>
                                <span class="screen-reader-text"><?php esc_html_e('Select all services', 'care-book-ultimate'); ?></span>
                            </label>
                        </th>
                        <th class="cbu-table-name" role="columnheader" tabindex="0" data-sort="name">
                            <?php esc_html_e('Service Name', 'care-book-ultimate'); ?>
                            <span class="cbu-sort-indicator" aria-hidden="true"></span>
                        </th>
                        <th class="cbu-table-doctor" role="columnheader" tabindex="0" data-sort="doctor">
                            <?php esc_html_e('Doctor', 'care-book-ultimate'); ?>
                            <span class="cbu-sort-indicator" aria-hidden="true"></span>
                        </th>
                        <th class="cbu-table-duration" role="columnheader" tabindex="0" data-sort="duration">
                            <?php esc_html_e('Duration', 'care-book-ultimate'); ?>
                            <span class="cbu-sort-indicator" aria-hidden="true"></span>
                        </th>
                        <th class="cbu-table-price" role="columnheader" tabindex="0" data-sort="price">
                            <?php esc_html_e('Price', 'care-book-ultimate'); ?>
                            <span class="cbu-sort-indicator" aria-hidden="true"></span>
                        </th>
                        <th class="cbu-table-status" role="columnheader" tabindex="0" data-sort="status">
                            <?php esc_html_e('Status', 'care-book-ultimate'); ?>
                            <span class="cbu-sort-indicator" aria-hidden="true"></span>
                        </th>
                        <th class="cbu-table-actions" role="columnheader">
                            <?php esc_html_e('Actions', 'care-book-ultimate'); ?>
                        </th>
                    </tr>
                </thead>
                <tbody id="cbu-services-list">
                    <tr class="cbu-empty-state">
                        <td colspan="7" class="cbu-empty-state-content">
                            <div class="cbu-empty-icon">
                                <span class="dashicons dashicons-admin-settings" aria-hidden="true"></span>
                            </div>
                            <h3><?php esc_html_e('No services found', 'care-book-ultimate'); ?></h3>
                            <p><?php esc_html_e('Select a doctor filter or refresh to load services.', 'care-book-ultimate'); ?></p>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <!-- Pagination -->
            <div class="cbu-pagination" id="cbu-services-pagination" aria-label="<?php esc_attr_e('Services pagination', 'care-book-ultimate'); ?>">
                <!-- Pagination will be generated by JavaScript -->
            </div>
        </div>
    </div>

    <!-- Bulk Operations Panel -->
    <div id="cbu-bulk-panel" class="cbu-tab-panel" 
         role="tabpanel" aria-labelledby="cbu-tab-bulk" aria-hidden="true">
        <?php include CARE_BOOK_ULTIMATE_PLUGIN_DIR . 'templates/admin/bulk-operations.php'; ?>
    </div>

    <!-- Settings Panel -->
    <div id="cbu-settings-panel" class="cbu-tab-panel" 
         role="tabpanel" aria-labelledby="cbu-tab-settings" aria-hidden="true">
        <?php include CARE_BOOK_ULTIMATE_PLUGIN_DIR . 'templates/admin/settings-page.php'; ?>
    </div>

    <!-- Toast Notifications Container -->
    <div class="cbu-toast-container" aria-live="polite" aria-atomic="true">
        <!-- Toasts will be inserted here by JavaScript -->
    </div>

    <!-- Modal Container -->
    <div class="cbu-modal-backdrop" aria-hidden="true">
        <div class="cbu-modal" role="dialog" aria-modal="true">
            <div class="cbu-modal-header">
                <h2 class="cbu-modal-title" id="cbu-modal-title"></h2>
                <button type="button" class="cbu-modal-close" aria-label="<?php esc_attr_e('Close modal', 'care-book-ultimate'); ?>">
                    <span class="dashicons dashicons-no-alt" aria-hidden="true"></span>
                </button>
            </div>
            <div class="cbu-modal-content" id="cbu-modal-content">
                <!-- Modal content will be inserted here -->
            </div>
            <div class="cbu-modal-footer" id="cbu-modal-footer">
                <!-- Modal footer will be inserted here -->
            </div>
        </div>
    </div>
</div>

<!-- Templates for Dynamic Content -->
<script type="text/template" id="cbu-doctor-row-template">
    <tr class="cbu-table-row {{#if is_blocked}}cbu-row-blocked{{/if}}" data-doctor-id="{{id}}" role="row">
        <td class="cbu-table-checkbox" role="gridcell">
            <label class="cbu-checkbox-label">
                <input type="checkbox" class="cbu-doctor-checkbox" value="{{id}}" />
                <span class="cbu-checkbox-custom"></span>
                <span class="screen-reader-text"><?php esc_html_e('Select doctor', 'care-book-ultimate'); ?> {{name}}</span>
            </label>
        </td>
        <td class="cbu-table-name cbu-table-primary" role="gridcell">
            <div class="cbu-row-title">
                <strong>{{name}}</strong>
                <div class="cbu-row-actions">
                    <a href="#" class="cbu-view-services" data-doctor-id="{{id}}">
                        <?php esc_html_e('View Services', 'care-book-ultimate'); ?>
                    </a>
                </div>
            </div>
        </td>
        <td class="cbu-table-email" role="gridcell">{{email}}</td>
        <td class="cbu-table-speciality" role="gridcell">{{speciality}}</td>
        <td class="cbu-table-status" role="gridcell">
            <span class="cbu-status-badge {{#if is_blocked}}cbu-status-blocked{{else}}cbu-status-available{{/if}}">
                {{#if is_blocked}}<?php esc_html_e('Blocked', 'care-book-ultimate'); ?>{{else}}<?php esc_html_e('Available', 'care-book-ultimate'); ?>{{/if}}
            </span>
        </td>
        <td class="cbu-table-actions" role="gridcell">
            <button type="button" class="cbu-toggle-button {{#if is_blocked}}cbu-toggle-unblock{{else}}cbu-toggle-block{{/if}}" 
                    data-doctor-id="{{id}}" data-blocked="{{is_blocked}}" 
                    aria-label="{{#if is_blocked}}<?php esc_attr_e('Unblock doctor', 'care-book-ultimate'); ?>{{else}}<?php esc_attr_e('Block doctor', 'care-book-ultimate'); ?>{{/if}} {{name}}">
                <span class="dashicons {{#if is_blocked}}dashicons-visibility{{else}}dashicons-hidden{{/if}}" aria-hidden="true"></span>
                <span class="cbu-toggle-text">{{#if is_blocked}}<?php esc_html_e('Unblock', 'care-book-ultimate'); ?>{{else}}<?php esc_html_e('Block', 'care-book-ultimate'); ?>{{/if}}</span>
            </button>
        </td>
    </tr>
</script>

<script type="text/template" id="cbu-service-row-template">
    <tr class="cbu-table-row {{#if is_blocked}}cbu-row-blocked{{/if}}" data-service-id="{{id}}" data-doctor-id="{{doctor_id}}" role="row">
        <td class="cbu-table-checkbox" role="gridcell">
            <label class="cbu-checkbox-label">
                <input type="checkbox" class="cbu-service-checkbox" value="{{id}}" data-doctor-id="{{doctor_id}}" />
                <span class="cbu-checkbox-custom"></span>
                <span class="screen-reader-text"><?php esc_html_e('Select service', 'care-book-ultimate'); ?> {{name}}</span>
            </label>
        </td>
        <td class="cbu-table-name cbu-table-primary" role="gridcell">
            <strong>{{name}}</strong>
        </td>
        <td class="cbu-table-doctor" role="gridcell">{{doctor_name}}</td>
        <td class="cbu-table-duration" role="gridcell">{{duration}}</td>
        <td class="cbu-table-price" role="gridcell">{{price}}</td>
        <td class="cbu-table-status" role="gridcell">
            <span class="cbu-status-badge {{#if is_blocked}}cbu-status-blocked{{else}}cbu-status-available{{/if}}">
                {{#if is_blocked}}<?php esc_html_e('Blocked', 'care-book-ultimate'); ?>{{else}}<?php esc_html_e('Available', 'care-book-ultimate'); ?>{{/if}}
            </span>
        </td>
        <td class="cbu-table-actions" role="gridcell">
            <button type="button" class="cbu-toggle-button {{#if is_blocked}}cbu-toggle-unblock{{else}}cbu-toggle-block{{/if}}" 
                    data-service-id="{{id}}" data-doctor-id="{{doctor_id}}" data-blocked="{{is_blocked}}"
                    aria-label="{{#if is_blocked}}<?php esc_attr_e('Unblock service', 'care-book-ultimate'); ?>{{else}}<?php esc_attr_e('Block service', 'care-book-ultimate'); ?>{{/if}} {{name}}">
                <span class="dashicons {{#if is_blocked}}dashicons-visibility{{else}}dashicons-hidden{{/if}}" aria-hidden="true"></span>
                <span class="cbu-toggle-text">{{#if is_blocked}}<?php esc_html_e('Unblock', 'care-book-ultimate'); ?>{{else}}<?php esc_html_e('Block', 'care-book-ultimate'); ?>{{/if}}</span>
            </button>
        </td>
    </tr>
</script>

<script type="text/template" id="cbu-pagination-template">
    <div class="cbu-pagination-info">
        <?php esc_html_e('Showing', 'care-book-ultimate'); ?> {{start}} - {{end}} <?php esc_html_e('of', 'care-book-ultimate'); ?> {{total}} <?php esc_html_e('items', 'care-book-ultimate'); ?>
    </div>
    <div class="cbu-pagination-controls">
        <button type="button" class="cbu-pagination-btn cbu-pagination-first" {{#unless canGoPrev}}disabled{{/unless}} data-page="1">
            <span class="dashicons dashicons-controls-skipback" aria-hidden="true"></span>
            <span class="screen-reader-text"><?php esc_html_e('First page', 'care-book-ultimate'); ?></span>
        </button>
        <button type="button" class="cbu-pagination-btn cbu-pagination-prev" {{#unless canGoPrev}}disabled{{/unless}} data-page="{{prevPage}}">
            <span class="dashicons dashicons-controls-back" aria-hidden="true"></span>
            <span class="screen-reader-text"><?php esc_html_e('Previous page', 'care-book-ultimate'); ?></span>
        </button>
        
        {{#each pages}}
        <button type="button" class="cbu-pagination-btn cbu-pagination-number {{#if current}}cbu-current{{/if}}" data-page="{{page}}">
            {{page}}
        </button>
        {{/each}}
        
        <button type="button" class="cbu-pagination-btn cbu-pagination-next" {{#unless canGoNext}}disabled{{/unless}} data-page="{{nextPage}}">
            <span class="dashicons dashicons-controls-forward" aria-hidden="true"></span>
            <span class="screen-reader-text"><?php esc_html_e('Next page', 'care-book-ultimate'); ?></span>
        </button>
        <button type="button" class="cbu-pagination-btn cbu-pagination-last" {{#unless canGoNext}}disabled{{/unless}} data-page="{{totalPages}}">
            <span class="dashicons dashicons-controls-skipforward" aria-hidden="true"></span>
            <span class="screen-reader-text"><?php esc_html_e('Last page', 'care-book-ultimate'); ?></span>
        </button>
    </div>
</script>