<!DOCTYPE html>
<html>

<head>
    <title>Website Web</title>
    <link rel="stylesheet" th:href="@{css/style.css}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <header th:replace="fragments/temp_frags.html :: header"></header>

    <main>
        <div class="trailList">
            <ul class="ulHeader">
                <li onclick="selectTrail('trail1', this)" class="liHeader" id="trail1" >Trail 1</li>
                <li onclick="selectTrail('trail2', this)" class="liHeader selected" id="trail2" >Trail 2</li>
                <li onclick="selectTrail('trail3', this)" class="liHeader" id="trail3" >Trail 3</li>
                <li onclick="updateOutput()" class="liHeader" id="trail4" >Trail 4</li>
            </ul>
        </div>

      <section class="mainBlock">
        <article class="trailStats">
            <h1 class="titleH1">Trail Stats</h1>
            <img src="../static/images/stats.png" alt="Stats" class="stats">
            <div class="textStats">
                <p><b>Explored:</b> 60%</p>
                <p><b>Landmarks Visited:</b> 3/5</p>
                <p><b>Shops Visited:</b> 6/10</p>
            </div>
        </article>
        <article id="trailInfoBox" class="trailInfo"></article>
        <article class="badgesBlock">
            <h1 class="titleH1">Badges</h1>
            <div class="badgesList">
                <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
                <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
                <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
                <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
                <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
            </div>
            
          </article>  
      </section>
    </main>

    <footer th:replace="fragments/temp_frags.html :: footer"></footer>
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" th:src="@{scripts/gabScripts.js}"></script>
</body>
</html>