<main class="page-shell page-shell--flush">
    <!-- Hero Banner -->
    <section class="results-hero">
        <div class="container">
            <h1 class="results-hero__title"><?php echo tr('Manage Race Results', 'Kelola Hasil Lomba'); ?></h1>
            <p class="results-hero__sub"><?php echo tr('Update official timings, split times, and overall standings for all race categories.', 'Perbarui waktu resmi, waktu split, dan klasemen keseluruhan untuk semua kategori lomba.'); ?></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" id="resultSearch" class="results-search__input" placeholder="<?php echo tr('Search by name, race number, or country...', 'Cari berdasarkan nama, nomor lomba, atau negara...'); ?>">
                    <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('Add Result', 'Tambah Hasil'); ?></button>
            </div>

            <!-- Distance Tabs -->
            <div class="results-tabs" id="resultTabs">
                <button class="results-tab is-active" data-dist="5k">5K FUN RUN</button>
                <button class="results-tab" data-dist="10k">10K</button>
                <button class="results-tab" data-dist="21k">21K</button>
                <button class="results-tab" data-dist="42k">42K</button>
            </div>

            <!-- Filters -->
            <div class="results-filters">
                <div class="results-filter-group">
                    <label class="results-filter__label"><?php echo tr('Category:', 'Kategori:'); ?></label>
                    <select class="results-filter__select" id="filterCategory">
                        <option value=""><?php echo tr('All Categories', 'Semua Kategori'); ?></option>
                        <option value="open-m"><?php echo tr('Open Male', 'Terbuka Laki-laki'); ?></option>
                        <option value="open-f"><?php echo tr('Open Female', 'Terbuka Perempuan'); ?></option>
                        <option value="master"><?php echo tr('Master (40+)', 'Master (40+)'); ?></option>
                        <option value="junior"><?php echo tr('Junior', 'Junior'); ?></option>
                    </select>
                </div>
                <div class="results-filter-group">
                    <label class="results-filter__label"><?php echo tr('Gender:', 'Jenis Kelamin:'); ?></label>
                    <select class="results-filter__select" id="filterGender">
                        <option value=""><?php echo tr('All Genders', 'Semua Jenis Kelamin'); ?></option>
                        <option value="male"><?php echo tr('Male', 'Laki-laki'); ?></option>
                        <option value="female"><?php echo tr('Female', 'Perempuan'); ?></option>
                    </select>
                </div>
                <div class="results-filter-group">
                    <label class="results-filter__label"><?php echo tr('Status:', 'Status:'); ?></label>
                    <select class="results-filter__select" id="filterStatus">
                        <option value=""><?php echo tr('All Status', 'Semua Status'); ?></option>
                        <option value="finished"><?php echo tr('Finished', 'Selesai'); ?></option>
                        <option value="dnf">DNF</option>
                        <option value="dns">DNS</option>
                    </select>
                </div>
                <button class="btn btn--primary results-filter__reset" id="resetFilters"><?php echo tr('Reset Filters', 'Atur Ulang Filter'); ?></button>
            </div>

            <!-- Total -->
            <p class="results-total" id="resultsTotal"><?php echo tr('Total:', 'Total:'); ?> <strong>24</strong> <?php echo tr('results', 'hasil'); ?></p>

            <!-- Table -->
            <div class="table-wrap">
                <table class="results-table" id="resultsTable">
                    <thead>
                        <tr>
                            <th><?php echo tr('Pos', 'Pos'); ?></th>
                            <th><?php echo tr('Race No', 'No Lomba'); ?></th>
                            <th><?php echo tr('Name', 'Nama'); ?></th>
                            <th><?php echo tr('Gender', 'Gender'); ?></th>
                            <th><?php echo tr('Time', 'Waktu'); ?></th>
                            <th><?php echo tr('Category', 'Kategori'); ?></th>
                            <th><?php echo tr('Status', 'Status'); ?></th>
                            <th><?php echo tr('Action', 'Aksi'); ?></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-gender="male" data-cat="open-m" data-status="finished">
                            <td>1</td>
                            <td>20101</td>
                            <td>Alex Mercer</td>
                            <td>Male</td>
                            <td>00:18:42</td>
                            <td>Open Male</td>
                            <td><span class="status-badge status-badge--finished"><?php echo tr('Finished', 'Selesai'); ?></span></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 data-gender="female" data-cat="open-f" data-status="finished">
                            <td>2</td>
                            <td>20203</td>
                            <td>Sarah Jenkins</td>
                            <td>Female</td>
                            <td>00:19:15</td>
                            <td>Open Female</td>
                            <td><span class="status-badge status-badge--finished"><?php echo tr('Finished', 'Selesai'); ?></span></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 data-gender="male" data-cat="open-m" data-status="finished">
                            <td>3</td>
                            <td>20102</td>
                            <td>Marcus Thorne</td>
                            <td>Male</td>
                            <td>00:19:38</td>
                            <td>Open Male</td>
                            <td><span class="status-badge status-badge--finished"><?php echo tr('Finished', 'Selesai'); ?></span></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 data-gender="female" data-cat="open-f" data-status="finished">
                            <td>3</td>
                            <td>20204</td>
                            <td>Emily Hartwood</td>
                            <td>Female</td>
                            <td>00:19:38</td>
                            <td>Open Female</td>
                            <td><span class="status-badge status-badge--finished"><?php echo tr('Finished', 'Selesai'); ?></span></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 data-gender="male" data-cat="open-m" data-status="finished">
                            <td>4</td>
                            <td>20103</td>
                            <td>Daniel Whitfield</td>
                            <td>Male</td>
                            <td>00:20:04</td>
                            <td>Open Male</td>
                            <td><span class="status-badge status-badge--finished"><?php echo tr('Finished', 'Selesai'); ?></span></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 data-gender="male" data-cat="open-m" data-status="dnf">
                            <td>—</td>
                            <td>20110</td>
                            <td>Peter Ashworth</td>
                            <td>Male</td>
                            <td>—</td>
                            <td>Open Male</td>
                            <td><span class="status-badge status-badge--dnf">DNF</span></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 6 of 6 results', 'Menampilkan 1 sampai 6 dari 6 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>
