trailsPageFrags.html

<!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/templatingstyle.css}">
    <link rel="stylesheet" th:href="@{/css/trailsPageFragsStyle.css}">


</head>
<body >
<header th:insert="~{/fragments/Templating.html::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://www.google.com/maps/dir/51.57623,-3.21910/51.575372,-3.219186/51.576363,-3.220712//@11z">
            </iframe>
            <div><a href="https://www.google.com/maps/dir/51.57623,-3.21910/51.575372,-3.219186/51.576363,-3.220712//@11z">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"
                    th:src="'https://www.google.com/maps/dir/51.57239,-3.21992/51.57230,-3.21938//@&hl=en&z=20&amp;output=embed'">
            </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://www.google.com/maps/dir/51.57168,-3.21861/51.57465,-3.22022//@11z'">
            </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://www.google.com/maps/dir/51.61117,-3.10198/51.61655,-3.12371 //@11z'">
            </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://www.google.com/maps/dir/51.43484,-3.16492/51.43547,-3.16789//@11z'">
            </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>
<!-- With the trial name, we go through locations list to get -->
        <div th:each="locationCoord, indexValue:${locCoords}"  >
            <div th:if="${locations[indexValue.index].getLocationTrailID()==trail.getTrailsId()}">
                <li id="checkpointList">
                    <div><a th:href="'/checkpoints/'+${locations[indexValue.index].getLocationName().replace(' ', '-')}" th:text="${locations[indexValue.index].getLocationName()}"></a></div>
                    <ul></ul>
                </li>


            </div>


        </div>
    </article>
    <hr style="height:40px; visibility:hidden;" />
</main>

<footer th:insert="~{/fragments/Templating.html::footer}"></footer>
</body>
</html>