<?php $this->push('styles') ?>
<link rel="stylesheet" href="<?= module_asset('sports', 'css/sports.css') ?>">
<?php $this->endPush() ?>

<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="fas fa-running me-2"></i><?= lang('sports.title') ?></h4>
    <div>
        <?php if (auth_can('sports.manage')): ?>
        <a href="/sports/categories" class="btn btn-outline-secondary btn-sm me-1"><i class="fas fa-tags me-1"></i><?= lang('sports.categories') ?></a>
        <a href="/sports/create" class="btn btn-primary btn-sm"><i class="fas fa-plus me-1"></i><?= lang('sports.create') ?></a>
        <?php endif; ?>
    </div>
</div>

<?php if (!empty($categories)): ?>
<ul class="nav nav-pills mb-3" id="sportCatTabs">
    <li class="nav-item"><a class="nav-link active" data-bs-toggle="pill" href="#cat-all">All</a></li>
    <?php foreach ($categories as $cat): ?>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#cat-<?= $cat['id'] ?>"><?= e(current_lang() === 'ar' ? $cat['name_ar'] : $cat['name_en']) ?></a></li>
    <?php endforeach; ?>
</ul>
<?php endif; ?>

<div class="row g-3">
<?php foreach ($sports as $sport): ?>
    <div class="col-md-4 col-lg-3 sport-card" data-category="<?= $sport['category_id'] ?>">
        <div class="card h-100 shadow-sm">
            <?php if ($sport['image_path']): ?>
            <img src="<?= e($sport['image_path']) ?>" class="card-img-top" alt="" style="height:140px;object-fit:cover">
            <?php else: ?>
            <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height:140px">
                <i class="fas fa-futbol fa-3x text-muted"></i>
            </div>
            <?php endif; ?>
            <div class="card-body">
                <h6 class="card-title mb-1"><?= e($sport['name_en']) ?></h6>
                <small class="text-muted"><?= e($sport['category_name'] ?? '') ?></small>
                <div class="mt-2">
                    <span class="badge bg-primary"><?= (int)$sport['active_classes'] ?> classes</span>
                    <span class="badge bg-info"><?= (int)$sport['active_teams'] ?> teams</span>
                    <?php if ($sport['team_sport']): ?><span class="badge bg-secondary">Team</span><?php endif; ?>
                </div>
            </div>
            <div class="card-footer bg-transparent border-top-0">
                <a href="/sports/view/<?= $sport['id'] ?>" class="btn btn-sm btn-outline-primary w-100"><i class="fas fa-eye me-1"></i>View</a>
            </div>
        </div>
    </div>
<?php endforeach; ?>
<?php if (empty($sports)): ?>
    <div class="col-12"><div class="empty-state"><i class="fas fa-running"></i><p>No sports configured yet</p></div></div>
<?php endif; ?>
</div>

<?php $this->push('scripts') ?>
<script src="<?= module_asset('sports', 'js/sports.js') ?>"></script>
<script>
document.querySelectorAll('#sportCatTabs .nav-link').forEach(tab => {
    tab.addEventListener('click', function() {
        const target = this.getAttribute('href').replace('#cat-','');
        document.querySelectorAll('.sport-card').forEach(card => {
            card.style.display = (target === 'all' || card.dataset.category === target) ? '' : 'none';
        });
    });
});
</script>
<?php $this->endPush() ?>