<main class="page-shell page-shell--flush">
    <!-- Hero Banner -->
    <section class="results-hero">
        <div class="container">
            <h1 class="results-hero__title"><?php echo tr('Registered Runners', 'Pelari Terdaftar'); ?></h1>
            <p class="results-hero__sub"><?php echo tr('Manage and view all participants who have registered.', 'Kelola dan lihat semua peserta yang telah mendaftar.'); ?></p>
        </div>
    </section>

    <!-- Results Panel -->
    <section class="container results-wrapper">
        <div class="results-panel scale-in">

            <!-- Search and Action -->
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; flex-wrap: wrap;">
                <div class="results-search" style="margin-bottom: 0; flex: 1; min-width: 250px;">
                    <input type="text" class="results-search__input" placeholder="<?php echo tr('Search by name, reg ID, or email...', 'Cari berdasarkan nama, ID daftar, atau email...'); ?>">
                    <svg class="results-search__icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                </div>
                <button class="btn btn--primary" style="padding: 12px 24px;"><?php echo tr('Export Data', 'Ekspor Data'); ?></button>
            </div>

            <!-- Table -->
            <div class="table-wrap">
                <table class="results-table">
                    <thead>
                        <tr>
                            <th><?php echo tr('No', 'No'); ?></th>
                            <th><?php echo tr('Reg ID', 'ID Daftar'); ?></th>
                            <th><?php echo tr('Full Name', 'Nama Lengkap'); ?></th>
                            <th><?php echo tr('Email', 'Email'); ?></th>
                            <th><?php echo tr('Category', 'Kategori'); ?></th>
                            <th><?php echo tr('Status', 'Status'); ?></th>
                            <th><?php echo tr('Date', 'Tanggal'); ?></th>
                            <th><?php echo tr('Action', 'Aksi'); ?></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>#TR26-001</td>
                            <td>John Doe</td>
                            <td>john.doe@example.com</td>
                            <td>50K Ultra</td>
                            <td><span class="status-badge status-badge--finished"><?php echo tr('Paid', 'Dibayar'); ?></span></td>
                            <td>Oct 12, 2025</td>
                            <td>
                                <a href="#" style="color: var(--accent); text-decoration: none; margin-right: 8px; font-size: 0.85rem;"><?php echo tr('Edit', 'Ubah'); ?></a>
                                <a href="#" style="color: #e74c3c; text-decoration: none; font-size: 0.85rem;"><?php echo tr('Delete', 'Hapus'); ?></a>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>#TR26-002</td>
                            <td>Jane Smith</td>
                            <td>jane.smith@example.com</td>
                            <td>21K Half</td>
                            <td><span class="status-badge status-badge--finished"><?php echo tr('Paid', 'Dibayar'); ?></span></td>
                            <td>Oct 14, 2025</td>
                            <td>
                                <a href="#" style="color: var(--accent); text-decoration: none; margin-right: 8px; font-size: 0.85rem;"><?php echo tr('Edit', 'Ubah'); ?></a>
                                <a href="#" style="color: #e74c3c; text-decoration: none; font-size: 0.85rem;"><?php echo tr('Delete', 'Hapus'); ?></a>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>#TR26-003</td>
                            <td>Michael Johnson</td>
                            <td>michael.j@example.com</td>
                            <td>10K Trail</td>
                            <td><span class="status-badge status-badge--dnf"><?php echo tr('Pending', 'Tertunda'); ?></span></td>
                            <td>Oct 15, 2025</td>
                            <td>
                                <a href="#" style="color: var(--accent); text-decoration: none; margin-right: 8px; font-size: 0.85rem;"><?php echo tr('Edit', 'Ubah'); ?></a>
                                <a href="#" style="color: #e74c3c; text-decoration: none; font-size: 0.85rem;"><?php echo tr('Delete', 'Hapus'); ?></a>
                            </td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>#TR26-004</td>
                            <td>Sarah Williams</td>
                            <td>sarah.w@example.com</td>
                            <td>50K Ultra</td>
                            <td><span class="status-badge status-badge--finished"><?php echo tr('Paid', 'Dibayar'); ?></span></td>
                            <td>Oct 16, 2025</td>
                            <td>
                                <a href="#" style="color: var(--accent); text-decoration: none; margin-right: 8px; font-size: 0.85rem;"><?php echo tr('Edit', 'Ubah'); ?></a>
                                <a href="#" style="color: #e74c3c; text-decoration: none; font-size: 0.85rem;"><?php echo tr('Delete', 'Hapus'); ?></a>
                            </td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>#TR26-005</td>
                            <td>Robert Brown</td>
                            <td>robert.b@example.com</td>
                            <td>21K Half</td>
                            <td><span class="status-badge status-badge--dnf"><?php echo tr('Pending', 'Tertunda'); ?></span></td>
                            <td>Oct 16, 2025</td>
                            <td>
                                <a href="#" style="color: var(--accent); text-decoration: none; margin-right: 8px; font-size: 0.85rem;"><?php echo tr('Edit', 'Ubah'); ?></a>
                                <a href="#" style="color: #e74c3c; text-decoration: none; font-size: 0.85rem;"><?php echo tr('Delete', 'Hapus'); ?></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="results-pagination">
                <span class="results-pagination__info"><?php echo tr('Showing 1 to 5 of 5 results', 'Menampilkan 1 sampai 5 dari 5 hasil'); ?></span>
                <div class="results-pagination__pages">
                    <button class="results-page-btn" disabled><?php echo tr('Previous', 'Sebelumnya'); ?></button>
                    <button class="results-page-btn is-active">1</button>
                    <button class="results-page-btn" disabled><?php echo tr('Next', 'Berikutnya'); ?></button>
                </div>
            </div>

        </div>
    </section>
</main>
