<?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="max-w-2xl">
        <div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
            <?php foreach ($data['items'] as $item): ?>
                <div class="flex items-center justify-between p-4 border-b border-gray-100 last:border-b-0 <?= $item['current_user_ip'] ? 'bg-yellow-50 border-l-4 border-l-yellow-400' : 'hover:bg-gray-50' ?> transition-colors duration-150">
                    <!-- IP Address with Actions -->
                    <div class="flex items-center space-x-3">
                        <div class="flex items-center space-x-2">
                            <svg class="w-4 h-4 text-gray-500" 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>
                            <a href="<?= $item['search_ip'] ?>" 
                               class="font-mono text-gray-900 hover:text-blue-600 transition-colors duration-200 font-medium">
                                <?= $item['ip'] ?>
                            </a>
                        </div>
                        
                        <!-- Whois Link -->
                        <a href="<?= $item['whois_ip'] ?>" 
                           title="<?= __('Whois') ?>"
                           class="inline-flex items-center justify-center w-6 h-6 bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800 rounded-full transition-colors duration-200 text-xs font-bold">
                            ?
                        </a>
                    </div>

                    <!-- Count Badge -->
                    <div class="flex items-center">
                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
                            (<?= $item['count'] ?>)
                        </span>
                    </div>
                </div>
            <?php endforeach ?>
        </div>
    </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 font-semibold"><?= $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; ?>