<?php

/**
 * This file is part of JohnCMS Content Management System.
 *
 * @copyright JohnCMS Community
 * @license   https://opensource.org/licenses/GPL-3.0 GPL-3.0
 * @link      https://johncms.com JohnCMS Project
 */

/**
 * @var $title
 * @var $page_title
 * @var $data
 */

$this->layout(
    'system::layout/default',
    [
        'title'      => $title,
        'page_title' => $page_title,
    ]
);
?>

<!-- Filters -->
<div class="flex flex-wrap gap-2 mb-6">
    <?php foreach ($data['filters'] as $tab): ?>
        <a href="<?= $tab['url'] ?>" 
           class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium transition-all duration-200 <?= $tab['active'] ? 'bg-blue-600 text-white border-blue-600 shadow-sm' : 'bg-white text-gray-700 hover:bg-gray-50 hover:border-gray-400' ?>">
            <?= $tab['name'] ?>
        </a>
    <?php endforeach; ?>
</div>

<!-- List of Users -->
<?php if ($data['total'] > 0): ?>
    <div class="space-y-3">
        <?php foreach ($data['items'] as $item): ?>
            <?= $this->fetch('online::user_row', ['item' => $item]) ?>
        <?php endforeach ?>
    </div>
<?php else: ?>
    <div class="max-w-2xl">
        <div class="bg-blue-50 border border-blue-200 text-blue-700 px-4 py-4 rounded-lg shadow-sm">
            <div class="flex items-center">
                <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <?= __('List is empty') ?>
            </div>
        </div>
    </div>
<?php endif ?>

<?php if ($data['total'] > 0): ?>
    <div class="mt-8 border-t border-gray-200 pt-6">
        <!-- Total counter -->
        <div class="flex justify-between items-center mb-4">
            <div class="text-sm text-gray-600 font-medium">
                <?= __('Total') ?>: 
                <span class="text-gray-900"><?= $data['total'] ?></span>
            </div>
        </div>
        
        <!-- Page switching -->
        <?php if (! empty($data['pagination'])): ?>
            <div class="flex justify-center">
                <?= $data['pagination'] ?>
            </div>
        <?php endif; ?>
    </div>
<?php endif; ?>