<div class="row g-3 mb-4">
    <div class="col-md-4"><div class="card border-info h-100"><div class="card-body"><div class="d-flex justify-content-between"><div><h6 class="text-muted mb-1">Planned / Open</h6><h3 class="mb-0"><?= $planned ?></h3></div><div class="align-self-center"><i class="fas fa-calendar-alt fa-2x text-info opacity-50"></i></div></div></div></div></div>
    <div class="col-md-4"><div class="card border-primary h-100"><div class="card-body"><div class="d-flex justify-content-between"><div><h6 class="text-muted mb-1">Ongoing</h6><h3 class="mb-0"><?= $ongoing ?></h3></div><div class="align-self-center"><i class="fas fa-play-circle fa-2x text-primary opacity-50"></i></div></div></div></div></div>
    <div class="col-md-4"><div class="card border-success h-100"><div class="card-body"><div class="d-flex justify-content-between"><div><h6 class="text-muted mb-1">Completed</h6><h3 class="mb-0"><?= $completed ?></h3></div><div class="align-self-center"><i class="fas fa-check-double fa-2x text-success opacity-50"></i></div></div></div></div></div>
</div>

<div class="card mb-3">
    <div class="card-body py-2">
        <form class="row g-2 align-items-end" data-filter-table="events-table">
            <div class="col-md-3">
                <select name="status" class="form-select form-select-sm">
                    <option value=""><?= lang('common.all') ?></option>
                    <option value="planned">Planned</option>
                    <option value="registration_open">Registration Open</option>
                    <option value="ongoing">Ongoing</option>
                    <option value="completed">Completed</option>
                    <option value="cancelled">Cancelled</option>
                </select>
            </div>
            <div class="col-md-2"><button type="button" class="btn btn-sm btn-outline-primary" onclick="DataTableHelper.reload('events-table')">Filter</button></div>
            <?php if (auth_can('events.manage')): ?>
            <div class="col text-end"><a href="/events/create" class="btn btn-sm btn-primary"><i class="fas fa-plus me-1"></i><?= lang('facilities.create_event') ?></a></div>
            <?php endif; ?>
        </form>
    </div>
</div>

<div class="card"><div class="card-body">
    <table id="events-table" class="table table-striped table-hover w-100"
           data-url="/api/events/list"
           data-columns='<?= json_encode([
               ["data"=>"id","title"=>"#","width"=>"50px"],
               ["data"=>"code","title"=>"Code"],
               ["data"=>"title","title"=>"Title"],
               ["data"=>"type","title"=>"Type"],
               ["data"=>"venue","title"=>"Venue"],
               ["data"=>"date","title"=>"Date"],
               ["data"=>"attendees","title"=>"Attendees"],
               ["data"=>"status","title"=>"Status"],
               ["data"=>"actions","title"=>"Actions","orderable"=>false,"searchable"=>false],
           ]) ?>'>
        <thead><tr><th>#</th><th>Code</th><th>Title</th><th>Type</th><th>Venue</th><th>Date</th><th>Attendees</th><th>Status</th><th>Actions</th></tr></thead>
    </table>
</div></div>

<?php $__view->push('scripts') ?>
<script>document.addEventListener('DOMContentLoaded', function() { DataTableHelper.init('events-table', { order: [[0, 'desc']] }); });</script>
<?php $__view->endPush() ?>