<!-- @thymesVar id="location" type="Team5.SmartTowns.data.Location" -->
<!DOCTYPE html>
<html lang="en" th:fragment="trailsSection" class="trailsPageFrag">
<head>
<meta charset="UTF-8">
<title th:text="${trail.getTrailName()}"></title>
<link rel="stylesheet" th:href="@{/css/trailsPageFragsStyle.css}">
<link rel="stylesheet" th:href="@{/css/mobile-style.css}">
<link rel="stylesheet" th:href="@{/css/userProfile.css}">
</head>
<body >
<header th:replace="~{/fragments/banners::header}"></header>
<main>
<hr style="height:40px; visibility:hidden;" />
<article class="trailsFragment">
<H1 th:text="*{trail.getTrailName()}" id="trailHeader"></H1>
<div th:if="*{trail.getTrailName()=='Caerphilly Castle Trail'}">
<iframe
width="600"
height="400"
frameborder="0"
scrolling="yes"
marginheight="0"
marginwidth="0"
src="https://maps.google.com/maps?q=51.57623,-3.21910&output=svembed">
</iframe>
<div><a href="https://www.google.com/maps/dir/51.57623,-3.21910/51.575372,-3.219186/51.576363,-3.220712//@11z&output=svembed">Trail Map</a></div>
</div>
<div th:if="*{trail.getTrailName()=='Caerphilly Pub Trail'}">
<iframe
width="600"
height="400"
frameborder="0"
scrolling="yes"
marginheight="0"
marginwidth="0"
src="https://maps.google.com/maps?q=51.57239,-3.21992&output=svembed">
</iframe>
<div><a href="https://www.google.com/maps/dir/51.57239,-3.21992/51.57230,-3.21938//@11z">Trail Map</a></div>
</div>
<div th:if="*{trail.getTrailName()=='Caerphilly Heritage Trail'}">
<iframe
width="600"
height="400"
frameborder="0"
scrolling="yes"
marginheight="0"
marginwidth="0"
th:src="'https://maps.google.com/maps?q=51.57168,-3.21861&output=svembed'">
</iframe>
<div>
<a href="https://www.google.com/maps/dir/51.57168,-3.21861/51.57465,-3.22022//@11z">Trail Map</a></div>
</div>
<div th:if="*{trail.getTrailName()=='Risca Heritage Trail'}">
<iframe
width="600"
height="400"
frameborder="0"
scrolling="yes"
marginheight="0"
marginwidth="0"
th:src="'https://maps.google.com/maps?q=51.61117,-3.10198&output=svembed'">
</iframe>
<div><a href="https://www.google.com/maps/dir/51.61117,-3.10198/51.61655,-3.12371 //@11z">Trail Map</a></div>
</div>
<div th:if="*{trail.getTrailName()=='Penarth Esplanade Trail'}">
<iframe
width="600"
height="400"
frameborder="0"
scrolling="yes"
marginheight="0"
marginwidth="0"
th:src="'https://maps.google.com/maps?q=51.43484,-3.164928&output=svembed'">
</iframe>
<div>
<a href="https://www.google.com/maps/dir/51.43484,-3.16492/51.43547,-3.16789//@11z">Trail Map</a>
</div>
</div>
<H3>Checkpoints:</H3>
<div th:each="location:${locations}" >
<div>
<li id="checkpointList">
<div><a th:href="'/checkpoints/'+${location.getLocationName().replace(' ', '-')}" th:text="${location.getLocationName()}"></a></div>
<ul></ul>
</li>
</div>
</div>
</article>
<article>
<h1> Stickers </h1>
<br>
<div class="stickersContainer">
<img th:class="'stickerImg gotSticker'" th:each="sticker : ${stickers}" th:src="@{'../' + ${sticker.getDisplayImg()}}"
th:id="'img' + ${sticker.getId()}" th:alt="${sticker.getName()}" >
</div>
<hr style="height:15px; visibility:hidden;" />
<H2 id="return">
<a href="/mobile-home">Home</a></H2>
<hr style="height:5px; visibility:hidden;" />
</article>
<hr style="height:40px; visibility:hidden;" />
</main>
<footer th:replace="~{/fragments/banners::footer}"></footer>
</body>
</html>