<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta data 
    ========================== -->
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Fujiwara Tofu Shop, the home of FiveM touge racing.">
    <meta name="author" content="arigata9 / 0xygen">
    <meta name="google" content="notranslate" />
    <title>FTS Â· Leaderboard</title>

    <!-- JQuery JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" crossorigin="anonymous"></script>

    <style>
        /* Codepen Specific */
        * {
        margin:0;
        padding:0;
        font-family:Helvetica, Arial, sans-serif;
        }
        body {
        background:#232323;
        }
        input[type=text], textarea, input[type=email], input[type=password], input[type=tel], input[type=url], input[type=search], input[type=date] {
            padding: 10px;
            width: 100%;
            font-size: 14px;
            font-family: inherit;
            line-height: 24px;
            color: #555;
            background-color: #f1f1f1;
            border: none;
            transition: all 0.2s ease;
            -webkit-transition: all 0.2s ease;
        }
        input[type=text], textarea, input[type=email], input[type=password], input[type=tel], input[type=url], input[type=search], input[type=date], .material.woocommerce-page[data-form-style="default"] input#coupon_code {
            background-color: rgba(0,0,0,0.1);
            border-radius: 4px;
            border: 2px solid rgba(0,0,0,0);
        }
        /* /end Codepen Specific */
        /* Ladder Navigation */
        #leaderboard {
            padding:50px;
        }
        .ladder-nav {
            display:flex;
            flex-wrap:wrap;
            align-items: center;
            background:#5055CB;
            padding:10px 25px;
            border-radius:10px;
            border:1px solid #686EF9;
        }
        .ladder-title {
            flex:2;
        }
        .ladder-search {
            flex:1;
            padding-right:25px;
        }
        .ladder-title {
            font-size:20px;
            color:#888DFF!important;
            font-weight:bold;
            text-transform:uppercase;
        }
        .ladder-search input {
            color:white
        }
        .ladder-search input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
            color: #888DFF;
        }
        .ladder-search input::-moz-placeholder { /* Firefox 19+ */
            color: #888DFF;
        }
        .ladder-search input:-ms-input-placeholder { /* IE 10+ */
            color: #888DFF;
        }
        .ladder-search input:-moz-placeholder { /* Firefox 18- */
            color: #888DFF;
        }
        /* /end Ladder Navigation */
        /* Leaderboard Results */
        .leaderboard-results {
        text-align:left;
        border-collapse: collapse;
        }
        .leaderboard-results thead th {
        padding: 25px;
        color:#747474;
        font-size:14px;
        font-weight:bold;
        }
        .leaderboard-results tbody td {
        padding:15px 25px;
        background:#1a1a1a;
        font-size:16px;
        border-bottom:5px solid #232323;
        }
        .leaderboard-results tbody td:nth-of-type(7) {
        font-weight:bold;
        }
        .leaderboard-results tbody tr:hover td {
            background:#1d1d1d;
        }
        .leaderboard-results tbody tr {
        color:#747474;
        }
        .leaderboard-results tbody tr:first-child {
        color:#686EF9;
        }
        .leaderboard-results tbody span {
        font-weight:bold;
        padding:10px 15px;
        border-radius:50%;
        }
        .leaderboard-results tbody tr:first-child span {
        background:#5055CB;
        color:white;
        }
        .leaderboard-results tbody tr span {
        background:#262626;
        color:#747474;
        }
        /* /end Leaderboard Results */
    </style>
</head>
<body translate="no">

    <div class="container-wrap">
        <section id="leaderboard">
            <nav class="ladder-nav">
                <div class="ladder-title">
                <h1>Leaderboard</h1>
                </div>
                <div class="ladder-search">
                    <input type="text" id="search-leaderboard" class="live-search-box" placeholder="Search Team, Player..." />
                </div>
            </nav>
            <table id="rankings" class="leaderboard-results" width="100%">
                <thead>
                    <tr>
                        <th>Rank</th>
                        <th>Driver</th>
                        <th>Car</th>
                        <th>Time</th>
                    </tr>
                </thead>
                <tbody>
                    <% Object.keys(scores).forEach(score => { %>
                        <tr>
                            <td><%= scores[score].track_rank %></td>
                            <td><%= scores[score].user_name %></td>
                            <td><%= scores[score].vehicle_name %></td>
                            <td><%= scores[score].score %></td>
                        </tr>
                    <% }); %>
                </tbody>
            </table>
        </section>
    </div>

    <!-- Search Javascript -->

    <script>
        $("#search-leaderboard").keyup(function() {
            var value = this.value;

            $("table").find("tr").each(function(index) {
                if (index === 0) return;

                var if_td_has = false;
                $(this).find('td').each(function () {
                    if_td_has = if_td_has || $(this).text().indexOf(value) !== -1; //Check if td's text matches key and then use OR to check it for all td's
                });

                $(this).toggle(if_td_has);

            });
        });
    </script>

</body>
</html>