Array
(
    [0] => Array
        (
            [TrailID] => 1
            [UserID] => 1
            [TrailName] => Lakeside Park - Every Second (Green) Trail
            [TrailDescription] => At Lakeside Park, three mountain bike trails provide great Onewheel trails.
            [TrailTimestamp] => 2022-10-12 10:09:18
            [TrailVisible] => 1
            [TrailRatingAvg] => 5
            [TrailRatingsTotal] => 1
            [TrailAverageRideTime] => 00:07:00
            [TrailEstimatedTime] => 00:07:00
            [TrailChargingAvailable] => 1
            [TrailChargingNote] => NOTE: The pavilion is closed due to fire damage and is being rebuilt.

The Pavilion near the 7th Inning Splash Park has charging.  The pavilion can be rented for a fee. If the pavilion is in use by renters, do not charge.
            [TrailParkingAddress] => 1500 Piedmont Hwy, Piedmont, SC 29673
            [TrailSecondParkingAddress] => 
            [TrailParkingNote] => If you park near the 7th Inning Splash Park, the Pavilion has charging.  There is larger parking lot south towards the basketball courts.
            [TrailDifficulty] => 1
            [TrailStartGPSLat] => 
            [TrailStartGPSLng] => 
            [TrailSecondStartGPSLat] => 
            [TrailSecondStartGPSLng] => 
            [TrailDistance] => 
            [TrailSurfaceID] => 1
            [TrailRouteTypeID] => 1
            [TrailPhotos] => Array
                (
                )

            [TrailSurfaceName] => Mountain Bike Trail
            [TrailSurfaceDescription] => 
            [TrailRouteTypeName] => Loop
            [TrailRouteTypeDescription] => A loop trail has the same beginning and ending.
            [TrailDifficultyName] => Easy (green circle)
            [TrailDifficultyDescription] => 
        )

    [1] => Array
        (
            [TrailID] => 3
            [UserID] => 1
            [TrailName] => Doodle Trail
            [TrailDescription] => Paved walking and biking path from Easley to Pickens.  Charging is available at the Pickens pavilion at the end of the trail.
            [TrailTimestamp] => 2022-10-12 10:14:40
            [TrailVisible] => 1
            [TrailRatingAvg] => 5
            [TrailRatingsTotal] => 1
            [TrailAverageRideTime] => 00:00:00
            [TrailEstimatedTime] => 01:30:00
            [TrailChargingAvailable] => 1
            [TrailChargingNote] => 
            [TrailParkingAddress] => 639 Fleetwood Dr, Easley, SC 29640
            [TrailSecondParkingAddress] => 124 Railroad St, Pickens, SC 29671
            [TrailParkingNote] => 
            [TrailDifficulty] => 0
            [TrailStartGPSLat] => 
            [TrailStartGPSLng] => 
            [TrailSecondStartGPSLat] => 
            [TrailSecondStartGPSLng] => 
            [TrailDistance] => 18
            [TrailSurfaceID] => 2
            [TrailRouteTypeID] => 2
            [TrailPhotos] => Array
                (
                    [0] => Array
                        (
                            [TrailPhotoID] => 1
                            [TrailID] => 3
                            [UserID] => 1
                            [TrailPhotoCaption] => Doodle Trail Screenshot
                            [TrailPhotoURL] => /uploads/trails/trailid-3/1-doodletrailonewheel.JPG
                            [TrailPhotoOrder] => 1
                            [TrailPhotoTimestamp] => 2022-10-12 11:23:13
                            [TrailPhotoVisible] => 1
                        )

                )

            [TrailSurfaceName] => Pavement
            [TrailSurfaceDescription] => 
            [TrailRouteTypeName] => Out and back
            [TrailRouteTypeDescription] => Follow the trail to the ending, then turn around and go back.
            [TrailDifficultyName] => Easiest (white circle)
            [TrailDifficultyDescription] => 
        )

    [2] => Array
        (
            [TrailID] => 5
            [UserID] => 
            [TrailName] => Float Valley Onewheel Park
            [TrailDescription] => 
            [TrailTimestamp] => 2022-11-06 09:15:59
            [TrailVisible] => 1
            [TrailRatingAvg] => 
            [TrailRatingsTotal] => 
            [TrailAverageRideTime] => 
            [TrailEstimatedTime] => 
            [TrailChargingAvailable] => 
            [TrailChargingNote] => 
            [TrailParkingAddress] => 2633 Nashville Hwy, Columbia, TN 38401
            [TrailSecondParkingAddress] => 
            [TrailParkingNote] => The fire department is sharing their parking lot. Please do not ride Onewheels or bikes in the parking lot.  Please ride the trails only.
            [TrailDifficulty] => 
            [TrailStartGPSLat] => 
            [TrailStartGPSLng] => 
            [TrailSecondStartGPSLat] => 
            [TrailSecondStartGPSLng] => 
            [TrailDistance] => 
            [TrailSurfaceID] => 
            [TrailRouteTypeID] => 
            [TrailPhotos] => Array
                (
                )

            [TrailSurfaceName] => 
            [TrailSurfaceDescription] => 
            [TrailRouteTypeName] => 
            [TrailRouteTypeDescription] => 
            [TrailDifficultyName] => 
            [TrailDifficultyDescription] => 
        )

)
<!DOCTYPE html>
<html lang="en">
    <head>
                    <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>List of trails near (ZIPCODE)</title>
        <link rel="icon" type="image/x-icon" href="templates/favicon.ico" />
        <!-- Bootstrap icons-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
        <!-- Google fonts-->
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,600;1,600&amp;display=swap" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,500;0,600;0,700;1,300;1,500;1,600;1,700&amp;display=swap" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,400;1,400&amp;display=swap" rel="stylesheet" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="vendor/startbootstrap/startbootstrap-new-age/dist/css/styles.css" rel="stylesheet" />
        <style>
            .ratings i{
                color:#cecece;
            }

            .rating-color{
                color:#fbc634 !important;
            }
        </style>
        
    </head>
    <body id="page-top">
