<main class="page-shell page-shell--flush">
    <!-- Hero Banner -->
    <section class="results-hero">
        <div class="container">
            <h1 class="results-hero__title"><?php echo tr('Live Tracking Management', 'Manajemen Pelacakan Langsung'); ?></h1>
            <p class="results-hero__sub"><?php echo tr('Monitor the live leaderboard, checkpoint statuses, and the course map.', 'Pantau papan peringkat langsung, status checkpoint, dan peta rute.'); ?></p>
        </div>
    </section>

    <!-- Tracking Panel -->
    <section class="container results-wrapper">
        <div class="results-panel scale-in">
            
            <div class="tracking-actions">
                <button class="btn btn--primary tracking-refresh" type="button">
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <polyline points="23 4 23 10 17 10"></polyline>
                        <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
                    </svg>
                    <?php echo tr('Refresh Data', 'Segarkan Data'); ?>
                </button>
            </div>

            <div class="tracking-grid">
                <!-- Live Leaderboard -->
                <section class="tracking-block">
                    <div class="tracking-block__head">
                        <h2 class="tracking-block__title"><?php echo tr('Live Leaderboard', 'Papan Peringkat Langsung'); ?></h2>
                    </div>
                    <div class="table-wrap">
                        <table class="results-table tracking-table">
                            <thead>
                                <tr>
                                    <th><?php echo tr('Pos', 'Pos'); ?></th>
                                    <th><?php echo tr('Runner', 'Pelari'); ?></th>
                                    <th><?php echo tr('Category', 'Kategori'); ?></th>
                                    <th><?php echo tr('Time', 'Waktu'); ?></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td class="tracking-runner">Alex Mercer <span class="status-badge status-badge--lead"><?php echo tr('Lead', 'Memimpin'); ?></span></td>
                                    <td>Open M</td>
                                    <td>02:14:33</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td class="tracking-runner">Sarah Jenkins</td>
                                    <td>Open F</td>
                                    <td>02:18:12</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td class="tracking-runner">Marcus Thorne</td>
                                    <td>Open M</td>
                                    <td>02:21:05</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td class="tracking-runner">Elena Rostova</td>
                                    <td>Open F</td>
                                    <td>02:25:40</td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td class="tracking-runner">Daniel Whitfield</td>
                                    <td>Open M</td>
                                    <td>02:28:15</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </section>

                <!-- Checkpoint Live -->
                <section class="tracking-block">
                    <div class="tracking-block__head">
                        <h2 class="tracking-block__title"><?php echo tr('Checkpoint Live', 'Checkpoint Langsung'); ?></h2>
                        <select class="results-filter__select tracking-cp-select" aria-label="<?php echo tr('Select checkpoint', 'Pilih checkpoint'); ?>">
                            <option>CP 1</option>
                            <option>CP 2</option>
                            <option>CP 3</option>
                            <option>CP 4</option>
                            <option>CP 5</option>
                        </select>
                    </div>
                    <div class="table-wrap">
                        <table class="results-table tracking-table tracking-table--checkpoint">
                            <thead>
                                <tr>
                                    <th><?php echo tr('No', 'No'); ?></th>
                                    <th><?php echo tr('Runner', 'Pelari'); ?></th>
                                    <th><?php echo tr('Last Scan', 'Scan Terakhir'); ?></th>
                                    <th><?php echo tr('Status', 'Status'); ?></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>20101</td>
                                    <td class="tracking-runner">Alex Mercer</td>
                                    <td><?php echo tr('2 mins ago', '2 menit lalu'); ?></td>
                                    <td><span class="status-badge status-badge--finished"><?php echo tr('Scanned', 'Dipindai'); ?></span></td>
                                </tr>
                                <tr>
                                    <td>20203</td>
                                    <td class="tracking-runner">Sarah Jenkins</td>
                                    <td>5 mins ago</td>
                                    <td><span class="status-badge status-badge--finished"><?php echo tr('Scanned', 'Dipindai'); ?></span></td>
                                </tr>
                                <tr>
                                    <td>20102</td>
                                    <td class="tracking-runner">Marcus Thorne</td>
                                    <td>8 mins ago</td>
                                    <td><span class="status-badge status-badge--finished"><?php echo tr('Scanned', 'Dipindai'); ?></span></td>
                                </tr>
                                <tr>
                                    <td>20204</td>
                                    <td class="tracking-runner">Elena Rostova</td>
                                    <td>12 mins ago</td>
                                    <td><span class="status-badge status-badge--finished"><?php echo tr('Scanned', 'Dipindai'); ?></span></td>
                                </tr>
                                <tr>
                                    <td>20103</td>
                                    <td class="tracking-runner">Daniel Whitfield</td>
                                    <td>15 mins ago</td>
                                    <td><span class="status-badge status-badge--finished"><?php echo tr('Scanned', 'Dipindai'); ?></span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <button class="btn btn--primary tracking-manual" type="button">+ <?php echo tr('Manual Scan Entry', 'Entri Pindai Manual'); ?></button>
                </section>
            </div>

            <!-- Track Map -->
            <div style="margin-bottom: 20px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h2 style="font-size: 1.2rem; font-family: 'Montserrat', sans-serif;"><?php echo tr('Track Map (Live Location)', 'Peta Rute (Lokasi Langsung)'); ?></h2>
                    <div class="results-tabs" style="margin:0; justify-content:flex-end; border: none;">
                        <button class="results-tab is-active" style="padding: 4px 12px; font-size: 0.75rem;"><?php echo tr('Terrain', 'Medan'); ?></button>
                        <button class="results-tab" style="padding: 4px 12px; font-size: 0.75rem;"><?php echo tr('Satellite', 'Satelit'); ?></button>
                    </div>
                </div>
                
                <div style="width: 100%; height: 450px; background: rgba(0,0,0,0.2); border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center;">
                    <!-- Placeholder for map -->
                    <div style="text-align: center; color: var(--muted);">
                        <svg viewBox="0 0 24 24" style="width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.5; margin-bottom: 10px;">
                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                            <circle cx="12" cy="10" r="3"></circle>
                        </svg>
                        <p style="font-weight: 500; font-size: 1.1rem; color: #fff; margin-bottom: 5px;"><?php echo tr('Interactive Map View', 'Tampilan Peta Interaktif'); ?></p>
                        <p style="font-size: 0.85rem;"><?php echo tr('(Google Maps API or Mapbox integration goes here)', '(Integrasi Google Maps API atau Mapbox di sini)'); ?></p>
                    </div>
                    
                    <!-- Mock Map Points -->
                    <div style="position: absolute; top: 40%; left: 45%; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px rgba(243, 152, 24, 0.3);"></div>
                    <div style="position: absolute; top: 45%; left: 35%; width: 10px; height: 10px; background: #fff; border-radius: 50%;"></div>
                    <div style="position: absolute; top: 55%; left: 60%; width: 10px; height: 10px; background: #fff; border-radius: 50%;"></div>
                    <div style="position: absolute; top: 60%; left: 75%; padding: 4px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; font-size: 0.7rem; color: #fff;">CP 2</div>
                    <div style="position: absolute; top: 30%; left: 20%; padding: 4px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; font-size: 0.7rem; color: #fff;">CP 1</div>
                </div>
            </div>

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