<!DOCTYPE html>
<html class="h-100" lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="text-center bg-dark hero-image">

    <!-- Preloader -->
    <div class="loader-wrapper">
        <div class="loading" id="loader">
            <div class="arc"></div>
            <div class="arc"></div>
            <div class="arc"></div>
        </div>
    </div>

    <div class="toast-container position-absolute p-3 top-0 start-0">
        <div class="toast" id="creditToast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">Special thanks</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Special thanks goes to<br>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <strong>tishio</strong><br>
                        Sick developer, translator and owner of Fujiwara Tofu Shop
                    </li>
                    <li class="list-group-item">
                        <strong>Niklas</strong><br>
                        Ideas, valuable input
                    </li>
                    <li class="list-group-item">
                        <strong>PivolzKrana</strong><br>
                        Sick car screenshot
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Changelog Modal -->
    <div class="modal fade" id="ChangelogModal" tabindex="-1" aria-labelledby="ChangelogModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="ChangelogModalLabel"><% if (typeof en !== 'undefined') { %>
                <%= en.Changelog %>
            <% } %>
            <% if (typeof ru !== 'undefined') { %>
                <%= ru.Changelog %>
            <% } %></h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <%- changelog %>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
        </div>
    </div>

    <!-- localization -->
    <div class="locale-button">
        <div class="locale-button-style">
            <% if (typeof en !== 'undefined') { %>
                <a href="/ru"><%- en.toggleLocaleEmote %></a>
            <% } %>
            <% if (typeof ru !== 'undefined') { %>
                <a href="/"><%- ru.toggleLocaleEmote %></a>
            <% } %>
        </div>
        
    </div>

    <!-- Server Name Head Line -->
    <div class="d-flex flex-row-reverse" style="margin-top: 0;">
        <div class="p-2 fts-logo">
        <img style="margin-right: 2rem; width: 100%;" src="img/FTS-logo.png" />
        </div>
    </div>
    
    <!-- First diagonal box -->
    <div class="diagonal-box" style="margin-top: var(--top-margin);"> 
        <!-- First diagonal content box -->
        <div class="diagonal-content">
        <h2 class="display-2 text-white fade show">
            <!-- Welcome -->
            <% if (typeof en !== 'undefined') { %>
                <%= en.welcome %>
            <% } %>
            <% if (typeof ru !== 'undefined') { %>
                <%= ru.welcome %>
            <% } %>
        </h2>
        <p class="lead text-white">
            <% if (typeof en !== 'undefined') { %>
                <%= en.welcomesubheadline %>
            <% } %>
            <% if (typeof ru !== 'undefined') { %>
                <%= ru.welcomesubheadline %>
            <% } %>
        </p>
        <p>
            <a href="#leaderboards" class="btn btn-lg btn-outline-light fw-bold border-black text-white"><% if (typeof en !== 'undefined') { %>
                <%= en.Leaderboards %>
            <% } %>
            <% if (typeof ru !== 'undefined') { %>
                <%= ru.Leaderboards %>
            <% } %></a>
            <a href="#about" class="btn btn-lg btn-outline-light fw-bold border-black text-white"><% if (typeof en !== 'undefined') { %>
                <%= en.learnmore %>
            <% } %>
            <% if (typeof ru !== 'undefined') { %>
                <%= ru.learnmore %>
            <% } %></a>
            <a href="#faq" class="btn btn-lg btn-outline-light fw-bold border-black text-white"><% if (typeof en !== 'undefined') { %>
                <%= en.FAQbutton %>
            <% } %>
            <% if (typeof ru !== 'undefined') { %>
                <%= ru.FAQbutton %>
            <% } %></a>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-lg btn-outline-light fw-bold border-black text-white" data-bs-toggle="modal" data-bs-target="#ChangelogModal">
                <% if (typeof en !== 'undefined') { %>
                    <%= en.Changelog %>
                <% } %>
                <% if (typeof ru !== 'undefined') { %>
                    <%= ru.Changelog %>
                <% } %>
            </button>
        </p>
        </div>
    
    </div>
    
    <!-- Second diagonal box -->
    <div class="diagonal-box background-one">
        <div class="diagonal-content text-center">
        <h2 class="display-2 text-white" id="leaderboards">
            <% if (typeof en !== 'undefined') { %>
                <%= en.leaderboardsHeading %>
            <% } %>
            <% if (typeof ru !== 'undefined') { %>
                <%= ru.leaderboardsHeading %>
            <% } %>
        </h2>

        <div class="card w-50 mx-auto">
            <div class="card-header">
                <% if (typeof en !== 'undefined') { %>
                    <%= en.trackSelector %>
                <% } %>
                <% if (typeof ru !== 'undefined') { %>
                    <%= ru.trackSelector %>
                <% } %>
            </div>
            <div class="card-body">
                <p class="card-text"><% if (typeof en !== 'undefined') { %>
                    <%= en.selectorDescription %>
                <% } %>
                <% if (typeof ru !== 'undefined') { %>
                    <%= ru.selectorDescription %>
                <% } %></p>
                <label for="maps"><% if (typeof en !== 'undefined') { %>
                    <%= en.Choose %>
                <% } %>
                <% if (typeof ru !== 'undefined') { %>
                    <%= ru.Choose %>
                <% } %></label>
                <select class="form-select" id="trackselector" name="trackid">
                    <% tracks.forEach(track => { %>
                        <option value="<%= track.track_id %>"><%= track.track_name %></option>
                    <% }); %>
                </select>
                <br>
                <button class="btn btn-primary" type="button" onclick="openLeaderboard()"><% if (typeof en !== 'undefined') { %>
                    <%- en.Open %>
                <% } %>
                <% if (typeof ru !== 'undefined') { %>
                    <%- ru.Open %>
                <% } %></button>
            </div>
        </div>
        </div>
    </div>
    
    <!-- Third diagonal box -->
    <div class="diagonal-box background-two">
        <div class="diagonal-content text-center text-white">
        <h2 class="display-2" id="about">
            <% if (typeof en !== 'undefined') { %>
                <%= en.aboutserver %>
            <% } %>
            <% if (typeof ru !== 'undefined') { %>
                <%= ru.aboutserver %>
            <% } %>
        </h2>
    
        <p class="lead">
            <% if (typeof en !== 'undefined') { %>
                <%- en.abouttext %>
            <% } %>
            <% if (typeof ru !== 'undefined') { %>
                <%- ru.abouttext %>
            <% } %>
            <iframe width="60%" height="415" src="https://www.youtube.com/embed/uXkbVSv503M?si=xHut0PcWfVDEmhmC" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <br><br>
            <% if (typeof en !== 'undefined') { %>
                <%- en.wanttosupport %>
            <% } %>
            <% if (typeof ru !== 'undefined') { %>
                <%- ru.wanttosupport %>
            <% } %>
        </p>
        </div>
    </div>

    <!-- Fourth diagonal box -->
    <div class="diagonal-box background-four">
        <div class="diagonal-content text-center text-white">
            <h2 class="display-2" id="faq">
                <% if (typeof en !== 'undefined') { %>
                    <%- en.faqheading %>
                <% } %>
                <% if (typeof ru !== 'undefined') { %>
                    <%- ru.faqheading %>
                <% } %>
            </h2>
            <div class="accordion w-50 mx-auto text-black" id="accordionExample">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.q1 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.q1 %>
                        <% } %>
                    </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <div class="accordion-body card-text">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.a1 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.a1 %>
                        <% } %>
                    </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.q2 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.q2 %>
                        <% } %>
                    </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                    <div class="accordion-body card-text">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.a2 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.a2 %>
                        <% } %>
                    </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.q3 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.q3 %>
                        <% } %>
                    </button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                        <div class="accordion-body card-text">
                            <% if (typeof en !== 'undefined') { %>
                                <%- en.a3 %>
                            <% } %>
                            <% if (typeof ru !== 'undefined') { %>
                                <%- ru.a3 %>
                            <% } %>
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingFour">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.q4 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.q4 %>
                        <% } %>
                    </button>
                    </h2>
                    <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
                    <div class="accordion-body card-text">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.a4 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.a4 %>
                        <% } %>
                    </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingFive">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.q5 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.q5 %>
                        <% } %>
                    </button>
                    </h2>
                    <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
                    <div class="accordion-body card-text">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.a5 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.a5 %>
                        <% } %>
                    </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingSix">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.q6 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.q6 %>
                        <% } %>
                    </button>
                    </h2>
                    <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionExample">
                    <div class="accordion-body card-text">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.a6 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.a6 %>
                        <% } %>
                    </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingSeven">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.q7 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.q7 %>
                        <% } %>
                    </button>
                    </h2>
                    <div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="headingSeven" data-bs-parent="#accordionExample">
                    <div class="accordion-body card-text">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.a7 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.a7 %>
                        <% } %>
                    </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingEight">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.q8 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.q8 %>
                        <% } %>
                    </button>
                    </h2>
                    <div id="collapseEight" class="accordion-collapse collapse" aria-labelledby="headingEight" data-bs-parent="#accordionExample">
                    <div class="accordion-body card-text">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.a8 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.a8 %>
                        <% } %>
                    </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingNine">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNine" aria-expanded="false" aria-controls="collapseNine">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.q9 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.q9 %>
                        <% } %>
                    </button>
                    </h2>
                    <div id="collapseNine" class="accordion-collapse collapse" aria-labelledby="headingNine" data-bs-parent="#accordionExample">
                    <div class="accordion-body card-text">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.a9 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.a9 %>
                        <% } %>
                    </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading10">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse10" aria-expanded="false" aria-controls="collapse10">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.q10 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.q10 %>
                        <% } %>
                    </button>
                    </h2>
                    <div id="collapse10" class="accordion-collapse collapse" aria-labelledby="heading10" data-bs-parent="#accordionExample">
                    <div class="accordion-body card-text">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.a10 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.a10 %>
                        <% } %>
                    </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading11">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse11" aria-expanded="false" aria-controls="collapse11">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.q11 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.q11 %>
                        <% } %>
                    </button>
                    </h2>
                    <div id="collapse11" class="accordion-collapse collapse" aria-labelledby="heading11" data-bs-parent="#accordionExample">
                    <div class="accordion-body card-text">
                        <% if (typeof en !== 'undefined') { %>
                            <%- en.a11 %>
                        <% } %>
                        <% if (typeof ru !== 'undefined') { %>
                            <%- ru.a11 %>
                        <% } %>
                    </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Fifth diagonal box -->
    <div class="diagonal-box background-five">
        <div class="diagonal-content text-center text-white">
        <h2 class="display-2" id="about">
            <% if (typeof en !== 'undefined') { %>
                <%= en.socialmedia %>
            <% } %>
            <% if (typeof ru !== 'undefined') { %>
                <%= ru.socialmedia %>
            <% } %>
        </h2>
        <br>
        <p class="lead">
            <a href="https://discord.gg/NbmrK5NAnR"><img src="img/dis64x64.png" alt="Discord"></a>
            <a href="https://www.youtube.com/channel/UCsb-tQ9oyB7mQtTjNdYXehA"><img src="img/yt64x64.png" alt="YouTube"></a>
            <a href="https://vk.com/fujiwaridze"><img src="img/vk64x64.png" alt="VK"></a>
            <a href="https://cfx.re/join/ozvm97"><img src="img/fivem64x64.png" alt="FiveM"></a>
        </p>
        </div>
    </div>
    
    <div class="credits-box">
        <div class="p-2 text-white-50 credits-box-inner">
        <p>
            <a href="#" class="text-white-50 text-decoration-none" role="button" id="toastTrigger">Made with &#x2615; by arigata9 / 0xygen</a>
        </p>
        <p>
            Want to tip me? Click <a href="https://buymeacoffee.com/0xygen" target="_blank">here</a>.
        </p>
        </div>
    </div>
    
    <!-- Javascript stuff going on here... -->
    <script>
        // openLeaderboard function
        function openLeaderboard() {
            const trackselector = document.getElementById("trackselector");
            const track_id = trackselector.value;

            return window.open(`/tracks/${track_id}`);
        }
    </script>

    <script>
        var toastTrigger = document.getElementById('toastTrigger')
        var toastLiveExample = document.getElementById('creditToast')
        if (toastTrigger) {
            toastTrigger.addEventListener('click', function () {
                var toast = new bootstrap.Toast(toastLiveExample)

                toast.show()
            })
        }

    </script>
  
</body>
</html>