<!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm" id="mainNav">
            <div class="container px-5">
                <a class="navbar-brand fw-bold" href="/">OneRide</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    Menu
                    <i class="bi-list"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ms-auto me-4 my-3 my-lg-0">
                        <li class="nav-item"><a class="nav-link me-lg-3" href="/list.php">Find Nearby Trails</a></li>
                        <li class="nav-item"><a class="nav-link me-lg-3" href="/addTrail.php">Submit a Trail</a></li>
                    </ul>
                    <button class="btn btn-primary rounded-pill px-3 mb-2 mb-lg-0" data-bs-toggle="modal" data-bs-target="#loginModal">
                        <span class="d-flex align-items-center me2">
                            <i class="bi bi-box-arrow-in-right"></i>
                            <span class="small">&nbsp;&nbsp;Login</span>
                        </span>
                    </button>
                </div>
            </div>
        </nav>

    <main role="main" class="container">
        <section>
            <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
            <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
            </symbol>
            </svg>
        <div class="alert alert-warning d-flex align-items-center" role="alert">
            <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
            <div>
                This website is actively being developed.  Current
                version <a href="/CHANGELOG.md">0.0.1</a> is pre alpha.
                Things are broken, or will break. You probably will see
                diagnostic text on various pages.  You can read the <a href="/TODO.md">TODO</a> file to
                see what still needs to be done.
            </div>
        </div>
        </section>
            <section id="listTrails">
            <div class="container px-1">
                <div class="row g-0 align-items-left">
                    <div class="col">
                        <h1 class="font-alt">List of trails near (ZIPCODE)</h1>
                    </div>
                </div>
                <div class="row g-3">
                    <form class="row g-3">
                        <div class="col-md-8">
                            <div class="input-group mb-3">
                                <button class="btn btn-outline-secondary" type="button" id="button-curlocation" name="button-curlocation" onclick="getLocation()">Use current location</button>
                                <input type="search" class="form-control" name="searchTrails" id="searchTrails" placeholder="Search near an address or zip code" aria-label="Search near an address or zip code" aria-describedby="button-addon1">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <select class="form-select" aria-label="Default select example">
                                <option selected>Search radius</option>
                                <option value="5">5 miles</option>
                                <option value="15">15 miles</option>
                                <option value="30">30 miles</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                    </form>
                </div>
                                    <div class="row gy-3">
                        <div class="col-4">
                            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                                                    </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            </div>
                        </div>
                        <div class="col-8">
                            <h4><a href="/trail.php?trailID=1">Lakeside Park - Every Second (Green) Trail</a></h4>
                            <span data-toggle="tooltip" data-placement="top" title="">Mountain Bike Trail</span> <i class="bi bi-dot"></i> <span data-toggle="tooltip" data-placement="top" title="">Easy (green circle)</span> <i class="bi bi-dot"></i>
                            <div class="ratings d-inline-block">
                                                            <i class="bi bi-star rating-color"></i>
                                <i class="bi bi-star rating-color"></i>
                                <i class="bi bi-star rating-color"></i>
                                <i class="bi bi-star rating-color"></i>
                                <i class="bi bi-star rating-color"></i>
                                                        </div>
                            5 (1)
                                                            <i class="bi bi-dot"></i> <i class="bi bi-lightning-charge" data-toggle="tooltip" data-placement="top" title="Charging Available"></i>
                                                        <br />
                             mi (00:07:00 (avg time: 00:07:00)) - <br />
                            Parking: <a href="https://www.google.com/maps/place/1500 Piedmont Hwy, Piedmont, SC 29673" target="_blank">1500 Piedmont Hwy, Piedmont, SC 29673</a> (If you park near the 7th Inning Splash Park, the Pavilion has charging.  There is larger parking lot south towards the basketball courts.)<br />
                            Trailhead: , <br />
                            <br />
                            At Lakeside Park, three mountain bike trails provide great Onewheel trails.<br />
                        </div>
                        <hr />
                    </div>
                                    <div class="row gy-3">
                        <div class="col-4">
                            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                                                            <div class="carousel-item active">
                                            <img src="/uploads/trails/trailid-3/1-doodletrailonewheel.JPG" alt="Doodle Trail Screenshot" class="d-block w-100 rounded-3"><br />
                                        </div>
                                                                    </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            </div>
                        </div>
                        <div class="col-8">
                            <h4><a href="/trail.php?trailID=3">Doodle Trail</a></h4>
                            <span data-toggle="tooltip" data-placement="top" title="">Pavement</span> <i class="bi bi-dot"></i> <span data-toggle="tooltip" data-placement="top" title="">Easiest (white circle)</span> <i class="bi bi-dot"></i>
                            <div class="ratings d-inline-block">
                                                            <i class="bi bi-star rating-color"></i>
                                <i class="bi bi-star rating-color"></i>
                                <i class="bi bi-star rating-color"></i>
                                <i class="bi bi-star rating-color"></i>
                                <i class="bi bi-star rating-color"></i>
                                                        </div>
                            5 (1)
                                                            <i class="bi bi-dot"></i> <i class="bi bi-lightning-charge" data-toggle="tooltip" data-placement="top" title="Charging Available"></i>
                                                        <br />
                            18 mi (01:30:00 (avg time: 00:00:00)) - <br />
                            Parking: <a href="https://www.google.com/maps/place/639 Fleetwood Dr, Easley, SC 29640" target="_blank">639 Fleetwood Dr, Easley, SC 29640</a>  or <a href="https://www.google.com/maps/place/124 Railroad St, Pickens, SC 29671" target="_blank">124 Railroad St, Pickens, SC 29671</a> ()<br />
                            Trailhead: , <br />
                            <br />
                            Paved walking and biking path from Easley to Pickens.  Charging is available at the Pickens pavilion at the end of the trail.<br />
                        </div>
                        <hr />
                    </div>
                                    <div class="row gy-3">
                        <div class="col-4">
                            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                                                    </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            </div>
                        </div>
                        <div class="col-8">
                            <h4><a href="/trail.php?trailID=5">Float Valley Onewheel Park</a></h4>
                            <span data-toggle="tooltip" data-placement="top" title=""></span> <i class="bi bi-dot"></i> <span data-toggle="tooltip" data-placement="top" title=""></span> <i class="bi bi-dot"></i>
                            <div class="ratings d-inline-block">
                                                            <i class="bi bi-star"></i>
                                <i class="bi bi-star"></i>
                                <i class="bi bi-star"></i>
                                <i class="bi bi-star"></i>
                                <i class="bi bi-star"></i>
                                                        </div>
                             ()
                                                        <br />
                             mi ( (avg time: )) - <br />
                            Parking: <a href="https://www.google.com/maps/place/2633 Nashville Hwy, Columbia, TN 38401" target="_blank">2633 Nashville Hwy, Columbia, TN 38401</a> (The fire department is sharing their parking lot. Please do not ride Onewheels or bikes in the parking lot.  Please ride the trails only.)<br />
                            Trailhead: , <br />
                            <br />
                            <br />
                        </div>
                        <hr />
                    </div>
                            </div>
        </section>
    </main>
    <!-- /.container -->
    <br />
    <!-- Footer -->
            <!-- Login Modal-->
        <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-gradient-primary-to-secondary p-4">
                        <h5 class="modal-title font-alt text-white" id="loginModalLabel">Login</h5>
                        <button class="btn-close btn-close-white" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body border-0 p-4">
                        <form id="loginForm" data-sb-form-api-token="API_TOKEN">
                            <!-- Username input-->
                            <div class="form-floating mb-3">
                                <input class="form-control" id="username" type="text" placeholder="Enter your username..." data-sb-validations="required" />
                                <label for="username">Username</label>
                                <div class="invalid-feedback" data-sb-feedback="username:required">Enter your username</div>
                            </div>
                            <!-- passwprd input-->
                            <div class="form-floating mb-3">
                                <input class="form-control" id="password" type="password" placeholder="Password" data-sb-validations="required,email" />
                                <label for="password">Password</label>
                                <div class="invalid-feedback" data-sb-feedback="password:required">An email is required.</div>
                            </div>
                            <div class="form-floating mb-3"><a href="" data-bs-target="#forgotPasswordModal" data-bs-toggle="modal" data-bs-dismiss="modal">Forgot your password?</a></div>
                            <!-- Submit success message-->
                            <!---->
                            <!-- This is what your users will see when the form-->
                            <!-- has successfully submitted-->
                            <div class="d-none" id="submitSuccessMessage">
                                <div class="text-center mb-3">
                                    <div class="fw-bolder">Form submission successful!</div>
                                    To activate this form, sign up at
                                    <br />
                                    <a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
                                </div>
                            </div>
                            <!-- Submit error message-->
                            <!---->
                            <!-- This is what your users will see when there is-->
                            <!-- an error submitting the form-->
                            <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error logging in!</div></div>
                            <!-- Submit Button-->
                            <div class="d-grid"><button class="btn btn-primary rounded-pill btn-lg" id="submitButton" type="submit">Submit</button></div>
                            <div class="form-floating mt-3 text-center"><a href="" data-bs-target="#signupModal" data-bs-toggle="modal" data-bs-dismiss="modal">Don't have an account? Sign up!</a></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- Forgot Password Modal-->
        <div class="modal fade" id="forgotPasswordModal" tabindex="-1" aria-labelledby="forgotPasswordModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-gradient-primary-to-secondary p-4">
                        <h5 class="modal-title font-alt text-white" id="forgotPasswordModalLabel">Forgot Password</h5>
                        <button class="btn-close btn-close-white" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body border-0 p-4">
                        <form id="forgotPasswordForm" data-sb-form-api-token="API_TOKEN">
                            <div class="form-floating mb-3">Please enter your email address to continue.</div>
                            <!-- Email input-->
                            <div class="form-floating mb-3">
                                <input class="form-control" id="email" type="text" placeholder="Enter your email..." data-sb-validations="required" />
                                <label for="email">Email</label>
                                <div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
                                <div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
                            </div>

                            <!-- Submit success message-->
                            <!---->
                            <!-- This is what your users will see when the form-->
                            <!-- has successfully submitted-->
                            <div class="d-none" id="submitSuccessMessage">
                                <div class="text-center mb-3">
                                    <div class="fw-bolder">Form submission successful!</div>
                                    To activate this form, sign up at
                                    <br />
                                    <a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
                                </div>
                            </div>
                            <!-- Submit error message-->
                            <!---->
                            <!-- This is what your users will see when there is-->
                            <!-- an error submitting the form-->
                            <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error logging in!</div></div>
                            <!-- Submit Button-->
                            <div class="d-grid"><button class="btn btn-primary rounded-pill btn-lg" id="submitButton" type="submit">Submit</button></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- Signup Modal-->
        <div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-gradient-primary-to-secondary p-4">
                        <h5 class="modal-title font-alt text-white" id="signupModalModalLabel">Join the OneRide community</h5>
                        <button class="btn-close btn-close-white" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body border-0 p-4">
                        <form id="signupForm" data-sb-form-api-token="API_TOKEN">
                            <div class="form-floating mb-3">Please enter your information to join the community.</div>
                            <!-- Email input-->
                            <div class="form-floating mb-3">
                                <input class="form-control" id="email" type="text" placeholder="Enter your email..." data-sb-validations="required" />
                                <label for="email">Email</label>
                                <div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
                                <div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
                            </div>

                            <!-- Submit success message-->
                            <!---->
                            <!-- This is what your users will see when the form-->
                            <!-- has successfully submitted-->
                            <div class="d-none" id="submitSuccessMessage">
                                <div class="text-center mb-3">
                                    <div class="fw-bolder">Form submission successful!</div>
                                    To activate this form, sign up at
                                    <br />
                                    <a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
                                </div>
                            </div>
                            <!-- Submit error message-->
                            <!---->
                            <!-- This is what your users will see when there is-->
                            <!-- an error submitting the form-->
                            <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error logging in!</div></div>
                            <!-- Submit Button-->
                            <div class="d-grid"><button class="btn btn-primary rounded-pill btn-lg" id="submitButton" type="submit">Submit</button></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <footer class="bg-black text-center py-5">
            <div class="container px-5">
                <div class="text-white-50 small">
                    <div class="mb-2">OneRide is not affiliated or connected with
                    <a href="https://www.onewheel.com" target="_blankl">Onewheel/Future
                    Motion, Inc.</a>  Onewheel is a registered trademark of Future
                    Motion, Inc.</div>
                    <div class="mb-2">&copy; OneRide 2022. All Rights Reserved.<br />
                    OneRide <a href="/CHANGELOG.md">v0.0.1</a></div>
                    <a href="/privacy.php">Privacy</a>
                    <span class="mx-1">&middot;</span>
                    <a href="/terms.php">Terms</a>
                    <span class="mx-1">&middot;</span>
                    <a href="/faq.php">FAQ</a>
                </div>
            </div>
        </footer>

    <!-- Footer -->
    <!-- Bootstrap core JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Core theme JS-->
    <script src="vendor/startbootstrap/startbootstrap-new-age/dist/js/scripts.js"></script>
        <script>
    var x = document.getElementById("searchTrails");
    
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
            x.value = "Geolocation is not supported by this browser.";
        }
    }

    function showPosition(position) {
        x.value = position.coords.latitude +", "+ position.coords.longitude;
    }

    function showError(error) {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                x.value = "User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                x.value = "Location information is unavailable."
                break;
            case error.TIMEOUT:
                x.value = "The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                x.value = "An unknown error occurred."
                break;
        }
    }
    </script>
    </body>
</html>