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

<header th:replace="~{/towns/Templating.html :: header}"></header>

<main>
    <section id="allTrailsBar" class="centerFlex">
        <img class="trailsImages"
             th:each="trail : ${trails}"
             th:src="@{${trail.getImgPath()}}"
             th:onclick="'updateOutputTrail('+ ${trail.getId()} +');'"
             th:id="'img' + ${trail.getId()}" th:alt="${trail.getName()}"
        >
    </section>

    <section id="trailInfoContainer" class="trailInfoFrag">
        <!--All this section is loaded from thymeleaf, based on what tail is selected
            in the #allTrailsBar -->
        <div class="trailInfoHeader">
            <h1 class="centerFlex">Please select your trail</h1>
        </div>
    </section>

</main>
<footer th:insert="~{/towns/Templating.html :: footer}"></footer>


<script type="text/javascript" th:src="@{scripts/allTrails.js}"></script>

</body>
</html>