<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>All Trails</title>
    <link rel="stylesheet" th:href="@{css/allTrails.css}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<header>
    <div id="allTrailsBar" class="centerFlex">
        <!--TODO add rest of page-->
        <img class="trailsImages"
             th:each="trail : ${trails}"
             th:src="@{${trail.getImgPath()}}"
             th:onclick="'updateOutputTrail('+ ${trail.id} +');'"
             th:id="'img' + ${trail.getId()}" alt="IMG"
        >
    </div>
</header>

<main>
    <section id="trailInfoBox"></section>
</main>


<script type="text/javascript" th:src="@{scripts/allTrails.js}"></script>
<script th:inline="javascript">
    function updateOutputTrail(id) {
        /* Updates the trail being shown on screen to the one requested by ID */
        $.get("/allTrails/" + id).done(function (fragment) {
            $("#trailInfoBox").html(fragment)
        });
        updateSelectedTrail(id);
    }
    function updateSelectedTrail(id) {
        /* Updates the trail bar, so that it highlights the selected trail */
        let list = document.getElementsByClassName('trailsImages')
        for (let i = 0; i < list.length; i++) {
            if (list[i].classList.contains('selected')) {
                list[i].classList.remove('selected')
                break
            }
        }
        document.getElementById("img" + id).classList.add("selected")
    }
</script>
</body>
</html>